saifiimuhammad / TimesOfNews

This is a React Web News Application using newsapi.

React News Web App - Times Of News

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.

Table of Contents

• Introduction
• Features
• Installation
• Usage
• Technologies
• Folder Structure
• License

Introduction

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.

Features

• 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.

• Infinite Scroll: Scroll through news articles seamlessly with an infinite scroll feature, providing a smooth user experience.

Installation

1. Clone the repository:

   git clone https://github.com/saifiimuhammad/TimesOfNews.git

2. Navigate to the project directory:

   cd news-app

3. Install dependencies:

   npm install

Usage

1. Obtain your API key from NewsAPI and replace YOUR_API_KEY in the .env file.

2. Start the development server:

   npm start

3. Open your browser and visit http://localhost:3000 to view the app.

Technologies

• 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.

Folder Structure

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

License

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.