News-Application

This is a React-based news application that displays the latest news articles from various categories such as Technology, Business, Health, Science, Sports, and Entertainment. The application is built with Vite for a fast development and Bootstrap is used for styling and layout. The key components of the application includes a Navbar for navigation, a NewsBoard to display articles based on the selected category, and individual NewsItems that show the details of each article.

APIs Used

• News Api:A news api is being used for fetching the latest news articles.The api endpoint used is https://newsapi.org/v2/top-headlines and uses an API key to access the data.

Features

• Users can choose from various news categories such as Technology, Business, Health, Science, Sports, and Entertainment.
• The app fetches and displays the latest news articles from the selected category.
• The application is designed to be responsive and works well on both desktop and mobile devices.
• Each news article includes a link that directs users to the full article on the original news website.

Setup Instructions

1. Install Dependencies
   • npm init
2. Create a .env File(Create a .env file in the root of the project and add your NewsAPI key)
   • VITE_API_KEY=your_news_api_key
3. Run the Application
   • npm run dev

Key Components

• Navbar: This bar allows users to select different news categories.
• NewsBoard: This component simply fetches news articles based on the selected category and displays them.
• NewsItem: This component displays individual news articles with a title, description, image, and a link to read more.

Dependencies

• React: A JavaScript library for building user interfaces.
• Vite: A build tool that provides a fast development environment.
• Bootstrap: A CSS framework for developing responsive and mobile-first websites.

Demo Link :

Click here

Contributions

If you are having any issues or have any kind of suggestions for improvements,feel free to open an issue!