update: Readme to include setup instruction

2026-02-26 11:15:28 +07:00
parent 6b935c9c22
commit 907ad276bf
1 changed files with 109 additions and 61 deletions
@@ -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
- ⚡️ Hot Module Replacement (HMR)
- 📦 Asset bundling and optimization
- 🔄 Data loading and mutations
- 🔒 TypeScript by default
- 🎉 TailwindCSS for styling
- 📖 [React Router docs](https://reactrouter.com/)
+| 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)                      |

-## 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
-
-Start the development server with HMR:
+### 4. Jalankan Aplikasi (Development)

 ```bash
 npm run dev
 ```

-Your application will be available at `http://localhost:5173`.
+Aplikasi akan berjalan di `http://localhost:5173`.

-## Building for Production
-
-Create a production build:
+### 5. Build & Jalankan Production

 ```bash
 npm run build
+npm run start
 ```

-## Deployment
-
-### 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.
+Aplikasi production berjalan di `http://localhost:3000`.

 ---

-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                |