Songbad Sonkolon

Songbad Sonkolon is a NEWS APP which fetces Latest News from the web and show it in the page. Read the Top Headlines and news from different categories like Business, Entertainment, General, Health, Science, Sports, Technology . You can scroll through all of the news easily and efficiently, with only one click you can read your favourite news, goto to your favourite category.Feeling irritating with the color! Change the theme between Light mode and Dark Mode according to your comfortability from the top right corner. Are you have scrolled too many down to page? Don't worry, You can Scorll to top with just only one click on the bottom right arrow . Songbad Sonkolon is here to provide news according according to your wish. No matter you are using it in your Mobile, Tablet or PC. We are always there

Developer Guide

This is a single page web app which is created using React JS. It uses fetch API for making api request from News API server. This project uses Bootstrap as CSS library and also uses Google Material Icons for UI icons. For dark theme React useContext hook is used. The project also uses 3 React packages

• React-Router
• React-Top-Loading-Bar
• React-Infinite-Scroll-Component

This is a public repository so you are open to contribute in my project to make it better.

Project Setup

Get your API key

1. Goto NewsApi Official website
2. Click on Get API Key
3. Fill up the credentials.
4. Select your plan.

Select Developer as it is free of cost

Hurrrah! you got your api key. Now copy it for your further usage.

Install Node JS

Though many of you already have Node JS installed, some of you,specially the beginners, may not have installed in their computers. So for them to install Node Js

1. Goto NodeJS official website
2. Download the nodejs installer for your computer whatever device you are using
3. Install the software and follow the on screen instructions.

Clone this repository

There are two ways to clone this repo to your computer

First: Download this code as .zip file

Click Here to download the code in a single zip file. Then unzip it in your desired folder

Using git cloning

1. Create an empty folder
2. Goto the folder and open
   Powershell for windows and
   Terminal for MacOS or Linux
3. Paste the code below

git clone https://github.com/Soumodip-Paul/Songbad-Sonkolon.git --single-branch 

4. Press enter

Now the code is successfully copied to your desired folder

To use git command you need to download Git from Git-Scm Official website

Install dependencies

Goto your project directory and open PowerShell for Windows or
Terminal for MacOs an Linux and just copy and paste the folowing code and Press enter

npm i

Make sure that you have downloaded NodeJS to use npm

Setup your api key

To set up your api key you generated

1. Create a file named .env in root directory of your project.
2. Copy the following code to your .env file and repalce the $your-api-key by Your api key you genereted before.

REACT_APP_API_KEY = "$your-api-key"

Hurrah! you are almost there to use the project.

Run the projet

To run the Project

1. Go to the project directory
2. Open Powershell for windows and
   Terminal for MacOS or Linux
3. Paste the following command

npm start

4. Wait for time till development server starts
5. Ohhh, the project start working on localhost:3000
6. Go to browser and paste

localhost:3000

to view your app

Note: According to Documentation, News API supports requests only from localhost for Developer mode. So don't use the default ip of react or deploy it. It will be meaningless. To deploy the app in production mode you need to purchase the prememium plan of News API. Also it has only 100 requests per day for developer mode. So use it very carefully

Make a optimized build

To make an optimized build of the app just run the following command

npm run build

and react will create the optimized build in %Your Project%/build/ folder.