ristek-task-fe/README.md

Ristek Task Frontend

📄 Catatan Deployment: Cara deployment menggunakan Docker Compose sudah disertakan di dalam submisi PDF.

---

Tech Stack

Kategori	Teknologi
Framework	React 19 + React Router 7 (SSR)
Bahasa	TypeScript 5
Styling	TailwindCSS 4, tw-animate-css
UI Components	Radix UI, Lucide React (icons)
Charts	Recharts
Build Tool	Vite 7
Runtime	Node.js 24 (Alpine)

---

Fitur

• Autentikasi — Register, login, logout dengan JWT (access + refresh token)
• Form Builder — Buat dan edit form dengan 7 tipe pertanyaan (short text, long text, multiple choice, checkbox, dropdown, date, rating)
• Form Submission — Halaman publik untuk mengisi dan mengirim respons form
• Response Analytics — Dashboard statistik respons dengan pie chart, bar chart, dan tabel individual responses
• Filter & Sort — Cari form berdasarkan judul, filter status respons, dan sort berdasarkan tanggal (server-side dengan debounce)
• Responsive — UI responsif untuk mobile dan desktop

---

Prasyarat

Pastikan sudah terinstall:

• Node.js 20+ (disarankan versi 24)
• npm

---

Cara Menjalankan Secara Lokal

1. Clone Repository

git clone https://github.com/fossyy/ristek-task-fe
cd ristek-task-fe

2. Konfigurasi Environment

Buat file .env di root project:

VITE_API_BASE_URL=http://localhost:8080

3. Install Dependencies

npm install

4. Jalankan Aplikasi (Development)

npm run dev

Aplikasi akan berjalan di http://localhost:5173.

5. Build & Jalankan Production

npm run build
npm run start

Aplikasi production berjalan di http://localhost:3000.

---

Halaman / Routes

Route	Halaman	Deskripsi
/	Home	Redirect ke /forms
/login	Login	Halaman login
/register	Register	Halaman registrasi
/forms	Forms List	Daftar form milik user (dengan filter)
/forms/new	Create Form	Buat form baru
/form/:id	Form Preview	Preview form (read-only)
/form/:id/edit	Edit Form	Edit form yang sudah ada
/form/:id/submit	Submit Form	Isi dan kirim respons form
/form/:id/responses	Form Responses	Statistik & data respons (owner only)

---

Struktur Folder

app/
├── context/          # React context (auth)
├── routes/           # Halaman-halaman (route modules)
├── root.tsx          # Root layout
├── routes.ts         # Konfigurasi routing
└── app.css           # Global styles
components/
├── forms/            # Komponen form (card, editor, preview)
└── shared/           # Komponen shared (navbar, footer, button, input)
lib/
├── api.ts            # Fungsi API (auth, forms, responses)
├── auth.ts           # Helper JWT & token management
├── types.ts          # TypeScript interfaces
└── utils.ts          # Utility functions

---

Scripts

Script	Perintah	Keterangan
npm run dev	react-router dev	Jalankan dev server dengan HMR
npm run build	react-router build	Build production
npm run start	react-router-serve ./build/server/index.js	Jalankan production server
npm run typecheck	react-router typegen && tsc	Type checking

---

Environment Variables

Variable	Wajib	Default	Keterangan
VITE_API_BASE_URL	✅	—	URL backend API