Quotes

Web application that displays a random quote. You can vote on this quote and the top 5 most popular quotes are listed below the quote!

The actual application can be found running at https://quotes-client.now.sh

• Quotes.
  • Prerequisites
  • Installation
  • Features
  • Structure
    • Client
    • API
    • Database
  • Continuous Integration and Deployment

Prerequisites

• Yarn
• Node 12.*

Installation

• Execute yarn install in the root directory
• Then, execute yarn setup in the root directory. This will install dependencies in both the client and server project
• In the sever directory, copy the .env.example to .env and make sure you have both QUOTES_EXTERNAL_API_URL and DATABASE_CERT keys filled.
  • Note that DATABASE_CERT is not in here, because it uses a live firestore. You can add your own or ask me for the certificate
• Finally, execute yarn start:dev to run the client and API at the same time

Features

• Features that have been implemented can be found on the projects page here
• Note that rating and fetching a new quote has been made deliberately slow

Structure

The project consists of three components:

• Client
• API (server)
• Database

Client

• The client is created using Angular 8 and resides in the client folder.

• Bulma CSS is used as CSS framework

• The structure follows the Angular guidelines. Notable examples:

  • Folder-by-features structure
  • Modules inside the feature folder adhere to the flat principle

API

• The API resides in the server folder
• It is created with NestJS
  • If you know Angular, you know NestJS :)
• The architecture used is the vertical slice architecture
  • Every entity (for now only quotes) has their own folder. Inside this folder you find:
    • Use-case folders. Every use-case has a Request/Command, UseCase and Result class. The UseCase class is where all the magic happens
    • Controller (*.controller.ts)
    • Domain model (*.entity.ts)

Database

• The database used is Firestore
• This is a NoSQL database.
• Note that this project could have been build with the client and Firestore alone. However, this would not show my technical skills on the backend as much.

Continuous Integration and Deployment

Quality assurance has been implemented on various stages of the development cycle:

• "TDD" has been used creating new features. TDD here means unit tests have been written on both the front- and backend before any real implementation have been written for business logic.

  • There are some exceptions to above rule
    • I did not write unit tests that also query DOM elements in any way (e.g. with Angular TestBed). The reason for this can be found here
    • I have not written any integration / E2E tests due to time constraints and risk of failure

• Before each push can be done, validation scripts are run on both front- and backend every time

  • Normally this should also been done on the build server, but I've chosen not to because of costs

• When a pull request has been merged to master, Github Actions will pick up a new build and deploy the API and client automatically via Zeit