andrei-alex / task-manager

Fullstack Project with Next.js and Nest.js" leverages the powerful capabilities of both Next.js and Nest.js. This project aims to create a dynamic, efficient, and user-friendly Kanban board application.

Kanban

FullStack

Task manager practice project.
Explore the repo »

Front-end · Storybook · Swagger

Table of Contents

1. About The Project
2. Getting Started
3. Built With
4. License
5. Contact

About The Project

This TypeScript project is a Next.js and Node.js journey. Through the creation of a minimalist to-do application, I am delving into unit testing, library integration, and the core principles of KISS (Keep It Simple, Stupid), DRY (Don't Repeat Yourself), and TDD (Test-Driven Development). The project centers around code optimization and refactoring, offering an immersive learning experience in the world of modern programming practices.

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

• Git

  git clone 

• NPM <= 16.x

  yarn
  

• Setup env file

• Docker

  docker-compose up

Commands

• Run dev

  npx lerna run dev

• Storybooks

  lerna run storybook

Built With

Project Tech :

• Lerna Nx as monorepo framework
• GitHub Actions
• Docker

Front-End Tech :

• React.Js, Next.Js as main JS library and framework.
• SASS styling languages.
• Storybook as component library.
• Jest for testing
• Redux for state management.
• Mantine UI components

Back-End Tech :

• Nest as main JS library and framework.
• Postgres as database
• Swagger for documentation.
• Jest for testing

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Andrei Alexandru - @Linkedin - [email protected]

Project Link: Andrei-Alex

(back to project)

task-manager's Issues

Protected routes

Goal: learn how to implement authorization on FE side

Acceptance criteria:

• Iimplement protected routes
• All routes except /login and /register should be protected and if user is not logged in, he should be redirected to the login form

GET /boards/:id

Goal: Learn how to fetch relations within one endpoint and setup default values

Acceptance criteria:

• Create an endpoint that will return a single Board
• an endpoint should return an entity, only if the current user is the owner or member of the board, otherwise return 403 error and 404 if the entity is not found
• endpoint should expand board entity to:

{ id: ID name: string members: [string] columns: [{ id: ID name: string order: number }] }

• columns should demonstrate different states on the board.
• update the boards creation endpoint to have by default 3 columns:

[{ name: "Todo" order: 0 }, { name: "In progress" order: 1 },{ name: "Done" order: 2 }]

Reverse proxy

Reverse proxy for frontend

Goal: learn how to set up a reverse proxy in order to make API calls to the same host as frontend

Configure API request rewrites according to this guide [NextJS rewrites].

Acceptance criteria:

• Create HTTP request to /health endpoint and display health status in the frontend app (follow these guides NextJS dynamic API routes, NextJS response helpers
• Ensure returned status code: 200
• Make a call to the same host as frontend hosts with /api prefix

Setup

Setup project

Goal: with this task, we need to set up a project for general frontend & backend usage, get familiar with Next.js, Nest.js.

Acceptance criteria

• install a monorepo
  • setup NextJS in applications folder
  • setup API service with [NestJS](https://nestjs.com/) in applications folder

Create GET /users endpoint

Goal: learn how to filter data, work with indexes

Acceptance criteria

• create supplement endpoint GET /users to display the list of available users
• Endpoint should return a list of objects with id and fullname of users
• Endpoint should support search query param to filter users by the fullname
• create an index on DB for fullname field. Read [guide on how indexes reflect search in DB
• an endpoint should return entities, only if the current user is authenticated, otherwise return 401 error

`/auth/register` endpoint

Goal: learn how to store passwords in the database.

Acceptance criteria:

• Implement POST /auth/register endpoint
• Client should send following schema to register the user

{ email: string, password: string, fullName: string }

• Endpoint should validate incoming data structure with class validator
• Salt should be used for password storage
• Add new migration to create necessary fields in user table
• Config Swagger
• Services and Controller should have unit and e2e tests

Implement board display

Goal: learn how to integrate third-party library

Acceptance criteria

• Use react-trello to display dashboard
• add it to route /boards/:boardId
• map data fetched to be consumable by react-trello library
• just display the data within the dashboard

/auth/login endpoint

Goal: Learn how to make auth implementation on the backend side

Acceptance criteria:

• Implement user & password authentication with /auth/login following the guide
• Seed database with a pre-generated user to check implementation
• JWT token should be issued to the user, follow the guide for instructions
• Make e2e test to cover login functionality.
• Auth guard to ensure only authenticated users can reach the endpoint.
• Guard should return 401 status code if a user is not authenticated and '400' in case of a bad request (login OR password not provided)

CI Checks

The goal of the tasks is to learn how to setup a basic CI pipeline

Acceptance criteria

• Setup code listing rules with EsLint

  • setup npm command lint for frontend
  • setup npm command lint for the backend
  • setup common lint command in root package.json

• Setup basic pipeline in GitHub

• Configure jobs lint-frontend and lint-backed in the YML file to run the lint command:

  • run lint-backend only if changes appear in the backend folder
  • run lint-frontend only if changes appear in the frontend folder

Create page /board/:boardId

Goal: learn how to fetch data from BE with hooks, implement preloaders

Acceptance criteria

• Create protected route /boards/:boardId
• boardId should be parametrized
• fetch from backend data with help of /api/boards/:boardId endpoint.
  • if the backend responds with 404 - show a message that the board is not found
  • if the backend responds with 403 - show a message that the user does not have access to the board
  • if the backend responds with 200 - temporarily show plain JSON data
• Implement loader with React.Suspense
• write unit tests for the component using HTTP mocks and cover all possible HTTP statuses with mocks

Setup database

Goal: setup connection to the database and ORM.

Acceptance criteria:

• Setup docker compose file with this guide
• Setup a second DB for testing
• Setup connection from NestJS to PostgreSQL with help of TypeORM using guide
• Add DB health status to /health endpoint with Terminus
• Setup first migration with table user which contains id and full_name fields
• Setup database in CI/CD to be able run e2e tests in CI

Init Swagger

Goal: Learn to use Swagger [(https://docs.nestjs.com/openapi/introduction)]

Acceptance criteria :

Init and run Swagger

Setup Routing

Goal: learn how to make routing in the application.

Acceptance criteria:

• Use Next Router to create routes:
  • / default redirect to /home
  • /home
  • /login
  • /register
• Show components with page names and title
• Create unit tests for router to ensure that proper component is rendered under routes.
• add frontend-unit-test job in gitlab-ci.yml 

Registration form

Goal: learn how to work with forms and client-server communication

Acceptance criteria:

• Create a form under /register route
• Form should contain 3 fields:
  • email
  • password
  • full name
  • submit button
• use React-Hook-Form to validate an email and full name (length 2-25 chars) and ensure all the fields are filled and valid
• after the form is submitted, make a request hook to /api/auth/register endpoint,
• Show error message if backend responds with 40X or 50X
• Redirect to /login if a login has been successful
• Add the link to register in Login form.

PUT /boards/:id

Goal: learn how to update DB entries

Acceptance criteria

• create PUT /boards/:id endpoint
• endpoint should take the full entity of the board and update it in the database
• endpoint should have JSON schema validation
• when columns are submitted, the endpoint should update columns order in DB
• an endpoint should return an entity, only if the current user is the owner or member of the board, otherwise return 403 error and 404 if the entity is not found

Login form

Goal: learn how to work with forms and client-server communication

Acceptance criteria:

• Create a form under /login route
• Form should contain 2 fields:
  • email
  • password
  • submit button
• use React-Hook-Form and Yup to validate email and ensure all the fields are filled and valid
• after the form is submitted, make a request to /api/auth/login endpoint.
• use LocalStorage to store the JWT token
• Show error message if backend responds with 40X or 50X
• Redirect to /home if a login has been successful

Add SASS support for the project

Goal: learn how to work with SASS preprocessor.

Add SASS support for the project.

Acceptance criteria:

1. SASS package is added to the project NextJS built-in CSS support).
2. SASS loader is configured NextJS built-in CSS support.

Create Storybooks Lib

Goal: Learn to deploy to https://www.chromatic.com/

Acceptance criteria :

• Create presentation and colors atoms
• Deploy to chromatic

Setup security headers for API

Goal: Learn how to implement security headers in nodejs

Acceptance criteria

• use helmet to setup headers
• allow CORS headers for localhost:3000 and localhost:3001
• set x-frame-options header to prevent clickjacking

GET /boards

Goal: Learn how to filter out entities based on user permissions

Acceptance criteria:s

• Create GET /boards endpoint, which returns the list of created boards.
• This endpoint should return the boards entity only if:
  • user is the creator of the board
  • OR user is a member of the board

Health Check endpoint

Goal: setup basic heal endpoint

Acceptance criteria:

• Follow the guide to create /health endpoint with basic response:
  • Returned status code: 200
  • Returned json payload: { status: 200, healthStatus: "OK"}
  • add e2e test to ensure proper response from endpoint
  • add backend-e2e-test job in gitlab-ci.yml

Setup StoryBook

Setup Nx - StoryBook for React

POST `/boards` endpoint

Goal: learn how handle relations with TypeORM

Acceptance criteria:

• Create endpoint POST /boards with the following schema:

{ id: ID name: string members: [string] }

• Endpoint should be protected by authorization
• Create all necessary migrations to store the data
• In the database, we should track the creator (owner) and creation time
• Endpoint should validate incoming data structure with class validator
• Members should be stored in a table that maps BoardId to UserId. Read TypeORM guide for reference