📰 NewsWeb

A responsive news aggregation website built with React 18 and powered by the NewsAPI. Browse top headlines by category with clean article cards, smooth client-side routing, and a live API integration.

---

✨ Features

• 🔍 Fetches real-time news from NewsAPI
• 🗂️ Browse articles by category (Technology, Business, Sports, Entertainment, and more)
• 🃏 Clean article cards with image, title, description, source, author, and publish date
• 🔗 Client-side routing via React Router DOM v6
• 📱 Responsive layout that works on desktop and mobile
• ⚡ Built on Create React App with fast development server

---

🛠️ Tech Stack

Layer	Technology
Frontend	React 18, JSX
Routing	React Router DOM v6
API	NewsAPI (/v2/top-headlines)
Styling	CSS
Tooling	Create React App, npm

---

📂 Project Structure

News-Website/
├── public/               # Static assets & index.html
├── src/                  # React source code
│   ├── components/       # Reusable UI components (Navbar, NewsCard, etc.)
│   ├── App.js            # Root component with routing
│   └── index.js          # React DOM entry point
├── sampleOutput.json     # Sample API response for development/testing
├── package.json
└── .gitignore

---

🚀 Getting Started

Prerequisites

• Node.js ≥ 16
• A free API key from newsapi.org

1. Clone the Repository

git clone https://github.com/Shaikh224/News-Website.git
cd News-Website

2. Set Up Your API Key

Create a .env.local file in the project root:

REACT_APP_NEWS_API_KEY=your_api_key_here

⚠️ Never commit your API key. .env.local is already in .gitignore.

3. Install Dependencies

npm install

4. Run the Development Server

npm start

Open http://localhost:3000 in your browser.

---

📦 Available Scripts

Command	Description
npm start	Starts the local development server
npm run build	Builds the app for production
npm test	Runs the test suite
npm run eject	Ejects CRA config (irreversible)

---

🌐 Deployment

You can deploy the production build to Vercel or Netlify in one click.

Vercel (recommended):

npm run build
# then push to GitHub and import the repo at vercel.com

Make sure to add REACT_APP_NEWS_API_KEY as an environment variable in your deployment settings.

---

📝 Notes

• The sampleOutput.json file contains a cached API response useful for offline development and testing without consuming API quota.
• NewsAPI's free tier only supports localhost — for production deployment you'll need a paid plan or a backend proxy.

---

🤝 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you'd like to change.

---

📄 License

This project is open source and available under the MIT License.

---

Made with ❤️ by Shaikh224