Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anshuldhakate/news-portal
A React application that fetches and displays news articles from an API based on selected categories and countries. It includes features like category filtering, pagination, and detailed article views.
https://github.com/anshuldhakate/news-portal
ja reactjs sty
Last synced: about 2 months ago
JSON representation
A React application that fetches and displays news articles from an API based on selected categories and countries. It includes features like category filtering, pagination, and detailed article views.
- Host: GitHub
- URL: https://github.com/anshuldhakate/news-portal
- Owner: Anshuldhakate
- Created: 2024-06-20T11:06:23.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-06-21T12:37:25.000Z (6 months ago)
- Last Synced: 2024-06-22T05:04:42.468Z (6 months ago)
- Topics: ja, reactjs, sty
- Language: JavaScript
- Homepage: https://6675713ad230f5729100e5a5--idyllic-semolina-c2cc1e.netlify.app/
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# News Portal
A React application that fetches and displays news articles from an API based on selected categories and countries. It includes features like category filtering, pagination, and detailed article views.
## Demo
You can view a live demo of the project [[here](https://6675713ad230f5729100e5a5--idyllic-semolina-c2cc1e.netlify.app/)](#).
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
## Features
- **Category Filtering:** Allows users to filter news articles by Business, Technology, Entertainment, Health, Science, and Sports categories.
- **Pagination:** Implements pagination to navigate through multiple pages of articles.
- **Article Details:** Clicking on an article card displays detailed information including the title, image (if available), content, author, publication date, and a link to the full article.
- **Responsive Design:** Ensures the application is usable and looks good across various devices and screen sizes.
## Technologies Used
- **React:** Frontend framework for building user interfaces.
- **Redux:** State management library for managing application state.
- **React Router:** Library for handling navigation and routing in React applications.
- **Styled Components:** Library for styling React components using tagged template literals.
- **News API:** Used for fetching news article data.
## Installation
1. **Clone the repository:**
```bash
git clone https://github.com/Anshuldhakate/news-portal.git
cd news-portal
2. **Install dependencies:**
npm install
3. **Set up your environment variables:**
REACT_APP_NEWS_API_KEY=0ea5e0b2d8fd4b1ea376ce92a4814427
4. **Start the development server:**
npm start
## Usage
- Select a category from the filter to view articles related to that category.
- Use pagination to navigate through multiple pages of articles.
- Click on an article card to view detailed information including the article's title, image, content, author, publication date, and a link to the full article.
## Contributing
Contributions are welcome! Please follow these steps to contribute:
- Fork the repository.
- Create a new branch (git checkout -b feature/improvement).
- Make your changes.
- Commit your changes (git commit -am 'Add new feature').
- Push to the branch (git push origin feature/improvement).
- Create a new Pull Request.