NFS: Most Wanted (News)

News for Search: Most Wanted news you can search here and now.

Icon made by Smashicons from www.flaticon.com

Table of Contents

• NFS: Most Wanted (News)
  • Table of Contents
  • Description
    • Motivation
  • How to Interact with This App
  • Dev Info
    • 3rd Party API
    • Technologies Stack
    • Directory Structure
    • Wireframes
    • Run Step

Description

This application is for users to search news from all around the world. Users can save news in their "reading list" and saved in their browser storage.

Motivation

This application created because in this age people want to see the news what matter to them. Especially nowadays the topic of "corona" is all around in the world and people just can search news only about corona.

The main purpose this app created is because I want to learn basic skills of web frontend developer. This app is for completing one of Dicoding's Frontend Web Development Academy.

🔝 Back to Top

How to Interact with This App

Users will land in landing page. From there only one button "Get Started". After clicking it, users will go to main page.

In this main page users can see featured news or just search the news from search box and news will displayed in a list card. In this page, users can click the "add" button in news card to add the news into their reading list and saved to browser storage.

Add to reading list is optional, they can just click the news card and they will taken to news page for the actual reading.

In the Reading List page, only news added by users is displayed. Users can delete it with clicking "Del" button.

Dev Info

3rd Party API

• This app use News API from newsapi.org

Technologies Stack

This overall app created with the help of the following key techs / apps:

• Wireframe (for wireframing)
• Visual Studio Code (my favorite code editor)
  • Great intellisense with type cheking
  • My personal VSCode settings
• HTML5
• Javascript
  • Plain vanilla without frontend framework or library
  • ES6++
  • Web Components
• SASS/SCSS ➞ CSS3
  • Bulma (CSS Framework)
• Webpack
• Google Chrome
• Firefox Developer Edition (interactive CSS testing)
• Insomnia (test API request and response)
• Favicon (to generate favicon from png)
• Git and Github

🔝 Back to Top

Directory Structure

/                    # app directory
├── configs/         # configurations (webpack, etc)
├── dist/            # build/output directory
├── public/          # template and static files
├── resources/       # resources file (wireframe, etc)
├── src/             # source files
│   ├── components/  # web components
│   ├── styles/      # global styles
│   └── index.js     # webpack's entry point
├── package.json     # project info
└── README.md        # description info

🔝 Back to Top

Wireframes

🔝 Back to Top

Run Step

• Clone this repo

  git clone https://github.com/latipun7/nfs-most-wanted-news.git

• Install dependencies from cloned directory

  cd nfs-most-wanted-news
  npm install

• Build into production ready

  npm run build

• Start development server

  npm run dev

  or start production ready server

  npm start

🔝 Back to Top