AndrewJBateman / pean-stack-api-display

:clipboard: Full-stack app to display data from a PostgreSQL database & REST APIs using an Angular frontend with Google Charts, Bootstrap CSS & RxJS reactive programming. Node with Express middleware backend used to pass data from database to frontend.

⚡ PEAN Full Stack API Display

• PostgreSQL Express Angular Node (PEAN) full-stack app
• PostgreSQL backend database using Node.js/express.js to perform CRUD operations on data
• Angular frontend with Bootstrap styling to display API and backend data
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ PEAN Full Stack API Display
  • 📄 Table of contents
  • 📚 General info
    • Frontend
  • 📷 Screenshots
  • 📶 Technologies - Backend
  • 📶 Technologies - Frontend
  • 💾 Setup - Backend
  • 💾 Setup - Frontend
  • 🔧 Testing
  • 💻 Code Examples - Backend
  • 💻 Code Examples - Frontend NASA API
  • 🆒 Features - Backend
  • 🆒 Features - Frontend
  • 📋 Status, Testing & To-Do List
  • 👏 Inspiration/General Tools
  • 📁 License
  • ✉️ Contact

📚 General info

• Using Angular Server Side Rendering causes problems with @angular/fire, @agm/core, and @ngx-translate - try deploying to Google App Engine

• Backend

• During dev PostgreSQL needs to be installed and running - I started it from my Windows 10 PostgreSQL 12 dropdown option 'SQL shell (psql)' or from the Node.js command prompt

• Data for Google Charts data page stored in a Postgres database then displayed on the frontend using Express.js

• Copy of charts data stored in assets folder so charts can be displayed even if database not up and running.

Frontend

• Angular frontend includes Bootstrap responsive navbar with icon links
• Navbar drops down from top in phone size
• About this site page - summary info on each page
• Author info card that gets data from Github and provides contact links
• Main section made of 8 Bootstrap cards that link to API data
• Crypto card shows prices of a list of cryptocurrencies from the CryptoCompare API
• Map card shows location data from the ipapi API using the Leaflet JavaScript maps library.Does not use passive listeners to improve scrolling performance
• NYT News card shows latest news from the New York Times Top Stories API
• Google charts card shows a range of charts using the Google Charts API Fix/replace pie chart labels, Does not use passive listeners to improve scrolling performance
• Google Book search card lets user search for any book. Results displayed in an array of Bootstrap cards. Clicking on a book shows it in detail.Book links do not use HTTPS, Displays images with incorrect aspect ratio
• New York Times API - bestseller list displayed. Clicking on a bestseller shows it in a detail page with a link to the original article.Displays images with incorrect aspect ratio
• Github card shows Github repo details from user search. Repo button redirects to repo list page. github pagination to show more than 30 repos, add sessionStorage
• Deployed version: good Lighthouse score (mobile): home page: performance: 91% ('Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity.'), accessibility: 100%, Best practises: 100%, SEO 100%, PWA. Add cache policy, remove unused Bootstrap CSS
• Versión 81.0.4044.92 (Build oficial) (64 bits) latest version was required to get e2e testing to work

📷 Screenshots

📶 Technologies - Backend

• PostgreSQL v12
• PostgreSQL Installer for Windows
• Express.js middleware v4
• Node.js v12
• Nodemon npm module so backend server will automatically restart after code changes
• Postman API to simulate a frontend

📶 Technologies - Frontend

• Angular framework v15
• Angular Universal v15 Server-Side Rendering(SSR) by a Node Express web server
• Bootstrap v5
• Font Awesome icons converted to svg components
• jQuery v3 required by Bootstrap. Latest version 3.5.1 resolved nav-bar breaking change in previous version.
• Angular Express Engine v15 for running Angular Apps on the server for server side rendering
• Google Chrome Lighthouse to check quality of website
• Google Charts
• Palantir extensible linter for the TypeScript language
• Favicon generator website to generate the simple 'AB' favicon
• Node.js compression middleware
• UnCSS Online to identify unused CSS. Useful and simple tool.
• Window sessionStorage used to store book search strings.
• ngx-picture Angular library - Github link - to help properly size, lazy load images, and use next generation formats.
• Easy-Resize.com to resize pictures online

💾 Setup - Backend

• From \server install dependencies using npm i
• Install nodemon globally if you don't already have it
• Install PostgreSQL & run it (requires the password you created during installation)
• Add database access credentials to db.js - recommend installing npm dotenv & using .env to hide credentials if commiting to Github
• Postgresql shell commands: \l list all databases. \c database1 connect to database1. \dt to list all tables. \d+ to inspect table. \d table1 to see description of table1 & show relation information. \q to quit
• From root run npm run start for a dev server
• During dev http://localhost:5000/ can be accessed for CRUD operations such as POST, GET, PUT, DELETE etc. using Postman

