Setup Project Fullstack + Tech Stack

Tech Stack

A. Buat Folder Project

# Buat folder utama project
mkdir project-fullstack

# Masuk ke folder project
cd project-fullstack

B. Setup Frontend (Vite + React)

# Membuat project React dengan Vite
npm create vite@latest frontend

# Masuk ke folder frontend
cd frontend

# Install dependency bawaan Vite
npm install

# Install Bootstrap (styling UI)
npm install bootstrap

# Install React Router DOM (routing halaman)
npm install react-router-dom

Struktur frontend (buat folder/file dalam src/):

frontend/src/

# Komponen reusable (button, navbar, dll)
components/

# Halaman aplikasi (Home, Users, dll)
pages/

# Service untuk API request ke backend
services/

# Routing aplikasi
routes/
  index.jsx

C. Setup Backend (Node.js + Express + MySQL)

# Kembali ke root project
cd ..

# Buat folder backend
mkdir backend

# Masuk ke folder backend
cd backend

# Inisialisasi Node.js project
npm init -y

# Install Express (server)
npm install express

# Install MySQL driver
npm install mysql2

# Install CORS (izin akses frontend ke backend)
npm install cors

# Install nodemon (auto restart server saat coding)
npm install nodemon --save-dev

# Install dotenv (environment variable)
npm install dotenv

# Install jsonwebtoken (metode autentikasi)
npm install jsonwebtoken

# Install bcrypt (enkripsi password)
npm install bcrypt

Struktur backend (buat folder/file dalam backend/):

backend/

# Konfigurasi database
config/

# Buat file koneksi database di config/
db.js

# Logic aplikasi (controller)
controllers/

# Query database (model)
models/

# Routing API
routes/

# Middleware (auth, validasi)
middlewares/

# File utama server
server.js

Catatan Penting

Frontend  : http://localhost:5173
Backend   : http://localhost:5000

# Wajib pakai CORS agar frontend bisa akses backend

D. Setup Tambahan Backend

File .env

Buat file .env di folder backend:

# File: backend/.env
# Konfigurasi koneksi database MySQL (XAMPP)
DB_HOST=localhost
DB_USER=root
DB_PASS=
DB_NAME=latihan_fullstack

# Konfigurasi Port Backend
PORT=5000

# Secret key di file .env
JWT_SECRET=rahasia_super_aman

Script di package.json

Tambahkan script di backend/package.json:

{
  "scripts": {
    "dev": "nodemon server.js"
  }
}

Menjalankan server dengan nodemon (auto reload saat coding).

Dasar server.js

/* Load environment variable dari file .env */
require("dotenv").config();

/* Import library Express */
const express = require("express");

/* Import CORS untuk izin akses frontend */
const cors = require("cors");

/* Buat aplikasi Express */
const app = express();

/* Middleware CORS (agar frontend bisa akses backend) */
app.use(cors({
  origin: "http://localhost:5173"
}));

/* Middleware agar bisa membaca JSON dari request */
app.use(express.json());

/* Route default untuk test server */
app.get("/", (req, res) => {
  res.send("API jalan");
});

/* Menjalankan server di port 5000 */
const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
  console.log(`Server jalan di port ${PORT}`);
});

Koneksi database config/db.js

require("dotenv").config();
const mysql = require("mysql2");

const db = mysql.createPool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASS,
  database: process.env.DB_NAME,
});

// optional: test koneksi
db.getConnection((err, connection) => {
  if (err) {
    console.error("DB error:", err);
  } else {
    console.log("MySQL connected");
    connection.release();
  }
});

module.exports = db;