Skip to content

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

Notifications You must be signed in to change notification settings

techmely/tickup

Repository files navigation

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

image

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)

image

Để 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.

Book Book Book

Framework/Toolings

Application

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 TailwindCssRadix 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

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

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=
  1. 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é.

Qrcode

MIT