Tạo dự án mới

Hướng dẫn này sẽ chỉ bạn cách sử dụng Galaxy CLI để tạo một dự án Next.js e-commerce hoàn chỉnh.

Tổng quan

Trong ví dụ này, chúng ta sẽ tạo một ứng dụng e-commerce với:

• Product catalog
• Shopping cart
• Checkout với Stripe
• User authentication
• Admin dashboard

Bước 1: Khởi động Galaxy CLI

1. Mở terminal và cd vào thư mục làm việc

   cd ~/projects

2. Khởi động Galaxy CLI

   cd /path/to/galaxy-cli
   bun run start --test --review

   Mẹo

   Sử dụng flags --test và --review để enable test generation và code review.

3. Chờ Galaxy CLI khởi động

   Bạn sẽ thấy banner:

      ____       _                    ____ _     ___
     / ___| __ _| | __ ___  ___   _  / ___| |   |_ _|
    | |  _ / _` | |/ _` \ \/ / | | || |   | |    | |
    | |_| | (_| | | (_| |>  <| |_| || |___| |___ | |
     \____|\__,_|_|\__,_/_/\_\\__, | \____|_____|___|
                              |___/
   
   Version: 2.0.0
   Agent=auto Git=OFF Test=ON Review=ON
   
   > _

Bước 2: Yêu cầu tạo dự án

Nhập yêu cầu chi tiết:

> Tạo app Next.js e-commerce với những tính năng sau:
- Product catalog với search, filter và pagination
- Shopping cart với local storage
- Checkout integration với Stripe
- User authentication với JWT
- Admin dashboard để quản lý products

Tech stack mong muốn:
- Next.js 14 với App Router
- TypeScript
- Tailwind CSS
- Prisma + PostgreSQL
- NextAuth.js

Mẹo

Càng chi tiết càng tốt! Mô tả rõ features, tech stack, và requirements.

Bước 3: Galaxy phân tích yêu cầu

Galaxy sẽ gọi BA Analyzer để phân tích:

🔄 Đang phân tích yêu cầu...

⚡ ba_it_analyze
↳ Analyzing project requirements...

Sau khoảng 10-15 giây, Galaxy sẽ hiển thị phân tích:

📊 Phân tích dự án: Next.js E-commerce Platform

💡 Mô tả:
Ứng dụng thương mại điện tử full-stack được xây dựng với Next.js 14,
tích hợp Stripe payments và admin dashboard.

✨ Tính năng chính:

1. Product Catalog (must-have)
   - Hiển thị products với images, prices, descriptions
   - Search functionality với debouncing
   - Advanced filters (category, price range, ratings)
   - Pagination với infinite scroll

2. Shopping Cart (must-have)
   - Add/remove items
   - Quantity management
   - Persist cart data với localStorage
   - Cart summary với total calculation

3. Stripe Checkout (must-have)
   - Stripe payment integration
   - Secure checkout flow
   - Order confirmation
   - Payment webhooks handling

4. User Authentication (must-have)
   - Sign up / Sign in
   - JWT token management
   - Protected routes
   - User profile management

5. Admin Dashboard (should-have)
   - Product CRUD operations
   - Order management
   - Analytics dashboard
   - User management

📦 Tech Stack:
- Frontend: Next.js 14 (App Router), TypeScript, Tailwind CSS
- Backend: Next.js API Routes, Prisma ORM
- Database: PostgreSQL
- Auth: NextAuth.js với JWT strategy
- Payments: Stripe
- Deployment: Vercel (recommended)

📊 Data Models:
- User: id, email, password, name, role, createdAt
- Product: id, name, description, price, image, category, stock
- Order: id, userId, total, status, items[], createdAt
- Cart: userId, items[], updatedAt

🔗 API Endpoints:
- GET /api/products - List products
- GET /api/products/[id] - Product details
- POST /api/cart - Add to cart
- POST /api/checkout - Create order
- POST /api/auth/signin - Sign in
- POST /api/auth/signup - Sign up

⏱️ Thời gian ước tính: Long (8-12 hours)

💡 Đề xuất:
1. Sử dụng SWR hoặc React Query cho data fetching
2. Implement image optimization với next/image
3. Add Redis caching cho product queries
4. Setup environment variables cho Stripe keys

❓ Câu hỏi:
1. Bạn có muốn thêm wishlist feature?
2. Cần multi-currency support?
3. Shipping calculation logic?

Bạn đồng ý với phương án này?
(Type 'yes' để tiếp tục hoặc điều chỉnh requirements)

Bước 4: Xác nhận kế hoạch

> yes, làm đi

Hoặc nếu muốn điều chỉnh:

> Thêm wishlist feature và multi-currency với USD và VND

Galaxy sẽ cập nhật phân tích và hỏi lại xác nhận.

Bước 5: Planning

Sau khi xác nhận, Galaxy gọi Planning Agent:

📋 Đang tạo execution plan...

⚡ plan_task
↳ Creating feature-driven plan...

Galaxy hiển thị plan với todos:

📋 Implementation Plan (long):

Tổng quan: Build Next.js e-commerce với 5 core features.
Thời gian ước tính: 8-12 hours

☐ Step 1: Initialize Next.js project
      Tool: command_run
      Reasoning: Setup Next.js 14 with TypeScript and App Router

☐ Step 2: Install dependencies
      Tool: install_dependencies
      Reasoning: Install required packages (Prisma, Tailwind, NextAuth, Stripe)

☐ Step 3: Setup database and Prisma
      Tool: code_generate
      Reasoning: Configure PostgreSQL connection and define Prisma schema

☐ Step 4: Implement Product Catalog
      Tool: code_generate
      Feature: Product Catalog (must-have)
      Reasoning: Core feature - Product listing với search & filters

☐ Step 5: Implement Shopping Cart
      Tool: code_generate
      Feature: Shopping Cart (must-have)
      Reasoning: Cart management với localStorage persistence

☐ Step 6: Implement Stripe Checkout
      Tool: code_generate
      Feature: Stripe Checkout (must-have)
      Reasoning: Payment integration với webhooks

☐ Step 7: Implement User Authentication
      Tool: code_generate
      Feature: User Authentication (must-have)
      Reasoning: Auth system với NextAuth.js và JWT

☐ Step 8: Implement Admin Dashboard
      Tool: code_generate
      Feature: Admin Dashboard (should-have)
      Reasoning: Admin panel để quản lý products và orders

☐ Step 9: Write unit tests
      Tool: test_generate
      Reasoning: Test coverage cho core features (enabled via --test)

☐ Step 10: Code review & refactoring
      Tool: code_review
      Reasoning: Final review và optimize code (enabled via --review)

Bắt đầu thực thi? (yes/no)

Ghi chú

Steps 9 và 10 chỉ xuất hiện vì bạn enable --test và --review flags.

Bước 6: Tự động thực thi

> yes

Galaxy bắt đầu thực thi từng bước:

Step 1: Initialize Next.js

⚙ Step 1: Initialize Next.js project - In progress...

⚡ EXECUTE (npx create-next-app@latest my-ecommerce...)
↳ ✓ Success. Output: 15 lines.

☒ Step 1: Initialize Next.js project - Completed

Step 2: Install dependencies

⚙ Step 2: Install dependencies - In progress...

⚡ EXECUTE (npm install prisma @prisma/client...)
↳ ✓ Success. Output: 42 lines.

☒ Step 2: Install dependencies - Installed

Step 3: Setup database

⚙ Step 3: Setup database and Prisma - In progress...

📝 APPLY PATCH (prisma/schema.prisma)
↳ Succeeded. File created. (+45 added)

   1  + datasource db {
   2  +   provider = "postgresql"
   3  +   url      = env("DATABASE_URL")
   4  + }
   5  +
   6  + model User {
   7  +   id        String   @id @default(cuid())
   8  +   email     String   @unique
   ...
  45  + }

📝 APPLY PATCH (.env.local)
↳ Succeeded. File created. (+3 added)

☒ Step 3: Setup database and Prisma - Completed
   Created 2 files: schema.prisma, .env.local

Step 4-8: Implement Features

Mỗi feature sẽ được implement bởi Code Generate Agent:

⚙ Step 4: Implement Product Catalog - In progress...

🤖 Code Generate Agent executing...
   Feature: Product Catalog
   Priority: must-have

📝 APPLY PATCH (app/products/page.tsx)
↳ Succeeded. File created. (+127 added)

📝 APPLY PATCH (components/ProductCard.tsx)
↳ Succeeded. File created. (+45 added)

📝 APPLY PATCH (lib/api/products.ts)
↳ Succeeded. File created. (+38 added)

📝 APPLY PATCH (app/api/products/route.ts)
↳ Succeeded. File created. (+62 added)

☒ Step 4: Implement Product Catalog - Completed
   Created 4 files: page.tsx, ProductCard.tsx, products.ts, route.ts

Product Catalog

• app/products/page.tsx - Product listing page
• components/ProductCard.tsx - Product card component
• components/ProductFilters.tsx - Filter sidebar
• lib/api/products.ts - API client
• app/api/products/route.ts - API endpoint

Shopping Cart

• app/cart/page.tsx - Cart page
• components/Cart.tsx - Cart component
• hooks/useCart.ts - Cart hook với localStorage
• lib/cart.ts - Cart utilities

Checkout

• app/checkout/page.tsx - Checkout page
• lib/stripe.ts - Stripe client
• app/api/checkout/route.ts - Create payment intent
• app/api/webhooks/stripe/route.ts - Webhook handler

Step 9: Tests (if enabled)

⚙ Step 9: Write unit tests - In progress...

📝 APPLY PATCH (__tests__/ProductCard.test.tsx)
📝 APPLY PATCH (__tests__/Cart.test.tsx)
📝 APPLY PATCH (__tests__/api/products.test.ts)

⚡ EXECUTE (npm test)
↳ ✓ Success. All tests passed.

☒ Step 9: Write unit tests - Completed

Step 10: Review (if enabled)

⚙ Step 10: Code review & refactoring - In progress...

🔍 Reviewing code...
✅ Code quality: Good
💡 Suggestions:
   - Extract repeated validation logic
   - Add error boundaries for Suspense
   - Optimize images với next/image

☒ Step 10: Code review & refactoring - Completed

Bước 7: Hoàn thành

✅ All steps completed!

📊 Summary:
- Created 42 files
- 12 React components
- 8 API endpoints
- 15 unit tests
- Database schema with 4 models

🚀 Next steps:
1. Setup PostgreSQL database
2. Run: npm run db:push
3. Add Stripe keys to .env.local
4. Run: npm run dev
5. Visit: http://localhost:3000

📄 Progress saved: /path/to/project/.galaxy/progress.json

Kiểm tra kết quả

1. Xem cấu trúc project

   > /pwd
   ⚙ Working directory: ~/projects/my-ecommerce

   cd ~/projects/my-ecommerce
   tree -L 2

2. Setup database

   # Tạo PostgreSQL database
   createdb my_ecommerce
   
   # Update .env.local với connection string
   DATABASE_URL="postgresql://user:pass@localhost:5432/my_ecommerce"
   
   # Push schema
   npx prisma db push

3. Thêm Stripe keys

   # Trong .env.local
   STRIPE_SECRET_KEY=sk_test_...
   STRIPE_PUBLISHABLE_KEY=pk_test_...
   STRIPE_WEBHOOK_SECRET=whsec_...

4. Chạy development server

   npm run dev

5. Test ứng dụng

   • Mở http://localhost:3000
   • Browse products
   • Add to cart
   • Complete checkout
   • Test admin dashboard

Tips & Tricks

Incremental Development

Bạn có thể yêu cầu Galaxy implement từng phần nếu không muốn làm hết một lúc:

> Chỉ implement Product Catalog và Shopping Cart trước

Modify Features

Sau khi Galaxy tạo plan, bạn có thể yêu cầu điều chỉnh:

> Thay Product Catalog bằng Product Grid với infinite scroll

Review Generated Code

Luôn review code được generate. Galaxy cố gắng tạo production-ready code nhưng có thể cần fine-tuning.

Troubleshooting

Lỗi: Database connection failed

# Kiểm tra PostgreSQL đang chạy
brew services start postgresql

# Test connection
psql -U postgres -h localhost

Lỗi: Stripe webhook failed

# Sử dụng Stripe CLI để test webhooks locally
stripe listen --forward-to localhost:3000/api/webhooks/stripe

Lỗi: Build failed

# Clear cache và rebuild
rm -rf .next
npm run build

Các bước tiếp theo

• Add Feature Example - Học cách thêm feature mới
• Architecture - Hiểu cách Galaxy hoạt động
• Tools Reference - Tìm hiểu về các tools có sẵn