wgd3 / full-stack-todo Goto Github PK

View Code? Open in Web Editor NEW

35.0 4.0 7.0 2.12 MB

An example repository showing how to create a full-stack to do application

Home Page: https://thefullstack.engineer/full-stack-development-series-an-introduction/

License: GNU General Public License v3.0

TypeScript 86.76% HTML 5.26% SCSS 4.86% JavaScript 1.63% Shell 0.36% Dockerfile 1.14%

angular full-stack nestjs nx-workspace

full-stack-todo's Introduction

Full Stack To-Do

This repository contains the code base that corresponds to a series of blog posts on full stack development. Check it out here: Full Stack Development Series

Features

Backend - `server`

NestJS 9
REST API with Swagger documentation
JWT authentication support
TypeORM for support of various database varieties

Frontend - `client`

Angular 16
User registration/login
Stateless UI
Storybook integration for component development
Custom Design Library
Modular State Management (toggled via InjectionTokens)

Testing

Jest for backend unit testing, and supertest for integration testing
Jest for Angular unit tests
Cypess + Storybook for UI integration Testing
> 90% code coverage

Other

Kubernetes manifests for cluster deployment
Dockerfiles for standalone and docker-compose support
GitHub Actions used for all testing, building, and releasing
Nx v16 monorepo used for clean directory structure and Nx Cloud for distributed CI tasks

Demo

As part of the Deployment Blog Post I added a small overview on deploying this application stack to Render. Both the UI and the REST API docs can be found here:

Application
Client	https://fst-demo-client.onrender.com/
Server	https://fst-demo-server.onrender.com/api/v1

Note Render's free tier spins down these application after they have idled for a while - it can take up to 30 seconds for the applications to spin back up!

Environment Variables

To run this project, you will need to copy the .env.sample file in the repository root, rename it .env and fill out the values accordingly:

Variable	Description/Values
`DATABASE_TYPE`	Passed to TypeORM, supports most major SQL-based databases
`DATABASE_HOST`	Unneeded if using SQLite, can be used with remote databases or local Docker instances
`DATABASE_PORT`
`DATABASE_USERNAME`
`DATABASE_PASSWORD`
`DATABASE_NAME`
`DATABASE_PATH`	Only used with SQLite for relative file path
`JWT_SECRET`	String used to sign JWTs generated by the API
`JWT_ACCESS_TOKEN_EXPIRES_IN`	Time in seconds that access tokens are valid

Run Locally

Clone the project

  git clone https://github.com/wgd3/full-stack-todo

Go to the project directory

  cd full-stack-todo

Install dependencies

  npm install

Set up environment file

  cp .env.sample .env

Start the server

  npx nx run-many --target=serve --all

Running Tests

To run tests, run the following command

  # for unit tests
  npx nx run-many --target=test --all --codeCoverage

  # for E2E tests
  npx nx run-many --target=e2e --all

full-stack-todo's People

Contributors

Stargazers

Watchers

Forkers

senaiapy hilel angelalexqc tiamat-tech decfolife ukbehera kguclu devmobux

full-stack-todo's Issues

Full Stack Development Series Part 9: User Authentication and JWT Support in Angular

Hello )
I couldn't sign up on https://thefullstack.engineer/ so have decided to post my comment here:

In Storybook 7.0 + the code from Part 9 become failed with next error:

