update: Readme to include setup instruction

README.md

@@ -1,87 +1,135 @@
-# Welcome to React Router!
+# Ristek Task Frontend
 
-A modern, production-ready template for building full-stack React applications using React Router.
+> **📄 Catatan Deployment:** Cara deployment menggunakan **Docker Compose** sudah disertakan di dalam **submisi PDF**.
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
+---
 
-## Features
+## Tech Stack
 
-- 🚀 Server-side rendering
+| Kategori      | Teknologi                                |
-- ⚡️ Hot Module Replacement (HMR)
+| ------------- | ---------------------------------------- |
-- 📦 Asset bundling and optimization
+| Framework     | React 19 + React Router 7 (SSR)         |
-- 🔄 Data loading and mutations
+| Bahasa        | TypeScript 5                             |
-- 🔒 TypeScript by default
+| Styling       | TailwindCSS 4, tw-animate-css            |
-- 🎉 TailwindCSS for styling
+| UI Components | Radix UI, Lucide React (icons)           |
-- 📖 [React Router docs](https://reactrouter.com/)
+| Charts        | Recharts                                 |
+| Build Tool    | Vite 7                                   |
+| Runtime       | Node.js 24 (Alpine)                      |
 
-## Getting Started
+---
 
-### Installation
+## Fitur
 
-Install the dependencies:
+- **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
 ```
 
-### Development
+### 4. Jalankan Aplikasi (Development)
-
-Start the development server with HMR:
 
 ```bash
 npm run dev
 ```
 
-Your application will be available at `http://localhost:5173`.
+Aplikasi akan berjalan di `http://localhost:5173`.
 
-## Building for Production
+### 5. Build & Jalankan Production
-
-Create a production build:
 
 ```bash
 npm run build
+npm run start
 ```
 
-## Deployment
+Aplikasi production berjalan di `http://localhost:3000`.
-
-### Docker Deployment
-
-To build and run using Docker:
-
-```bash
-docker build -t my-app .
-
-# Run the container
-docker run -p 3000:3000 my-app
-```
-
-The containerized application can be deployed to any platform that supports Docker, including:
-
-- AWS ECS
-- Google Cloud Run
-- Azure Container Apps
-- Digital Ocean App Platform
-- Fly.io
-- Railway
-
-### DIY Deployment
-
-If you're familiar with deploying Node applications, the built-in app server is production-ready.
-
-Make sure to deploy the output of `npm run build`
-
-```
-├── package.json
-├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
-├── build/
-│   ├── client/    # Static assets
-│   └── server/    # Server-side code
-```
-
-## Styling
-
-This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
 
 ---
 
-Built with ❤️ using React Router.
+## 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                |