💾 Setup - Frontend

• From /client install dependencies using npm i
• Add your API keys for the Nasa, Google Maps and News apps to environment.ts & environment.prod.ts files or individual modules as I have done for deployment reasons
• Run ng serve for a non-SSR dev server. Frontend will open at http://localhost:4200/ - refreshes on code changes
• Run npm run dev:ssr for an SSR dev server. Frontend will open at http://localhost:4200/ - refreshes on code changes
• Run npm run build to generate a build file without SSR
• Run npm run build:ssr to generate a build file with SSR. Add defer to browser css file ref.
• Run npm run serve:ssr to see on a dev server http://localhost:4000
• Run ng deploy to deploy to Google Firebase Hosting (already setup)

🔧 Testing

• Run ng test to run Jasmine unit tests via Karma
• Run ng e2e to execute the end-to-end tests via Protractor.

💻 Code Examples - Backend

• database.sql to create a table

CREATE TABLE metalsData(
  element VARCHAR(20),
  density DOUBLE PRECISION,
  color VARCHAR(20),
  symbol VARCHAR(2)
);

💻 Code Examples - Frontend NASA API

• function to get Github user and repo data from Github API as Observable using User and Repo model responses

export class GithubService {
  constructor(private http: HttpClient) {}

  getUser(user: string): Observable<User> {
    const userSearchUrl = `${baseUrl + user}`;
    return this.http
      .get<User>(userSearchUrl, { params })
      .pipe(
        take(1),
        catchError((err) => {
        throw "error in getting API data. Details: " + err;
        })
      );
  }

  getRepos(user: string): Observable<Repo> {
    const repoSearchUrl = `${
      baseUrl + user + "/repos?order=updated&sort=desc?per_page=100&page=1"
    }`;

    return this.http
      .get<Repo>(repoSearchUrl, { params })
      .pipe(
        take(1),
        catchError((err) => {
        throw "error in getting API data. Details: " + err;
        })
      );
  }
}

🆒 Features - Backend

• All data stored in PostgreSQL database that can also be viewed and changed from the PostgreSQL shell (psql) or other command prompt

🆒 Features - Frontend

• HTTP data handling best practices followed - i.e. use of separate service file to get API data then use of subscription callback function in component to subscribe to Observable data. Response object type defined using an interface model. Interface passed as type parameter to the HttpClient.get() method. Transformed data passed to async pipe.
• RxJS take) used instead of map() to emit only the first count value emitted by the source Observable. Then it completes - so no need to unsubscribe to avoid memory leaks.
• Angular Activated Route snapshot params used to pass username from github user search page to github repo display page.
• Angular Universal used to generate static pages using Server Side Rendering (SSR) - to increase display speed and add Search Engine Optimisation (SEO). A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
• Progressive Web App (PWA) functionality added
• Node.js compression middleware used to add gzip/deflate compression coding to improve lighthouse audit score.
• headerParams used to add API keys to http request (only NASA does not allow this method)
• Storing array in session storage - clears storage automatically when session is over
• Zain Zafar, Medium: LocalStorage with Angular Universal
• SQLSERVER tutorial INT
• Deploy Angular 9+ apps to Firebase Hosting

📋 Status, Testing & To-Do List

• Status: Deployed to Heroku. Backend working. Build file created with no errors.
• Testing: 7 test files all pass. e2e runs and passes but no specs
• To-Do: New database - Supabase?
• test SSR
• To-Do: Lighthouse: Fix SEO & reduce render time for mobile build version. Fix images: "Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity."
• To-Do: Add purgecss. Add more Jasmine & e2e test files.
• To-Do: Contact page - header titles next to image, replace icons
• To-Do: Fix burger menu drop down and alignment.
• To-Do: Deploy as full-stack

👏 Inspiration/General Tools

• Seth Gwartney, article: Server Side Rendering with Angular Universal
• Vidéo 2 - Ajouter un marker à carte Leaflet affichée par une application Angular 9
• PostgreSQL Quick Command List
• Sitemaps XML format used to create sitemap.xml to improve Lighthouse SEO score to 100%
• Archive converter converts png to jp2 etc
• Deployment to Firebase Hosting with Angular CLI 9 in 5 Easy Steps
• Efficiently load JavaScript with defer and async
• Google Analytics: Add gtag.js to your site
• Lars Bilde: Youtube: Advanced Web Apps 2019 | Unit Testing in Angular | S3P1 | Introduction
• Logrocket: 5 tricks to eliminate render blocking resources
• Cloud Engineering Studio: Yoko Ishioka: Componentize SVGs in Angular and style them on the fly
• Codegrepper: “the keyword import is reserved” Code Answer
• Tech Seeker: Steps To Setup PostgreSQL Database Using ElephantSql Cloud Service

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [e-mail]