/react_news_api_context

In this project I got the data from newsapi and listed it on the main page. When the user searches for invalid data, a message not found will appear. If the user searches with empty data, he will be asked to enter a news data. 9 news will be listed on the main page and will be navigated with pagination.

Primary LanguageJavaScript

Click for my project👉

🚩 ABOUT

🌎 Home pages

In this project I got the data from newsapi and listed it on the main page. When the user searches for invalid data, a message not found will appear. If the user searches with empty data, he will be asked to enter a news data. 9 news will be listed on the main page and will be navigated with pagination.

🔍 Detail pages

When you click on the news, you can reach the detail page. The details include the source of the news, adding data to the favorite page, and share buttons.

💗 Favorite Pages

Favorite products are listed on the favorite page and there is a button to remove the favorite products to be removed.

🚩 PROJECT STRUCTURE

.
├── App.css
├── App.js
├── App.test.js
├── assets
│   ├── Homenews.jpg
│   ├── img1.jpg
│   ├── img2.jpg
│   └── img3.jpg
├── components
│   ├── Navbar.jsx
│   └── Pagination.jsx
├── context
│   └── AuthContext.jsx
├── helper
│   └── ToastNotify.js
├── index.css
├── index.js
├── pages
│   ├── DetailPage.jsx
│   ├── Favorites.jsx
│   ├── Home.jsx
│   ├── Login.jsx
│   └── SourceSection.jsx
├── reportWebVitals.js
└── router
    └── AppRouter.jsx

🚩 Libraries and Technologies I use

  • React
  • Toastify
  • Bootstrap
  • Reactbootstrap
  • Axios
  • React Router Dom (6.3v)
  • React Share

🚩 How does my project look

news2

🚩 How To Use

To clone and run this application, you'll need Git

# Clone this repository ($ git clone https://github.com/)
> run command npm install
> Open the runserver