https://github.com/saifiimuhammad/timesofnews
This is a React Web News Application using newsapi.
https://github.com/saifiimuhammad/timesofnews
api bootstrap css javascript newsapi newsapp react reactjs
Last synced: 3 months ago
JSON representation
This is a React Web News Application using newsapi.
- Host: GitHub
- URL: https://github.com/saifiimuhammad/timesofnews
- Owner: saifiimuhammad
- Created: 2023-11-26T15:24:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-25T15:09:26.000Z (over 1 year ago)
- Last Synced: 2025-03-25T16:24:38.552Z (over 1 year ago)
- Topics: api, bootstrap, css, javascript, newsapi, newsapp, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 507 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: news-app/.gitignore
Awesome Lists containing this project
README
# 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](#introduction)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Technologies](#technologies)
- [Folder Structure](#folder-structure)
- [License](#license)
## Introduction
This React news web app fetches news data from the [NewsAPI](https://newsapi.org/) 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:
```bash
git clone https://github.com/saifiimuhammad/TimesOfNews.git
```
2. Navigate to the project directory:
```bash
cd news-app
```
3. Install dependencies:
```bash
npm install
```
## Usage
1. Obtain your API key from [NewsAPI](https://newsapi.org/) and replace `YOUR_API_KEY` in the `.env` file.
2. Start the development server:
```bash
npm start
```
3. Open your browser and visit [http://localhost:3000](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](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.