DenoNext - Fullstack CRUD Application

Aplikasi fullstack CRUD sederhana dengan arsitektur modern menggunakan Next.js untuk frontend dan Hono.js untuk backend dengan Clean Architecture.

🏗️ Arsitektur Project

DENONEXT/
├── apps/
│   ├── frontend/                    # Next.js + TypeScript + shadcn/ui
│   │   ├── app/                     # App Router
│   │   ├── components/              # UI Components
│   │   ├── features/                # Feature-based modules
│   │   └── lib/                     # Utilities
│   │
│   └── backend/                     # Node.js + Hono + Prisma + Clean Arch
│       ├── src/
│       │   ├── domain/              # Business Entities
│       │   ├── application/         # Use Cases
│       │   ├── infrastructure/      # Data Access
│       │   ├── presentation/        # Controllers
│       │   └── shared/              # Utilities
│       ├── api/                     # API Routes
│       ├── prisma/                  # Database Schema & Seeds
│       └── utils/                   # Validators
│
├── packages/
│   └── shared/                      # Shared types & utilities
│
├── .env                             # Environment variables
├── vercel.json                      # Deployment config
└── README.md                        # This file

🎯 Tech Stack

Frontend

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• State Management: React Query (TanStack Query)
• Form Handling: React Hook Form + Zod

Backend

• Framework: Hono.js
• Runtime: Node.js
• Language: TypeScript
• Database: PostgreSQL (Supabase)
• ORM: Prisma
• Validation: Zod
• Architecture: Clean Architecture

Database

• Provider: Supabase (PostgreSQL)
• ORM: Prisma
• Migrations: Prisma Migrate

Deployment

• Platform: Vercel
• Database: Supabase

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm atau yarn
• Supabase account

1. Clone & Install

git clone <repository-url>
cd DenoNext

# Install backend dependencies
cd apps/backend
npm install

# Install frontend dependencies (when ready)
cd ../frontend
npm install

2. Environment Setup

File .env sudah tersedia dengan konfigurasi Supabase:

# Database
DATABASE_URL=postgresql://postgres.tycvfsxavggglwlmapez:Fullbuster157Rust@aws-0-ap-southeast-1.pooler.supabase.com:6543/postgres

# Backend Config
APP_ENV=development
APP_PORT=8000
APP_VERSION=1.0.0
CORS_ORIGIN=http://localhost:3000
LOG_LEVEL=info

3. Database Setup

cd apps/backend

# Generate Prisma client
npm run db:generate

# Run migrations
npm run db:migrate

# Seed database
npm run db:seed

4. Start Development

Backend:

cd apps/backend
npm run dev

Server akan berjalan di http://localhost:8000

Frontend (coming soon):

cd apps/frontend
npm run dev

App akan berjalan di http://localhost:3000

📚 API Documentation

Backend API sudah siap dengan endpoints berikut:

Base URL

http://localhost:8000

Endpoints

• GET / - Health check
• GET /api/users - Get semua users
• GET /api/users/:id - Get user by ID
• POST /api/users - Create user baru
• PUT /api/users/:id - Update user
• DELETE /api/users/:id - Delete user
• GET /api/users/count - Get jumlah users

Example Request

# Create user
curl -X POST http://localhost:8000/api/users \
  -H "Content-Type: application/json" \
  -d '{
    "email": "john@example.com",
    "name": "John Doe"
  }'

Example Response

{
  "success": true,
  "message": "User created successfully",
  "data": {
    "id": "clx1234567890",
    "email": "john@example.com",
    "name": "John Doe",
    "createdAt": "2024-01-01T12:00:00.000Z",
    "updatedAt": "2024-01-01T12:00:00.000Z"
  },
  "timestamp": "2024-01-01T12:00:00.000Z"
}

🏛️ Clean Architecture

Backend menggunakan Clean Architecture dengan separation of concerns:

📁 domain/      # Business logic & entities
📁 application/ # Use cases & business rules  
📁 infrastructure/ # Data access & external services
📁 presentation/   # Controllers & HTTP handlers
📁 shared/         # Common utilities

Benefits:

• ✅ Maintainable - Easy to modify and extend
• ✅ Testable - Each layer can be tested independently
• ✅ Scalable - Clean separation allows easy scaling
• ✅ Readable - Clear structure and naming conventions
• ✅ Reusable - Components can be reused across projects

🛠️ Development Scripts

Backend

cd apps/backend

# Development
npm run dev          # Start dengan hot reload
npm run build        # Build production
npm start           # Start production server

# Database
npm run db:generate  # Generate Prisma client
npm run db:migrate   # Run migrations
npm run db:seed      # Seed database
npm run db:studio    # Open Prisma Studio

# Code Quality
npm run type-check   # TypeScript checking
npm run lint         # ESLint
npm run format       # Prettier

Frontend (Coming Soon)

cd apps/frontend

npm run dev          # Development server
npm run build        # Build production
npm run start        # Start production
npm run lint         # ESLint
npm run type-check   # TypeScript checking

🗄️ Database Schema

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("users")
}

🎨 UI Components (Planned)

Frontend akan menggunakan shadcn/ui components:

• Button, Input, Card
• Form, Dialog, Toast
• Table, Pagination
• Loading states
• Error boundaries

🔄 Development Workflow

1. Backend Development ✅

   • Setup Hono.js server
   • Implement Clean Architecture
   • Create CRUD APIs
   • Add validation & error handling
   • Database integration

2. Frontend Development 🚧 (Next Phase)

   • Setup Next.js project
   • Create UI components
   • Implement API integration
   • Add form handling
   • State management

3. Integration & Deployment 📋 (Future)

   • Connect frontend to backend
   • Add authentication
   • Deploy to Vercel
   • CI/CD pipeline

🚀 Deployment

Vercel Deployment

# Deploy backend
cd apps/backend
vercel --prod

# Deploy frontend (when ready)
cd apps/frontend
vercel --prod

Environment Variables (Vercel)

Configure di Vercel dashboard:

• DATABASE_URL
• APP_ENV=production
• CORS_ORIGIN=https://your-frontend-domain.vercel.app

📋 Roadmap

Phase 1: Backend ✅

• Project structure setup
• Hono.js server configuration
• Clean Architecture implementation
• Prisma ORM integration
• CRUD API endpoints
• Request validation
• Error handling
• Database seeding

Phase 2: Frontend 🚧

• Next.js project setup
• shadcn/ui components
• API integration
• User management UI
• Form handling
• State management

Phase 3: Advanced Features 📋

• Authentication & Authorization
• File upload
• Pagination & Search
• Real-time updates
• Testing suite
• Performance optimization

🧪 Testing

Backend Testing

cd apps/backend

# Unit tests
npm run test

# Integration tests
npm run test:integration

# E2E tests
npm run test:e2e

Frontend Testing (Planned)

cd apps/frontend

# Unit tests
npm run test

# E2E tests
npm run test:e2e

🔧 Troubleshooting

Common Issues

1. Database Connection Error

   • Check DATABASE_URL in .env
   • Verify Supabase connection
   • Run npm run db:generate

2. Port Already in Use

   # Kill process on port
   lsof -ti:8000 | xargs kill -9

3. TypeScript Errors

   # Reinstall dependencies
   rm -rf node_modules
   npm install

📖 Documentation

• Backend README - Detailed backend documentation
• Frontend README - Frontend documentation (coming soon)

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Your Name

• GitHub: @yourusername
• Email: your.email@example.com

---

Happy Coding! 🚀

Note: Frontend development akan dimulai setelah backend selesai. Backend sudah siap dan fully functional dengan Clean Architecture.