BeinBout Frontend

UI Web untuk platform monitoring kesehatan mental BeinBout.

---

Team ID: CC26 - PS072

1. CFS250D6Y309 - Muhamad Nadira Fabyansyah (Project Manager & AI Engineer)
2. CFS134D6Y504 - Agung Arya Dwipa Laksana (Back-end Developer)
3. CFS134D6Y415 - Kaka Kendra Nugraha (Front-end Developer)
4. CFS296D6Y591 - Muhammad Irfan Daffa' Ardianto (Front-end Developer)
5. CFS134D6Y584 - Denisyal Hendra Putra (Front-end Developer)

---

Ringkasan Proyek

Frontend BeinBout mencakup:

• autentikasi (email/password + Google OAuth),
• onboarding quiz awal,
• analisis hasil AI,
• dashboard insight,
• daily journal,
• weekly checkup,
• route guard dan session handling.

---

Fitur Utama

• Landing page + halaman About
• Auth flow (/login, /register, /callback)
• Onboarding (/quiz → /complete-data → /quiz-analysis)
• Dashboard analytics (/dashboard)
• Daily journal (/journal, /journal/new, /journal/:id)
• Weekly checkup (/checkup)
• Custom Not Found page (*)

---

Quick Start

Prasyarat

• Node.js LTS
• npm

Instalasi

git clone https://github.com/BeinBout/Capstone-Project-FE.git
cd Capstone-Project-FE
npm install --force

Environment

VITE_API_URL=http://localhost:3000
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Menjalankan aplikasi

npm run dev

Build production

npm run build
npm run preview

---

Scripts

• npm run dev
• npm run build
• npm run preview
• npm run lint

---

Arsitektur Frontend

Route & Guard

• AuthOnly: wajib login
• NewUserOnly: flow user baru/onboarding

Auth State

• Global auth state via AuthProvider
• Verifikasi token ke endpoint /auth/verify/me
• Auto logout saat status 401

API Layer

• Axios instance: VITE_API_URL + /api/v1
• Bearer token otomatis dari localStorage

Service Layer

• src/services/auth/*
• src/services/dashboard/*
• src/services/landing/*

---

Endpoint yang Dipakai Frontend

• /auth/register
• /auth/login
• /auth/google-oauth
• /auth/verify/me
• /auth/logout
• /profile-and-inpe
• /profile-and-inpe/:quizId
• /showing-questions?type=initial|weekly
• /daily-journal
• /daily-journal/:id
• /dashboard/stats
• /dashboard/main
• /dashboard/chart
• /dashboard/is-wc-available
• /weekly-checkup

---

Struktur Folder

Capstone-Project-FE/
├── public/
├── src/
│   ├── components/
│   ├── context/
│   ├── hooks/
│   ├── layouts/
│   ├── lib/
│   ├── pages/
│   ├── routes/
│   ├── services/
│   └── styles/
├── index.html
├── package.json
├── vite.config.js
└── vercel.json

---

Deployment Notes

• SPA rewrite sudah aktif di vercel.json.
• Isi env di Vercel:
  • VITE_API_URL
  • VITE_SUPABASE_URL
  • VITE_SUPABASE_ANON_KEY

---

localStorage Keys

• token
• quiz_answers
• quiz_result

---

Frontend Documentation by BeinBout Team