📄 Project Description:
News Magazine is a React-based news aggregator application built using Vite. It fetches top headlines from the News API and displays them in a visually appealing card format. Users can select different news categories to view relevant articles. The application utilizes Bootstrap for styling and responsiveness.
🌟 Features:
| Feature | Backend Technologies | Frontend Technologies | Backend Setup Steps | Frontend Setup Steps |
|---|---|---|---|---|
| News Aggregation | News API | React, Vite, Bootstrap | 1. Obtain a News API key. 2. Set the API key as environment variable VITE_API_KEY. |
1. npm install 2. npm run dev |
| Category Selection | ||||
| Responsive Design | Bootstrap | |||
| Clean UI | React |
📁 Project Structure:
The project follows a standard React application structure:
news-mag/
├── src/
│ ├── App.css
│ ├── App.jsx
│ ├── components/
│ │ ├── Navbar.jsx
│ │ ├── NewsBoard.jsx
│ │ └── NewsItem.jsx
│ ├── index.css
│ └── main.jsx
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js
🔧 Setup Instructions:
- Clone the repo: ⚙️
git clone <repository_url> - Navigate to the directory: 📁
cd news-mag - Install dependencies: 📦
npm install - Set Environment Variables: 💡 Create a
.envfile in the root directory and add your News API key:VITE_API_KEY=YOUR_NEWS_API_KEY - Run the development server:
▶️ npm run dev
Once the development server is running, open your browser and navigate to http://localhost:5173/. You can then select different news categories from the navigation bar to view the latest headlines.
🧪 Examples:
The application makes GET requests to the News API based on the selected category. For example, selecting "technology" will result in a request similar to: https://newsapi.org/v2/top-headlines?country=us&category=technology&apiKey=YOUR_NEWS_API_KEY. The response is then parsed and displayed as news cards. See screenshots below:
(Add screenshots here showing different categories and the news displayed)
📚 API Docs:
This application primarily consumes the News API. Refer to their documentation for details on available endpoints and parameters: News API Documentation
🤝 Contributing: 📝
Contributions are welcome! Please open an issue or submit a pull request. Before contributing, please ensure you have followed the setup instructions and run the linter (npm run lint).
📜 License: 📄
This project is licensed under the MIT License.
📞 Contact Info: 📌
For any questions or support, please contact [rohitbansal7364@gmail.com].