R3InjectorError(Standalone[StorybookWrapperComponent])[UserService -> UserService -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!

The reason is there is no root ngModule anymore. Previously you were able to add ModuleWithProviders, likely the result of a 'Module.forRoot()'-style call, to your 'imports' array of the moduleMetadata definition. This is now discouraged. Instead, you should use the applicationConfig decorator to add your application-wide providers. These providers will be passed to the bootstrapApplication function.

More details https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular-application-providers-and-modulewithproviders

I have added to my feature-register.component.stories

 applicationConfig({
      providers: [importProvidersFrom(HttpClientTestingModule)],
    }),
``` and story has started running correctly

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

docker-compose

docker-compose.yml

swaggerapi/swagger-ui v3.52.5

dockerfile

apps/client/Dockerfile

apps/client/Dockerfile.render

apps/server/Dockerfile

apps/server/Dockerfile.render

docker.io/node 20-alpine

docker.io/node 20-alpine

docker.io/node 20-alpine

github-actions

.github/workflows/ci-main.yml

nrwl/ci v0.13.0

nrwl/ci v0.13.0

actions/checkout v3

actions/download-artifact v3

codecov/codecov-action v3

actions/checkout v3

actions/setup-node v3

.github/workflows/ci-pr.yml

nrwl/ci v0.13.0

nrwl/ci v0.13.0

actions/checkout v3

actions/download-artifact v3

codecov/codecov-action v3

.github/workflows/ci-tags.yml

actions/checkout v3

docker/setup-buildx-action v2

docker/login-action v2

actions/setup-node v3

.github/workflows/link-check.yaml

actions/checkout v3.5.2@8e5e7e5ab8b370d6c329ec480221332ada57f0ab

lycheeverse/lychee-action v1.7.0@97189f2c0a3c8b0cb0e704fd4e878af6e5e2b2c5

micalevisk/last-issue-action v2.1.0@305829d9728f47beb0029417167a0af890edfd6e

peter-evans/create-issue-from-file v4.0.1@433e51abf769039ee20ba1293a088ca19d573b7f

.github/workflows/meta-labeler.yaml

actions/labeler v4.0.3@ba790c862c380240c6d5e7427be5ace9a05c754b

.github/workflows/meta-sync-labels.yaml

actions/checkout v3.5.2@8e5e7e5ab8b370d6c329ec480221332ada57f0ab

EndBug/label-sync v2.3.2@da00f2c11fdb78e4fae44adac2fdd713778ea3e8

npm

package.json

@angular/animations 16.0.1

@angular/common 16.0.1

@angular/compiler 16.0.1

@angular/core 16.0.1

@angular/forms 16.0.1

@angular/platform-browser 16.0.1

@angular/platform-browser-dynamic 16.0.1

@angular/router 16.0.1

@fortawesome/angular-fontawesome ^0.13.0

@fortawesome/fontawesome-free ^6.4.0

@fortawesome/fontawesome-svg-core ^6.4.0

@fortawesome/free-regular-svg-icons ^6.4.0

@fortawesome/free-solid-svg-icons ^6.4.0

@nestjs/common 9.4.3

@nestjs/config 2.3.4

@nestjs/core 9.4.3

@nestjs/jwt ^10.0.3

@nestjs/passport ^9.0.3

@nestjs/platform-express 9.4.3

@nestjs/swagger 6.3.0

@nestjs/terminus 9.2.2

@nestjs/typeorm 9.0.1

@ngneat/edit-in-place ^1.6.1

@ngneat/effects ^2.1.1

@ngneat/effects-hooks ^1.1.0

@ngneat/effects-ng ^3.1.2

@ngneat/elf ^2.3.1

@ngneat/elf-cli-ng ^1.0.0

@ngneat/elf-devtools ^1.2.1

@ngneat/elf-entities ^4.4.4

@ngneat/elf-pagination ^1.1.0

@ngneat/elf-persist-state ^1.1.6

@ngneat/elf-requests ^1.7.0

@ngneat/elf-state-history ^1.3.0

@ngrx/component-store 16.0.0

@ngrx/effects 16.0.0

@ngrx/entity 16.0.0

@ngrx/router-store 16.0.0

@ngrx/store 16.0.0

@ngrx/store-devtools ^16.0.0-rc.1

@nx/angular 16.1.4

axios ^1.0.0

bcrypt ^5.1.0

class-transformer ^0.5.1

class-validator ^0.14.0

joi ^17.8.4

jwt-decode ^3.1.2

mysql2 ^3.1.2

nord ^0.2.1

normalize.css ^8.0.1

passport ^0.6.0

passport-jwt ^4.0.1

pg ^8.10.0

react ^18.2.0

react-dom ^18.2.0

reflect-metadata ^0.1.13

rxjs ~7.8.0

sqlite3 ^5.1.6

tslib ^2.3.1

typeorm ^0.3.15

zone.js 0.13.0

@angular-devkit/build-angular 16.0.1

@angular-devkit/core 16.0.1

@angular-devkit/schematics 16.0.1

@angular-eslint/eslint-plugin 16.0.1

@angular-eslint/eslint-plugin-template 16.0.1

@angular-eslint/template-parser 16.0.1

@angular/cli ~16.0.0

@angular/compiler-cli 16.0.1

@angular/language-service 16.0.1

@commitlint/cli ^17.6.3

@commitlint/config-conventional ^17.6.3

@commitlint/config-nx-scopes ^17.6.4

@commitlint/cz-commitlint ^17.5.0

@commitlint/prompt ^17.6.3

@nestjs/schematics 9.2.0

@nestjs/testing 9.4.3

@ngneat/falso ^6.4.0

@ngrx/eslint-plugin ^16.0.0

@ngrx/schematics 16.0.0

@ngrx/store-devtools ^16.0.0-rc.1

@nx-tools/container-metadata ^4.0.3

@nx-tools/nx-container ^4.0.3

@nx/cypress 16.1.4

@nx/devkit 16.1.4

@nx/eslint-plugin 16.1.4

@nx/jest 16.1.4

@nx/js 16.1.4

@nx/linter 16.1.4

@nx/nest 16.1.4

@nx/node 16.1.4

@nx/storybook 16.1.4

@nx/webpack 16.1.4

@nx/workspace 16.1.4

@schematics/angular 16.0.1

@storybook/addon-actions ^7.0.9

@storybook/addon-essentials 7.4.1

@storybook/angular 7.4.1

@storybook/core-common ^7.0.9

@storybook/core-server 7.4.1

@storybook/test-runner ^0.10.0

@types/bcrypt ^5.0.0

@types/jest 29.5.1

@types/node 18.17.11

@types/passport-jwt ^3.0.8

@types/supertest ^2.0.12

@typescript-eslint/eslint-plugin 5.62.0

@typescript-eslint/parser 5.62.0

commitizen ^4.3.0

commitlint-config-cz ^0.13.3

cypress 12.12.0

cz-conventional-changelog ^3.3.0

cz-customizable ^7.0.0

eslint ~8.40.0

eslint-config-prettier 8.8.0

eslint-plugin-cypress ^2.10.3

eslint-plugin-storybook ^0.6.12

husky ^8.0.0

jasmine-marbles ~0.9.1

jest 29.5.0

jest-environment-jsdom 29.5.0

jest-environment-node 29.5.0

jest-mock ^29.5.0

jest-preset-angular 13.1.0

lint-staged ^13.2.2

nx 16.1.4

nx-cloud 16.0.5

nx-stylelint ^15.0.0

prettier ^2.6.2

semantic-release-npm-github-publish ^1.5.4

semantic-release-plus ^20.0.0

storybook ^7.0.9

stylelint ^15.0.0

stylelint-config-standard ^33.0.0

stylelint-config-standard-scss ^9.0.0

supertest ^6.3.3

ts-jest 29.1.0

ts-node 10.9.1

typescript 5.0.4

nvm

.nvmrc

node 18

Check this box to trigger a request for Renovate to run again on this repository

Broken links detected 🔗

Summary

Status	Count
🔍 Total	201
✅ Successful	200
⏳ Timeouts	1
🔀 Redirected	0
👻 Excluded	0
❓ Unknown	0
🚫 Errors	0

Errors per input

Errors in README.md

[TIMEOUT] https://fst-demo-server.onrender.com/api/v1 | Timeout
Full Github Actions output

Address possible DoS attack using password regex

https://sonarcloud.io/project/security_hotspots?id=wgd3_full-stack-todo&sinceLeakPeriod=true

Question about domain lib

Hello, I stumbled across you great tutorials about nx, nestjs and angular. Great great stuff, thanks a lot.

I was wondering, in the part 2 of your tutorial you create a js lib named domain ? Why did you name it like this ?

Thanks in advance,
Cheers

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.