Todo List Fullstack (React + Express + PostgreSQL + Prisma)

Struktur Folder

• frontend/ — Aplikasi React (UI)
• backend/ — API Express + Prisma (server & database)
• TodoList.postman_collection.json — Kumpulan request Postman untuk testing API

---

Cara Menjalankan & Konfigurasi

1. Install Dependency

unzip folder
buka vscode
buka folder yang sudah unzip
buka terminal
cd Todo-list
cd backend && npm install (pastikan terminal sudah di folder Todo-list)
cd ../frontend && npm install

2. Konfigurasi Database

• File konfigurasi: backend/prisma/schema.prisma
• Koneksi database: menggunakan environment variable DATABASE_URL
• Langkah:
  1. Buat file .env di folder backend/
  2. Isi dengan:

     DATABASE_URL="postgresql://<username>:<password>@<host>:<port>/<nama_database>"
     

     Contoh:

     DATABASE_URL="postgresql://postgres:1234@localhost:5432/todolist"
     

3. Migrasi Database

cd backend
npx prisma migrate deploy
npx prisma generate

4. Jalankan Backend

npm start (di terminal folder backend)

• Server berjalan di: http://localhost:4000

5. Jalankan Frontend

cd ../frontend
npm start (di terminal folder frontend)

• Akses di browser: http://localhost:3000

---

File Penting yang Perlu Diedit

• Database config: backend/.env (buat sendiri, lihat langkah 2)
• Skema database: backend/prisma/schema.prisma
• Port backend: backend/index.js (default port 4000)
• Port frontend: frontend/package.json (default port 3000)

---

Fitur Sistem

• Frontend (React + Material UI):

  • Tambah, edit, hapus, tandai selesai, drag & drop urutan tugas

• Backend (Express + Prisma):

  • API CRUD untuk task
  • Migrasi database (Prisma)
  • Koneksi via environment variable (.env)
  • Validasi input & error handling

• Database:

  • PostgreSQL

---

Testing API

• Import file TodoList.postman_collection.json ke Postman.
• Tersedia request: Ambil, Tambah, Edit, Hapus, Tandai Selesai, Ubah Urutan Tugas.

---

Screenshots

Berikut beberapa tampilan aplikasi: