/The-News-Flux

This is the repository of React js website The News Flux. It fetches data from the News API and display it on the frontend. Users can read news by choosing different categories

Primary LanguageJavaScript


Logo

The News Flux

A News Web App build with React js and news API. It fetches top headlines category wise and display them on the frontend

Table of Contents
  1. About The Project
  2. Getting Started
  3. Overview
  4. Contact

About The Project

Main Page

The News Flux is a Web Application built using React js and an APi from news api. It fetches the top headlines of different category and display them as a induvidual news item with a News source, Date of the news, Title, Description, Image realted to that News, and a read more button which direct the user to a different website to read more about that particular news. It has different categories in the Navbar, clicking on them shows user news related to that category. It also has a button to change the mode to Dark and Light Mode.

I have built this website by using different features of React js including React Hooks, React Context, React Router. React Hooks such as useState, useEffect. Create Context was used to make a context of dark mode and it has used in the whole component to manage the dark mode state. React Router was used to create routes for different news categories.

Built With

This projects was built using React js, react router, custom css.

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Installation

  1. Clone the repo
    git clone https://github.com/sheharyarIshfaq/The-News-Flux.git
  2. Install NPM packages
    npm install
  3. Run the project on local host
    npm start

Overview

Images of the project

Main Page

Main Page


Main Page (Dark Mode)

Main Page


Category Preview

Main Page


Responsive Navbar

Main Page


Ipad Preview

Main Page


Mobile Preview

Main Page


Contact

Sheharyar Ishfaq - Facebook - Linkedin

Project Link: The-News-Flux