DailyBuzz: Modern React News Portal

A visually rich, modular news web app built with React and Vite, fetching live news from NewsAPI.org. Explore trending stories, search topics, and browse by category with a beautiful, responsive UI.

Table of Contents

1. About the Project
2. Tech Stack
3. Getting Started
4. Folder Structure
5. Color Palette
6. Image Credits
7. API Credits
8. What I Learned
9. More Info

⬆️ Back to Top

About the Project

DailyBuzz is a personal project that delivers the latest news in a modern, card-based UI. Users can:

🖼️ Output Preview

Here are some screenshots of DailyBuzz running with a valid NewsAPI key:

<sub>Homepage: Top headlines and featured sections


Category page: News filtered by selected category


Search results for a news topic


Category filter pills for browsing news by topic on homepage</sub>

⬆️ Back to Top

Tech Stack

• React (with Hooks) ⬆️ Back to Top

Getting Started

1. Clone the repo:

   git clone https://github.com/ayush-sleeping/DailyBuzz.git
   cd DailyBuzz

2. Install dependencies:

   npm install

3. Get your own NewsAPI key:
   • Sign up for a free developer account at NewsAPI.org.
   • After registration, you will receive an API key.
   • Create a .env file in the root of the project:

     VITE_NEWS_API_KEY=your_api_key_here

   • Note: The .env file is git-ignored and never committed. This key is only for local development.
4. Run the app:

   npm run dev

5. Open in browser:
   • Visit http://localhost:5173

⬆️ Back to Top

Folder Structure

DailyBuzz/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/           # Images, logos, icons
│   ├── components/
│   │   ├── Header/
│   │   ├── Footer/
│   │   ├── News/
│   │   └── homepage/
│   ├── data/             # (Optional) Mock data
│   ├── pages/            # Home, Category, Search, etc.
│   ├── styles/           # Global styles
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── .env                  # API key (not committed)
├── package.json
├── vite.config.js
└── README.md

• Components are modular and grouped by feature.
• Pages handle routing and data fetching.
• All API keys are kept in .env (never commit this file).

⬆️ Back to Top

Color Palette

• Primary: #d96570 (rose red)
• Accent: #f7c873 (golden yellow)
• Background: #fff, #f7f7f7
• Text: #222, #444
• Other: #eaeaea, #f3f3f3

⬆️ Back to Top

Image Credits

All images and logos used in this project are downloaded from Pinterest. Thanks to the creators and Pinterest for the resources.

⬆️ Back to Top

API Credits

Thanks to NewsAPI.org for providing a developer subscription with 100 requests per day.

⚠️ API Key Security in Production

Important:

• For local development, you can use your NewsAPI key in a .env file as described above.
• For public deployments (like GitHub Pages), do NOT expose your NewsAPI key in the frontend code. Anyone can see it in the browser.
• To keep your key secure in production, use a free serverless function (e.g., Netlify Functions or Vercel) as a proxy. Your frontend fetches news from this proxy, which keeps your key secret.

How to run this project locally:

1. Get your own NewsAPI key (see above).
2. Create a .env file and add your key.
3. Run the app with npm run dev and enjoy live news data!

How to deploy securely:

• Set up a serverless function (see project docs or ask the maintainer for a sample) to proxy NewsAPI requests.
• Never commit or expose your API key in the frontend code or public repo.

⬆️ Back to Top

What I Learned

• Building a modular, scalable React project structure
• Integrating real-world APIs and handling async data
• Advanced React Router usage for dynamic pages
• Responsive UI/UX with modern CSS
• Managing API keys securely with .env
• Handling API request limits and error states

⬆️ Back to Top

More Info

• This is a personal project; contributions are not accepted.
• Explore, learn, and enjoy the news!

⬆️ Back to Top