A responsive news web app built with React, utilizing the NewsAPI to fetch news articles of various categories. The project includes features such as a top loading bar and infinite scroll for a seamless user experience.
This React news web app fetches news data from the NewsAPI and organizes it into different categories. It started as a class-based component project and was later refactored into function-based components. The use of React hooks such as useState and useEffect provides a cleaner and more efficient code structure.
-
Category-based News: Explore news articles in various categories, such as Business, Entertainment, Health, Science, Sports, and Technology.
-
Top Loading Bar: A visual indicator at the top of the page shows when new articles are being loaded.
7564
-
Infinite Scroll: Scroll through news articles seamlessly with an infinite scroll feature, providing a smooth user experience.
-
Clone the repository:
git clone https://github.com/saifiimuhammad/TimesOfNews.git
-
Navigate to the project directory:
cd news-app -
Install dependencies:
npm install
-
Obtain your API key from NewsAPI and replace
YOUR_API_KEYin the.envfile. -
Start the development server:
npm start
-
Open your browser and visit http://localhost:3000 to view the app.
- React: A JavaScript library for building user interfaces.
- NewsAPI: A simple HTTP REST API for searching and retrieving live articles from all over the web.
- Bootstrap: A popular front-end framework for styling and layout.
react-news-web-app/
│
├── public/
│ └── index.html
│
├── src/
│ ├── components/
│ │ ├── Navbar
| | | ├── Navbar.js
| | | ├── style.css
│ │ ├── NewsContainer
| | | ├── NewsContainer.js
| | | ├── NewsContainer.css
│ │ ├── NewsItem
| | | ├── NewsItem.js
│ │ └── Spinner
| | ├── Spinner.js
│ ├── App.js
│ ├── index.js
│ └── ...
│
├── .env.local
├── .gitignore
├── package.json
└── README.md
This project is licensed under the MIT License.
Make sure to customize the placeholders like `your-username` and `YOUR_API_KEY` with your actual GitHub username and NewsAPI key, respectively. Also, include your license information in the `LICENSE` file if you choose a license for your project.