136 lines
4.4 KiB
Markdown
136 lines
4.4 KiB
Markdown
# 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+](https://nodejs.org/) (disarankan versi 24)
|
|
- npm
|
|
|
|
---
|
|
|
|
## Cara Menjalankan Secara Lokal
|
|
|
|
### 1. Clone Repository
|
|
|
|
```bash
|
|
git clone https://github.com/fossyy/ristek-task-fe
|
|
cd ristek-task-fe
|
|
```
|
|
|
|
### 2. Konfigurasi Environment
|
|
|
|
Buat file `.env` di root project:
|
|
|
|
```env
|
|
VITE_API_BASE_URL=http://localhost:8080
|
|
```
|
|
|
|
### 3. Install Dependencies
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 4. Jalankan Aplikasi (Development)
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Aplikasi akan berjalan di `http://localhost:5173`.
|
|
|
|
### 5. Build & Jalankan Production
|
|
|
|
```bash
|
|
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 |
|