phiagent / news-app

News on the Go

Table of Contents

1. About The Project Built With
2. Grading Rubric
   • Architectural Requirements
   • Languages
   • UI Design And Accessibility
   • Architecture Pattern
   • Core Web Principles
   • Web Development Best Practices
   • Repository Description
   • Version Control
3. Installation
4. Roadmap
5. Contributing
6. Contact
7. Acknowledgments

About The Project

This is a application that allows you to save news articles you'd like to read later so you can visit them at your convenience.(https://news-app-pga.herokuapp.com/)

[]

(back to top)

Built With

• React.js
• MaterialUI
• Express
• PostgreSQL

(back to top)

Grading Rubric

Architectural Requirements

1. JS Library/Framework: React
2. Ways of Interaction:

• By mouse
• By keyboard
• By screenReader(Application fully navigable using a screenReader)

3. Architectural Pattern: MVC
4. Integration with a PostGreSQL database hosted on Heroku that allows create, read, update and delete options via RESTful API's
5. Usage of over 5 MUI components
6. Usage of 5 reusable components in controls

(back to top)

Languages

1. Backend: PostGreSQL, Node.js
2. Frontend: TypeScript, HTML, CSS

(back to top)

UI Design And Accessibility

UI Design:

1. Reusable Components: Application made use of reusable components to reduce the size of the code base and allow for a centralized point of design decisions. Reusable Components Used: Tab.tsx, Button.tsx, Newslet.tsx, NewsList.tsx, Input.tsx

Accessibility:

1. Aria Labels: Made use of aria-labels to allow screen reader to correctly read components on the page to vision impaired users.
2. Aria Roles: Used aria-roles to allow screen readers to see non-button clickable elements.
3. Tab-Index: Use to make entire application navigable using just keyboard for users without mouse access.
4. onKeyUp: Used to distinguish between key presses while using my application. Users can navigate with 'tab' and select with 'enter'.

(back to top)

Architecture Pattern

MVC architecture

1. MODEL The Model Layer(server/models/model.js) sits directly on top of the database and doesn't need to know what information is coming from the database.
2. CONTROLLERS The controllers consume API's exposed by the model. and don't need to know what those api's do.
3. VIEWS The server exposes APIs that are consumed by the UI on the frontend to render information.

(back to top)

Core Web Principles

1. Semantic HTML tags: Made use of HTML elements like footer and header that have semantic meaning that correlate their usage with their names.
2. h1 tags: properly nested h1 tags to allow for easy reading using a screen reader.

(back to top)

Web Development Best Practices

Separation of Concerns

I separated my UI components based on their function.
My Reusables were in isolated in the controls folder, the header of the page in the header folder, the footer in the footer folder.
I isolated other parts like the util functions and the hooks. This made my code easy to navigate.

Project Structure

Web Vitals

First Contentful Paint: 897ms; 92%
Speed Index: 1.3s; 90%
Largest Contentful Paint: 937ms; 96%
Time to Interactive: 1.4s; 99%
Cumulative Layout shift: 0.00; 100%
Accessibility: 100%

User Flow

Login Page

Home Page

Feed Page

(back to top)

Repository Description

1. API Documentation

Summary

• Create routes

  • POST /user
  • POST /favorite

• Read routes

  • GET /business
  • GET /world
  • GET /tech
  • GET /favorite

• Update routes

  • PUT /username

• Delete routes

  • DELETE /favorite

Sample Create Route

POST /user

• Description: Adds user to the database if user is new.

• Status:

  • 200 OK if success
  • 500 Failed if failed to create user

• Request Body Parameters:

  Parameter	Type	Description
  username	String	user's name to be stored

  • Request Body Example:

  {
    username: 'phiAgent'
  }

Sample Read Route

GET /business

• Description: Returns news articles in the category of business from database.
• Status:
  • 200 OK if success
  • 500 Failed if failed to fetch

Sample Update Route

PUT /user

• Description: Updates user's name in the database.

• Status:

  • 200 OK if success
  • 500 Failed if failed to update username.

• Request Body Parameters:

  Parameter	Type	Description
  oldUsername	String	user's old name
  newUsername	String	user's new name

  • Request Body Example:

  {
    oldUsername: 'phiAgent',
    newUsername: 'Obede'
  }

Sample Delete Route

DELETE /favorite

• Description: Deletes a favorite from the database.

• Status:

  • 200 OK if success
  • 500 Failed if failed to delete.

• Request Body Parameters:

  Parameter	Type	Description
  userID	number	id of user trying to unfavorite a news article
  newsID	number	id of news article being unfavorited

  • Request Body Example:

  {
    userID: 1,
    newsID: 1
  }

(back to top)

Version Control

Application was built mainly on 2 branches: master and feBuild. One branch was the development branch that I continually compared with and merged with the master branch.

(back to top)

Installation

1. Clone the repo

git clone https://github.com/PhiAgent/News-App.git

2. Checkout the feBuild out branch. The master branch is optimized for deployment and won't work out of the box for your local.

   git checkout feBuild

3. Install NPM packages

   npm install

4. Create a config.js file in database with your local psql connection details like this database/psql/config.js:

 module.exports = {
    host: "localhost",
    user: "your name",
    database: "news_app",
    password: "",
    port: 5432,
    max: 30,
    idleTimeoutMillis: 1,
  };

5. Open psql in your terminal and run the command below to populate your database, don't include the quotes around the command:

   '\i database/schema.sql'

6. Build the front end of the application by running this in the terminal:

   npm run build-dev

7. Now start your server by running in your terminal:

   npm start

8. Open localhost http://localhost:5000/ in your browser and witness the application

(back to top)

Roadmap

See the open issues for a full list issues.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Contact

Creator

Prince Addai @PhiAgent|LinkedIn

(back to top)

Acknowledgments

• Img Shields
• Font Awesome

(back to top)