TickUp: Clean Architecture, Domain-Driven Design, Behavior-driven Development, Next.js 14, Open AI, Sentry, Shadcn, GSap, PlanetScale, Stripe, Playwright

Repo này là kết quả của Series Build Product Fast, nếu bạn không có thời gian để xem videos, hãy Star repo và clone về để dùng cho riêng bạn

Tính năng sẽ làm

• Auth
• Organization/Workspaces
• Xây dựng các landing pages
• AI tự động generate ra các template công việc/hoạt động nhóm...
• Quản lý mục tiêu tổng, danh sách công việc
• Nhóm có thể chat realtime trên Ticket/Issue đang hoạt động
• Sử dụng AI để tạo tự động danh sách công việc hoặc tóm tắt cuộc hội thoại
• Thanh toán tiền + nâng cấp subscriptions
• Tracking user events với UTM

........ Sẽ cập nhật thêm khi có thời gian(hoặc mời bạn contribute)

Công nghệ triển khai

Architecture

Clean Architect + DDD(Domain-driven Design)

Để mà nói học về Clean Architecture, chắc học không hết mất. Nhưng ở project này, ta sẽ bóc tách tất cả module phức tạp theo hướng "Separate of concerns" - chia để trị. Và nó sẽ càng thú vị hơn ta kết hợp với DDD Pattern!

Ta cũng cần phải hiểu rõ Subdomains là gì.

Team gợi ý bạn nên mua sách về đọc để hiểu sâu sắc và để nâng tầm mình lên cao hơn.

Framework/Toolings

Application

• Web: NextJs 14(App router + Server actions)
• Desktop: Tauri
• Mobile: Flutter
• Serverless Database: PlanetScale - MySql, Kysely cho query builder

User Interface and User Experiences

• AI: OpenAI + LLMs LangChain để generate các templates, gợi ý danh sách công việc, tóm tắt văn bản...
• UI: CSS dùng TailwindCss và Radix UI
• Validation: Dùng Valibot để validate forms hoặc các đầu vào input nói chung
• Error Handler: Sentry capture lại các lỗi, và có ErrorBoundary tránh lỗi xảy ra ở Client
• Animation: GSap hoặc AnimateJs
• Payment/Subscriptions: Stripe

CI/CD

• Testing:
  • Unit Test với Vitest
  • e2e với Playwright và Cucumber Gherkin
• Deploy: Vercel Edge
• Runner: Github Actions

Performance

• Tools Web App:

  • MillionJs để làm React nhanh hơn ~80% so với nguyên bản
  • UnLighthouse để auditing, đo performance metrics... ở các pages bạn muốn!
  • Speedscope để trace performances profiles projects khi cần tối ưu sâu

• Tools cho Backend

  • Artillery để chạy load test hoặc seeding dummy data vào môi trường test

...

User Experience Development

• Format/Linting: Biomejs với tốc độ xử lý gần như là nhanh nhất ở thời điểm hiện tại!
• Auto Import: React + Next Component + Folder shared sẽ auto import. Giảm thiểu phần code import
• Áp dụng GitFlow + Semantic Commit
• Spell Checker VsCode Extension để cảnh báo là gõ chữ sai
• CodeRabbit AI để self review code

Hướng dẫn sử dụng project

Trước lúc chạm vào code

I. Đọc thật kỹ phần Architecture Design ở bên trên, tránh lú và khó hiểu.

Nếu đọc xong mà vẫn không hiểu, thì tạo issues hoặc discussion để hỏi nhé các bạn!

II. Tạo tài khoản để dùng và chạy được project

1. Tạo tài khoản CodeRabbit AI
2. Tạo tài khoản OpenAI
3. Tạo tài khoản Github
4. Tạo tài khoản Stripe
5. Tạo tài khoản Clerk
6. Tạo tài khoản Vercel
7. Tạo tài khoản PlanetScale
8. Tạo tài khoản Sentry
9. Tạo tài khoản IpStack

Chạm vào code

1. Install deps với yarn install
2. Đổi .env.example thành .env và thêm các secret keys vào

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=

CLERK_SECRET_KEY=
IP_STACK_KEY=

3. Khởi động app và tận hưởng

yarn dev

License

Tinh thần cho đi là chính nên là FREE to uses, đừng dùng nó để đi lừa đảo, hại người là mình thoải mái!. Nếu bạn muốn ủng hộ team - Hãy donate thông qua tài khoản bank này nhé.

MIT