Fullstack Template (MERN-like)

Template siap pakai untuk proyek fullstack dengan Node.js (Express, TypeScript) di backend dan React (Vite, TypeScript, TailwindCSS) di frontend.

Fitur

• Backend:

  • Framework: Express.js
  • Bahasa: TypeScript
  • Modul: ES Modules ("type": "module")
  • Database ORM: Prisma (dengan MySQL sebagai default)
  • Autentikasi: JWT (login, register, protected route)
  • Validasi: zod untuk validasi request body
  • Environment: dotenv dan zod untuk validasi variabel lingkungan
  • Runner: tsx untuk development

• Frontend:

  • Framework: React
  • Bundler: Vite
  • Bahasa: TypeScript
  • Styling: TailwindCSS
  • Routing: React Router DOM
  • State Management: Sederhana (React hooks)
  • API Service: Wrapper fetch dengan interceptor untuk JWT

Struktur Proyek

/
├── backend/      # Proyek Node.js/Express
├── frontend/     # Proyek React/Vite
└── README.md

Panduan Instalasi & Menjalankan

1. Prasyarat

• Node.js (v18 atau lebih baru)
• npm atau yarn atau pnpm
• Database MySQL yang sedang berjalan

2. Setup Backend

1. Masuk ke direktori backend:

   cd backend
   

2. Install dependencies:

   npm install
   

3. Setup environment variables: Salin file .env.example menjadi .env dan sesuaikan nilainya.

   cp .env.example .env
   

   File .env Anda akan terlihat seperti ini:

   # Backend
   PORT=5000
   NODE_ENV=development
   
   # Ganti dengan URL koneksi database MySQL Anda
   DATABASE_URL="mysql://USER:PASSWORD@HOST:PORT/DATABASE"
   
   # Ganti dengan secret yang kuat
   JWT_SECRET=your-super-secret-jwt-key-with-at-least-32-chars
   

4. Jalankan migrasi database: Perintah ini akan membuat tabel User di database Anda sesuai skema di prisma/schema.prisma.

   npm run prisma:migrate
   

5. Jalankan server development: Server akan berjalan di http://localhost:5000.

   npm run dev
   

3. Setup Frontend

1. Buka terminal baru, masuk ke direktori frontend:

   cd frontend
   

2. Install dependencies:

   npm install
   

3. Jalankan server development: Aplikasi React akan berjalan di http://localhost:5173.

   npm run dev
   

   Aplikasi frontend sudah dikonfigurasi dengan proxy ke backend. Setiap request ke /api dari frontend akan otomatis diteruskan ke http://localhost:5000/api.

4. Menjalankan Aplikasi

• Buka http://localhost:5173 di browser Anda.
• Anda bisa mencoba mendaftar (register) dan masuk (login).
• Setelah login, token JWT akan disimpan di localStorage dan Anda akan diarahkan ke halaman utama yang menampilkan email Anda (diambil dari endpoint yang terproteksi).

Skrip NPM yang Tersedia

Backend (/backend)

• npm run dev: Menjalankan server dalam mode development dengan hot-reload.
• npm run build: Kompilasi kode TypeScript ke JavaScript.
• npm run start: Menjalankan server dari hasil build (untuk produksi).
• npm run prisma:generate: Generate ulang Prisma Client.
• npm run prisma:migrate: Menjalankan migrasi database.

Frontend (/frontend)

• npm run dev: Menjalankan server Vite dalam mode development.
• npm run build: Build aplikasi untuk produksi.
• npm run preview: Menjalankan server untuk melihat hasil build produksi.

Panduan Kontribusi

Merasa ada yang bisa ditingkatkan? Silakan buat Pull Request atau buka Issue.

1. Fork repositori ini.
2. Buat branch baru (git checkout -b fitur/nama-fitur).
3. Buat perubahan Anda.
4. Commit perubahan (git commit -m 'feat: Menambahkan fitur X').
5. Push ke branch (git push origin fitur/nama-fitur).
6. Buka Pull Request.