simranlotey/react-news-app

This app presents the latest news articles all around the world. The news are organized by categories on which user can click to view more articles. There are various categories users can browse such as business, sports, technology, health, science and user can also search for specific news.

News App

This News App is powered by the GNews public API and provides users with the latest news articles from around the world. The app offers a user-friendly interface where news articles are organized by categories, allowing users to easily browse and read articles of their interest.

Features

• Category-based News: The app categorizes news articles into various categories, including entertainment, business, sports, technology, health, science, and more. Users can click on a category to view articles specific to that category.

• Search News: The app includes a search bar that enables users to search for specific news articles. Users can enter keywords related to the news they are interested in, and the app will display relevant articles based on the search query.

• Article Details: Each article is displayed with a title, description, publication date, channel, and a link to visit the source website. This ensures that users can get a comprehensive understanding of the news article before deciding to read more.

• Responsive Design: The app is designed to be responsive, providing a seamless experience across different screen sizes and devices. Whether users access the app from their desktop, tablet, or smartphone, the interface will adapt smoothly to fit their device.

Technologies Used

• React: The app is built using React, a popular JavaScript library for building user interfaces. React provides a robust foundation for creating interactive and dynamic components.

• Redux: Redux is used for state management in the app. It helps manage the global state of the application and enables a more organized and predictable way of handling data flows.

• Styled-Components: Styled-Components is used for styling the app. It allows developers to write CSS within JavaScript, making it easier to manage styles for individual components.

• React-Bootstrap: React-Bootstrap is utilized for building responsive and customizable UI components. It provides a wide range of pre-built components that can be easily integrated into the app.

• Axios: Axios is a JavaScript library used to make HTTP requests. It is employed in this project to fetch data from the GNews public API.

Usage

To run the React News App on your local machine, follow these steps:

1. Clone the repository to your local machine using the following command:

git clone https://github.com/simranlotey/react-news-app.git

2. Navigate to the project directory:

cd react-news-app

3. Install the required dependencies:

npm install

4. Start the development server:

npm start

5. Open your web browser and visit http://localhost:3000 to access the app.

Contributing

Contributions to this News App are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request in this repository.

License

This News App is licensed under the MIT License. Feel free to use, modify, and distribute the code as per the terms of the license.

Acknowledgements

• This app utilizes the GNews public API for fetching news articles. Visit their website for more information: GNews API

react-news-app's Issues

Feature: Please restrict the article text size to avoid layout shift

Most of the cards sizes are irregular could you please Please fix it by restrict the article text size

[BUG]: Error when reload page after search anything

Hi @simranlotey,

I was reviewing your project and I found a bug after to search anything and the refresh the page. As you can see in the video below, an error page is being displayed to the user.

Gravacao.de.Tela.2023-10-06.as.02.03.11.mov

[Bug]: Close button is not showing in in mobile devices

When i click on navigation bar Hemberger menu navigation screen is opening In order to close Hemberger menu is showing could you please add close icon to it