diff --git a/README.md b/README.md index 5c4780a..e448fdf 100644 --- a/README.md +++ b/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 -- ⚡️ 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 |