hackv2 adalah platform pembelajaran coding berbasis AI yang memungkinkan pengguna untuk belajar pemrograman melalui tantangan interaktif, chat dengan AI, dan eksekusi kode langsung di browser.
- Real-time AI Chat: Chat streaming dengan AI menggunakan OpenRouter untuk respons cepat
- Multi-language Support: JavaScript, Python, C++ dengan syntax highlighting
- Mode AI: Save (hemat credit), Decent (default), High (respons berkualitas tinggi)
- Monaco Editor: Code editor berkualitas tinggi dengan fitur autocomplete dan syntax highlighting
- Live Code Execution: Eksekusi kode langsung menggunakan Piston API atau WebContainer
- Terminal Integration: Terminal terintegrasi dengan xterm.js
- Discover Page: Jelajahi tantangan coding dari berbagai kategori
- Progress Tracking: Lacak kemajuan belajar dengan skor dan status penyelesaian
- Difficulty Levels: Easy, Medium, Hard
- Hidden Test Cases: Test case tersembunyi untuk evaluasi objektif
- Free Tier: 25 credit harian untuk pengguna gratis
- Pro Plans: Weekly (Rp 49.000) dan Monthly (Rp 99.000)
- Credit Purchase: Beli credit tambahan kapan saja
- Xendit Payment: Integrasi pembayaran lokal Indonesia
- Share Sessions: Bagikan sesi coding dengan link unik
- Fork Challenges: Fork dan modifikasi tantangan dari pengguna lain
- User Profiles: Profil pengguna dengan bio dan poin
| Technology | Version | Description |
|---|---|---|
| Next.js | 16.1.4 | React framework dengan App Router |
| React | 19.2.3 | UI library |
| TypeScript | 5.x | Type-safe JavaScript |
| Tailwind CSS | 4.x | Utility-first CSS framework |
| Radix UI | Latest | Accessible UI primitives |
| Monaco Editor | 4.7.0 | VS Code editor untuk browser |
| xterm.js | 5.3.0 | Terminal emulator |
| Recharts | 2.15.4 | Chart library untuk analytics |
| Zustand | 5.0.10 | State management |
| Technology | Version | Description |
|---|---|---|
| tRPC | 11.8.1 | End-to-end typesafe API |
| Prisma | 7.2.0 | Database ORM |
| PostgreSQL | - | Database utama |
| Better Auth | 1.4.16 | Authentication library |
| Zod | 4.3.5 | Schema validation |
| Service | Purpose |
|---|---|
| OpenRouter | AI model gateway (GPT, Claude, etc.) |
| Piston API | Code execution engine |
| WebContainer | Browser-based sandbox |
| Supabase | PostgreSQL hosting & storage |
| Xendit | Payment processing |
| Google OAuth | Social login |
hackv2/
├── prisma/
│ └── schema.prisma # Database schema
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (public)/ # Public routes (landing, login, pricing)
│ │ ├── api/ # API routes
│ │ ├── chat/[id]/ # Chat room pages
│ │ ├── dashboard/ # User dashboard & admin
│ │ └── share/ # Shared session pages
│ ├── components/ # React components
│ │ ├── ui/ # Reusable UI components (shadcn/ui)
│ │ ├── chat.tsx # Chat input component
│ │ ├── dashboard.tsx # Dashboard table
│ │ ├── editor.tsx # Monaco editor wrapper
│ │ ├── terminal.tsx # Terminal component
│ │ └── ...
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility libraries
│ │ ├── server/routes/ # tRPC routers
│ │ ├── auth.ts # Better Auth config
│ │ ├── openrouter.ts # OpenRouter client
│ │ ├── piston.ts # Piston API client
│ │ ├── prisma.ts # Prisma client
│ │ ├── supabase.ts # Supabase client
│ │ ├── webcontainer.ts # WebContainer setup
│ │ └── xendit.ts # Xendit client
│ └── types/ # TypeScript types
├── next.config.ts # Next.js configuration
├── package.json # Dependencies
└── tsconfig.json # TypeScript config
| Model | Description |
|---|---|
| User | Pengguna dengan credits, subscription tier, dan role |
| Session/Account | Auth sessions dan OAuth accounts |
| Room | Chat room untuk setiap sesi chat |
| Chat | Pesan dalam room (user/assistant/system) |
| SharedSession | Tantangan yang bisa di-share dan fork |
| Category | Kategori tantangan (DSA, Web, etc.) |
| UserProgress | Progress pengguna per tantangan |
| Payment | Riwayat pembayaran |
| Usage | Log penggunaan credits |
- Free Users: 25 credits/hari, reset otomatis
- Pro Users: 3000 credits bonus + unlimited access
- Credit Usage: ~1 credit per 100 tokens
- Node.js 18+
- PostgreSQL database
- Bun/npm/yarn/pnpm
# Clone repository
git clone <repository-url>
cd hackv2
# Install dependencies
bun install # atau npm install
# Setup environment variables
cp .env.example .env
# Generate Prisma client
bunx prisma generate
# Push database schema
bunx prisma db push
# Run development server
bun run devLihat .env.example untuk daftar lengkap environment variables yang diperlukan.
| Script | Description |
|---|---|
bun run dev |
Start development server |
bun run build |
Build untuk production |
bun run start |
Start production server |
bun run lint |
Run ESLint |
bunx prisma studio |
Open Prisma Studio |
- CORS Headers: Cross-Origin policies untuk WebContainer
- Protected Routes: Middleware untuk autentikasi
- Admin Routes: Role-based access control
- API Rate Limiting: Credit-based usage limits
- Secure Payments: Xendit webhook verification
Aplikasi ini fully responsive dan mendukung:
- 📱 Mobile (< 768px)
- 📱 Tablet (768px - 1024px)
- 💻 Desktop (> 1024px)
- Fork repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open Pull Request
This project is licensed under the MIT License.
Untuk pertanyaan atau dukungan, silakan buat issue di repository ini.