Top Headlines

An App that Shows last news worldwide with/without category select (general, business, entertainment, health, science, sports, technology)

Live Demo Here

Table of Contents

• Problem
• Solution
• Features
• User Stories
• User Journey
• Technologies Used
• API
• Screenshots
• Setup
• Contact

Problem

There is a lot of new news everywhere and it's hard to track all news agencies in order to keep up to date with them, also there is a lot news which could be guieded by it's source and that's will lead to cheat the user

Solution

Our Application provide up to date news fro wide range of world wide agencies which categorized and with the ability to search for a specific keyword

Features

• Simple UI.
• Responsive.
• Fetch data from Backend.
• Handle user errors and server errors.

User Stories

• As a person looking to read the latest news I want to visit your site and immediately see the most important news in a special section So that I quickly know what's going on around the world.

• As a person looking to read the news I want to visit your site and see a navigation link for the different page sections so I can quickly navigate to the areas of the site I'd like to visit.

• As a person looking to read the news I want to see the different news sections and each section should contain its related news (e.g. Sports, Science, Health, Business...etc ) So I can read about any topic separately

• As a person looking to read the news I want to easily view the site when browsing on my mobile, tablet or desktop so that I can understand the sites content easily on whatever device I choose to view it in.

User Journey

• When the user opens the home page, he finds the latest general news around the world, and at the top of the page he finds a selection bar that includes different sections of our site (news - sports - technology - economy) he can click on the target section and the site will move it to it. The user can use the Dark Mode feature.

Technologies Used

• HTML5
• CSS3
• JavaScript
• Node.js
• Express Framework

External API

• Top Headlines uses NewsAPI

Setup

Dev Dependencies

• eslint
• nodemon
• jest
• supertest

Dependencies

• evn2
• express
• compression
• node-fetch@2

Installation

• clone this repository git clone https://github.com/GSG-G11/Top-Headlines.git
• open it with your favorite text editor code Top-Headlines/
• run npm i to install dependencies
• run npm run dev to start the project in the localhost

Contact

Created by @yousrakhaleel, @Ibrahim-Jarada - feel free to contact us!