zenfection / project-management

Building a task assignment website for College of Information and Communication Technology

Task Management CTU by Zen

Frontend (Angular 17)

1. Technology used

Technology	Description	Version	Source
	Tool for managing large projects in a monorepo structure, offering features like code organization, code sharing, and architectural consistency.	17.1.1	Nx Monorepo
	A comprehensive UI component library developed by the Angular team, offering a wide range of pre-built and customizable components following the Material Design guidelines.	17.0.0	Angular Material
	A powerful state management library for Angular applications, based on the Redux pattern, enabling predictable and scalable state management.	16.3.0	NgRX
	A localization library for Angular applications, simplifying the implementation of internationalization (i18n) with features like translation management and dynamic loading of language files.	6.0.0	Transloco
	A versatile and powerful animation design tool that allows developers and designers to create interactive and captivating animations.	2.7.3	Rive Animation
	Javascript Charting library that enables developers to create interactive and visually appealing charts and graphs for data visualization	3.44.0	apexcharts
	Library Rich Editor is a flexible and user-friendly WYSIWYG text editor designed.	1.3.7	quill rich editor
	A lightweight JavaScript library for adding sleek and customizable scrollbars to web applications.	1.5.5	perfect scrollbar
	Providing powerful tools for handling asynchronous operations, managing data streams, and simplifying complex workflows	7.8.1	Rxjs
	Utility-first CSS framework that allows developers to rapidly build modern and responsive web interfaces	3.3.3	tailwindCSS
	A highly configurable JavaScript linter that identifies and reports coding errors, stylistic issues, and problematic patterns in code, helping developers maintain code quality and adhere to coding standards.	8.53.0	EsLint
	A code formatting tool that enforces consistent code styles across projects, improving code readability and maintainability.	3.0.3	Prettier
	A robust end-to-end testing framework for web applications, offering fast and reliable testing capabilities with user interaction simulation, real-time reloading, and debugging features.	13.5.0	Cypress

2. Changelog Optimize Code

3. Demo

Backend (NestJS 10)

1. Roadmap Evolution

Status	Task	Commit	Source
✅	Use SWC compiler	#31b37b7	SWC
✅	Register OpenAPI Swagger	#5ac0ab6	Swagger
✅	Init Docker Container with postgreSQL and Redis Database	#520bd26	Docker  postgreSQL Redis
✅	Create Compodoc Documentation	#5905606	Compodoc
✅	Intergate PrismaORM with nestjs-prisma	#3deacad	Prisma
✅	Create Hashing Password Service	#1dac614	bcrypt
✅	Setup Authentication SignIn / SignUp by  JWT includes: access-token and refreshtoken	#78f749a	jwt
✅	Implement Guard for all authentication method	#65d1c61	passport
✅	Intergrate Redis to save refresh-token instead of client-cookie	#d101d84	ioredis
✅	Use cookie express store token via Redis	#d060876	express-session connect-redis
✅	Add 2FA Authentication Method	#cb7d0c7	otplib qrcode
	Add Google Authentication Method
✅	Build Roles Authorization with Decorator and Guard	#4ea237a
✅	Build Cloud Storage with Cloudflare R2 and Rate Limiting	#24a599b	CloudFlare R2 throtter
✅	Intergated Nx Monorepo	#1b64fab	Nx Monorepo
	Build SMTP Mailer

2. Changelog Optimize Code

• Build UserService with Prisma Serivce without DTO and Entity #d57cf4e, #f813be6
• Improve database and build seed data #4929b8b
• Add upload avatar method for users #8034221

3. Note

Database

.env

# postgreSQL with Docker
POSTGRES_USER=<YOUR USER>
POSTGRES_PASSWORD=<YOUR PASSWORD>
POSTGRES_DB=<YOUR DATABASE>

# Redis with Docker
REDIS_URL=redis://localhost:6379

# Prisma
DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}?schema=public

# JWT TOKEN
JWT_SECRET=secret
JWT_AUDIENCE=localhost:3000
JWT_ISSUER=localhost:3000
JWT_ACESSS_TOKEN_TTL=3600
JWT_REFRESH_TOKEN_TTL=86400

# SESSION
SESSION_SECRET=<YOUR SECRET>

# TFA SECRET
TFA_APP_NAME=<YOUR TFA NAME>


# Cloudflare R2
ACCOUNT_ID=<YOUR ACCOUNT ID>
ACCESS_KEY_ID=<YOUR ACCESS ID>
SECRET_ACCESS_KEY=<YOUR SECRET ACCESS KEY>
BUCKET_NAME=<YOUR NAME BUCKET>

# Rate Limit
UPLOAD_RATE_TTL=60
UPLOAD_RATE_LIMIT=10