Single Page Application (SPA) dibangun dengan React dan Vitemenyediakan antarmuka interaktif untuk melacak siklus menstruasimencatat kondisi hariandan melihat prediksi AI.
| Technology | Purpose |
|---|---|
| React 18+ | UI Library |
| Vite 8.0 | Build tool & dev server (HMR) |
| TypeScript 5.9 | Type safety |
| React Router 7.x | Client-side routing |
| Axios 1.x | HTTP client for API calls |
| CSS Modules | Component-scoped styling |
# Install dependencies
npm install
# Start development server (HMR)
npm run dev
# → http://localhost:5173
# Build for production
npm run build
# Preview production build
npm run previewNote: Pastikan Backend API (
http://localhost:5000) sudah berjalan sebelum menggunakan frontend.
frontend/
├── package.on # Dependencies & scripts
├── index.html # HTML entry point
├── tsconfig.on # TypeScript configuration
├── public/
│ ├── favicon.svg # App icon
│ └── icons.svg # Icon sprites
└── src/
├── App.x # 🏠 Root componentroutingguards
├── main.x # 🚀 React entry point
├── index.css # 🎨 Global s
│
├── context/
│ └── AuthContext.x # 🔐 Authentication state (tokenuser)
│
├── components/
│ ├── Navbar.x # 🧭 Navigation bar
│ └── Navbar.css # Navbar styling
│
├── pages/
│ ├── LoginPage.x # 🔑 Login form
│ ├── RegisterPage.x # 📝 Registration form
│ ├── Dashboard.x # 📊 Main dashboard
│ ├── Dashboard.css # Dashboard styling
│ ├── CalendarPage.x # 📅 Calendar view
│ ├── CalendarPage.css # Calendar styling
│ ├── CycleForm.x # 🩸 Menstrual cycle input
│ ├── DailyLogForm.x # 📋 Daily health log form
│ ├── ProfilePage.x # 👤 User profile
│ ├── ProfilePage.css # Profile styling
│ ├── Auth.css # Auth pages styling
│ └── FormPage.css # Form pages styling
│
└── services/
└── api. # 🌐 Axios instance & interceptors
| Path | Component | Auth | Description |
|---|---|---|---|
/login |
LoginPage |
Public | Halaman login |
/register |
RegisterPage |
Public | Halaman registrasi |
/ |
Dashboard |
🔒 Protected | Dashboard utama |
/calendar |
CalendarPage |
🔒 Protected | Kalender siklus |
/cycle |
CycleForm |
🔒 Protected | Form input siklus |
/daily-log |
DailyLogForm |
🔒 Protected | Form log harian |
/profile |
ProfilePage |
🔒 Protected | Profil pengguna |
ProtectedRoute— Redirect ke/loginjika belum loginPublicRoute— Redirect ke/jika sudah login
Centralized authentication state menggunakan React Context API:
// Provides: { tokenuserloginlogoutloading }
<AuthProvider>
<App />
</AuthProvider>| State | Type | Description |
|---|---|---|
token |
string | null |
JWT token dari localStorage |
user |
object | null |
Data user (idnameemail) |
loading |
boolean |
Auth state loading indicator |
login(tokenuser) |
function |
Set token & usersimpan ke localStorage |
logout() |
function |
Clear token & userredirect ke login |
Axios instance yang dikonfigurasi untuk berkomunikasi dengan backend:
// Base URL: http://localhost:5000/api
// Auto-attach Authorization header dari localStorage
// Response interceptor: auto-logout on 401/403| Page | API Endpoints Called |
|---|---|
| LoginPage | POST /api/auth/login |
| RegisterPage | POST /api/auth/register |
| Dashboard | GET /api/cyclesGET /api/predictionsGET /api/daily-logs |
| CalendarPage | GET /api/cyclesGET /api/daily-logs |
| CycleForm | POST /api/cyclesPUT /api/cycles/:id |
| DailyLogForm | POST /api/daily-logs |
| ProfilePage | GET /api/profilePUT /api/profile |
Aplikasi menggunakan Vanilla CSS dengan pendekatan:
- Global s (
index.css) — CSS variablesresettypography - Page-level CSS — Setiap halaman memiliki file CSS sendiri
- Component CSS — Component-scoped s (e.g.
Navbar.css)
- Color scheme dengan CSS custom properties
- Responsive design (mobile-first)
- Smooth transitions dan micro-animations
- Loading spinners dan skeleton states
- Form validasi client-side
- Password visibility toggle
- Error handling dengan user-friendly messages
- Auto-redirect setelah login/register berhasil
- Ringkasan siklus terakhir & prediksi berikutnya
- Status panjang siklus & kepercayaan prediksi
- Quick action buttons ke fitur lain
- Statistik dan overview data kesehatan
- Kalender interaktif dengan visualisasi siklus
- Warna berbeda untuk hari menstruasiovulasi estimasi
- Klik tanggal untuk melihat detail log
- Input start/end datepanjang siklusintensitas
- Validasi input dengan feedback realtime
- Support create & edit mode
- Input mood (1-5)symptomskualitas tidurstrespuasa
- Multi-select symptoms dengan checkboxes
- Auto-fill jika log sudah ada untuk tanggal tersebut
- Tampilkan & edit profil (namatanggal lahirrata-rata siklus)
- Account information display