TaskTrack

Aplikasi pengelola tugas akademik yang lahir dari proses belajar web secara end-to-end.

Frontend responsif · REST API Flask · Turso/libSQL · Session Authentication

🎯 Latar Belakang

TaskTrack tidak berawal dari ide startup atau tugas sekolah. Proyek ini bermula dari obrolan gabut tiga orang yang kebetulan sedang bersiap mengikuti kompetisi CTF dalam satu tim.

Karena salah satu kategori yang ingin kami pelajari adalah Web Exploitation, kami merasa perlu memahami bagaimana aplikasi web dibuat dari dalam sebelum belajar membongkar atau mengujinya. Kami ingin melihat sendiri bagaimana tampilan frontend mengirim request, bagaimana backend memvalidasi data dan mengelola session, serta bagaimana informasi akhirnya disimpan ke database.

Dari eksperimen kecil tersebut, TaskTrack berkembang menjadi proyek bersama bertiga. Domain pengelolaan tugas dipilih karena cukup sederhana untuk dipahami, tetapi tetap memiliki bagian-bagian penting sebuah aplikasi web nyata: autentikasi, CRUD, pencarian, otorisasi, API, database, dan antarmuka responsif.

Singkatnya: proyek ini memang berawal dari gabut, tetapi kemudian menjadi media belajar kami untuk memahami alur kerja aplikasi web sebagai persiapan menghadapi challenge Web Exploitation di CTF.

🧩 Masalah yang Ingin Kami Pelajari

Banyak materi web membahas frontend dan backend secara terpisah. Akibatnya, hubungan antarkomponen sering baru terasa ketika semuanya digabungkan dalam satu aplikasi.

Melalui TaskTrack, kami mencoba memahami:

• perjalanan data dari form di browser sampai tersimpan di database;
• cara register, login, cookie, dan session bekerja;
• batas tanggung jawab antara frontend, API, dan database;
• validasi input, otorisasi pengguna, serta hak akses admin;
• proses debugging ketika request, state antarmuka, atau data tidak sinkron;
• cara membangun dan membagi pekerjaan dalam tim kecil beranggotakan tiga orang.

Task manager dipilih sebagai studi kasus karena menyediakan ruang yang cukup untuk mempraktikkan semua konsep tersebut tanpa domain bisnis yang terlalu rumit.

✨ Fitur

• Registrasi, login, logout, dan session pengguna.
• Membuat, melihat, mengubah, menyelesaikan, dan menghapus tugas.
• Deadline, mata kuliah, deskripsi, serta tingkat prioritas tugas.
• Pencarian dan filter tugas.
• Board responsif untuk tugas berjalan dan tugas selesai.
• Ringkasan progres dan statistik penyelesaian.
• Profil pengguna dan preferensi tampilan.
• Light mode, dark mode, dan navigasi khusus perangkat mobile.
• Panel admin untuk melihat, memperbarui, dan menghapus akun pengguna.
• Health-check endpoint untuk memeriksa status API.

🖼️ Tampilan

Dashboard

Panduan ukuran dan nama file screenshot tersedia di docs/screenshots/README.md.

🛠️ Tech Stack

Bagian	Teknologi	Kegunaan
Frontend	HTML5, CSS3, Vanilla JavaScript	Struktur halaman, design system, state antarmuka, dan komunikasi dengan API
UI	Font Awesome, Google Fonts	Ikon dan tipografi
Backend	Python, Flask	REST API, routing, validasi, session, dan business logic
Keamanan	bcrypt	Hashing dan verifikasi password pengguna
Integrasi	Flask-CORS, python-dotenv	CORS serta konfigurasi environment
Database	Turso + libSQL (libsql-experimental)	Embedded replica lokal tasktrack.db yang disinkronkan ke Turso
Deployment	Gunicorn, Railway, Vercel	Menjalankan API dan menyajikan frontend

Arsitektur Singkat

Browser
   │
   ├── HTML / CSS / JavaScript
   │          │
   │          ▼ fetch + cookie session
   │      Flask REST API
   │          │
   │          ▼
   └────── Turso / libSQL

Frontend dan backend dipisahkan. Frontend berkomunikasi dengan Flask melalui HTTP, sedangkan backend menangani session, validasi, otorisasi, serta akses database.

👥 Tim

Proyek ini dikerjakan oleh tiga orang, sama seperti formasi tim CTF kami:

Anggota	Peran Utama	GitHub
Elok	Frontend	naaelle1 / TaskTrack
Ozzie	Backend	@ozzie5555
Wisnu	Frontend	@Wisnu1101

Elok dan Wisnu berfokus pada tampilan serta interaksi frontend, sedangkan Ozzie berfokus pada API, autentikasi, dan database di backend. Dalam prosesnya, keputusan dan debugging tetap dilakukan bersama.

🚀 Menjalankan Secara Lokal

1. Siapkan project

git clone https://github.com/naaelle1/TaskTrack.git
cd TaskTrack
python3 -m venv .venv
source .venv/bin/activate
python -m pip install -r backend/requirements.txt
cp .env.example .env

Isi minimal DATABASE_URL dan SECRET_KEY di dalam .env. Untuk mengaktifkan akses admin, tambahkan ADMIN_EMAIL sesuai akun yang akan dijadikan admin.

2. Jalankan backend

cd backend
../.venv/bin/python app.py

API berjalan di http://localhost:5000.

3. Jalankan frontend

Buka terminal kedua dari root project:

python3 -m http.server 5500 --directory frontend

Buka http://localhost:5500/pages/index.html di browser.

4. Periksa koneksi API

curl http://localhost:5000/health

Respons yang diharapkan:

{"status":"ok"}

Endpoint Utama

Method	Endpoint	Fungsi
POST	/register	Membuat akun
POST	/login	Memulai session
POST	/logout	Mengakhiri session
GET	/me	Mengambil pengguna aktif
PUT	/profile	Memperbarui profil
GET	/dashboard	Mengambil ringkasan dashboard
GET, POST	/tasks	Melihat atau membuat tugas
GET, PUT, DELETE	/tasks/:id	Membaca, memperbarui, atau menghapus tugas
PATCH	/tasks/:id/complete	Menandai tugas selesai
DELETE	/tasks/completed	Menghapus riwayat tugas selesai
GET	/tasks/search?q=	Mencari tugas
GET	/tasks/filter	Memfilter tugas
GET	/admin/users	Melihat daftar pengguna sebagai admin
PUT, DELETE	/admin/users/:id	Memperbarui atau menghapus pengguna sebagai admin
GET	/health	Memeriksa status API

Catatan

TaskTrack adalah proyek pembelajaran, bukan aplikasi produksi atau security lab yang sengaja dibuat rentan. Tujuan utamanya adalah memahami bagaimana komponen web saling terhubung agar kami memiliki fondasi yang lebih baik ketika mempelajari Web Exploitation.