minhhoang121296/tickup

Supper clone Clickup 3.0, Follow Clean Architecture + DDD with latest Nextjs

Fullstack ClickUp Clone: Next.js 14, Clerk, Sentry, Radix UI Tailwind, 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)

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:

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

...

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

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

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=

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

yarn dev

License

MIT