Fullstack

This project was generated using Nx.

DB (Postgres)	API (Nestjs)	PWA (angular)

Objectives

Monorepo functionalities

• Angular PWA + Nestjs API, in one repository
• Pre-commit hooks with Husky & Lint-Staged :
  • TSlint Typescript linting
  • Prettier code formatting
  • StyleLint Scss linting (stylelint-config-sass-guidelines)
• one .env file for Pwa & Api, run npm run set-env to update prduction & development environment.ts files
• run all the stack in containers with docker-compose
• code documentation for PWA & API with compodoc

Pwa functionalities

• is a Progressive Web Application (Lighthouse checked)
• follow Material design guidelines, responsive...
• Dynamic color themes :
  • Without DOM usage : Dark/light mode
  • With DOM usage : Many color themes, can be defined on runtime (color picker, api response...)
• User authentication system :
  • sign up, sign in, jwt authentication
  • email confirmation
• User can update his informations
• User can upload his profile avatar (image resized, progressive encoding)
• Internationalization en/fr
• User search bar with pagination, filter, totalCount...

Api functionalities

• Postgres DB connected to Nestjs API, with TypeORM
• switch from Express to Fastify for better performances
• Apollo Graphql implementation
• Graphql <-> Typescript automations :
  • GraphQL Schema generated from Api TypeORM classes
  • Typescript interfaces (generated.ts shared with frontend app) generated from GraphQL Schema
• User authentication system :
  • sign up, sign in, jwt authentication
  • email confirmation
• Basic logs
• Admin, authenticated user roles system
• User can update his informations
• User can upload his profile avatar (image resized, progressive encoding)
• Automatic GraphQL CRUD resolvers according to ORM entities
• Pagination, filter, totalCount in response...

How to test the stack

Dev environment

# install dependencies
npm i
# run Postgres Database in container
npm run db
# run Nest Application Programming Interface
npm run api
# run Angular Progressive Web App
npm run pwa

run API will automatically update 'schema.gql' according to ORM entities & DTO

# update all 'environment.ts' variables according to .env file
npm run set-env
# update Typescript shared interfaces according to schema.gql file
npm run codegen

Prod environment

# install dependencies
npm i
# build all apps in prod mode
npm run release
# run all apps in containers
npm run containers

How to make this monorepo yours

# clone this project and rename it
git clone https://github.com/mIaborde/fullstack your-project-name
# reset git history
rm -rf .git && git init

• Change PUBLIC_ALL_APP_NAME variable in .env file, "name" in package.json, and npmScope nx.json
• adapt .env to your needs and you are good to go