UniSpot Frontend

A React + TypeScript single-page application for UniSpot that lets users discover courses, read/write reviews, browse and purchase study sheets, and manage lease listings with role-based access for students and admins.

Team Members

Name
SITT HMUE EAIN
HSU MYAT NOE MAUNG MAUNG
WIN THUTA AUNG

Tech Stack (Full System)

Layer	Technology
Frontend	React 19, TypeScript, Vite 7, React Router v7, TanStack Query, Axios, Tailwind CSS, Recharts, React Hook Form, Zod
Backend	Next.js 16 (App Router API Routes), TypeScript, Zod
Database	MongoDB (Node mongodb driver)
Authentication	JWT (jsonwebtoken/jose) + bcryptjs
Infra	Docker (frontend Dockerfile + Nginx config in frontend repo)

---

Features

• Authentication - Register/login flow with profile bootstrap via /auth/me.
• Role-Based Access - Route protection for student and admin-side access using ProtectedRoute and RoleRoute.
• Course Reviews - Browse courses and post/view course and teacher reviews.
• Study Sheet Marketplace - Public listing, student-owned study sheet CRUD, and purchase flow.
• PromptPay QR Payment Support - Study sheet purchases generate EMV payload + QR from VITE_PROMPTPAY_PHONE.
• Lease Marketplace - Public lease listing browsing and student lease listing management.
• Dashboard + Wallet - Shared dashboard landing and student wallet flow.
• Profile + My Reviews - Authenticated profile management and student review history.
• Moderation Workspace - Admin-side moderation pages for study sheets, leases, teacher reviews, and teacher suggestions.
• Admin Tools - Payments, withdrawals, and report moderation routes.

---

Admin Side Screenshots

Admin Login

Dashboard

Study Sheets

Leases Marketplace

Course Reviews (Course List)

Course Reviews (Detail)

Study Sheet Moderation

Teacher Review Moderation

Lease Moderation

Payments

Withdrawals

Report Moderation

Profile

---

Student Side Screenshots

Register

Dashboard

Study Sheets Marketplace

Study Sheet Purchase Modal

Leases Marketplace

Course Reviews (Course List)

Course Reviews (Course Review Tab)

Course Reviews (Teacher Review Tab)

My Study Sheets (My Uploads)

My Study Sheets (Purchased)

Create New Study Sheet

My Lease Listings

Create New Lease Listing

Wallet

My Profile

---

Project Structure

Unispot_frontend/
├── docs/
│   └── screenshots/
│       └── admin/
├── public/
├── src/
│   ├── api/
│   │   ├── http.ts                        # Axios instance + auth interceptors
│   │   ├── auth.api.ts                    # Auth endpoints
│   │   ├── courses.api.ts                 # Course endpoints
│   │   ├── reviews.api.ts                 # Course review endpoints
│   │   ├── teacherReviews.api.ts          # Teacher review endpoints
│   │   ├── studySheets.api.ts             # Study sheet endpoints
│   │   ├── leaseListings.api.ts           # Lease listing endpoints
│   │   ├── leases.api.ts                  # Lease marketplace endpoints
│   │   ├── moderation.api.ts              # Study sheet moderation endpoints
│   │   ├── reviewModeration.api.ts        # Review moderation endpoints
│   │   ├── teacherReviewModeration.api.ts # Teacher review moderation endpoints
│   │   ├── teacherSuggestions.api.ts      # Teacher suggestion endpoints
│   │   ├── leaseModeration.api.ts         # Lease moderation endpoints
│   │   ├── payments.api.ts                # Payment/admin endpoints
│   │   ├── withdrawals.api.ts             # Admin withdrawal endpoints
│   │   ├── reports.api.ts                 # Admin report moderation endpoints
│   │   ├── profile.api.ts                 # Profile endpoints
│   │   ├── wallet.api.ts                  # Wallet endpoints
│   │   ├── dashboard.api.ts               # Dashboard endpoints
│   │   └── purchases.api.ts               # Study sheet purchase endpoints
│   ├── auth/
│   │   ├── AuthProvider.tsx
│   │   └── useAuth.ts
│   ├── components/                        # Shared UI (Button, Modal, Table, Alert, etc.)
│   ├── layouts/
│   │   └── AppLayout.tsx
│   ├── pages/
│   │   ├── admin/
│   │   ├── dashboard/
│   │   ├── moderation/
│   │   ├── courses/
│   │   ├── leases/
│   │   ├── profile/
│   │   ├── reviews/
│   │   └── wallet/
│   ├── routes/
│   │   ├── ProtectedRoute.tsx
│   │   └── RoleRoute.tsx
│   ├── utils/
│   │   ├── promptpay.ts
│   │   ├── format.ts
│   │   └── money.ts
│   ├── App.tsx
│   └── main.tsx
├── package.json
└── README.md

---

Route Access Matrix

Area	Routes	Access
Public	/, /login, /register, /courses, /courses/:courseId/reviews, /study-sheets, /lease-listings, /leases	Everyone
Authenticated	/dashboard, /profile, /student/*, /student/study-sheets/*, /student/lease-listings/*	Any logged-in user
Student only	/study-sheets/create, /leases/mine, /wallet, /reviews/mine	STUDENT
Moderation	/moderation/*, /moderation/study-sheets, /moderation/lease-listings, /moderation/teacher-reviews, /moderation/teacher-suggestions	Admin-side moderation access
Admin	/admin, /admin/payments, /admin/withdrawals, /admin/reports	ADMIN

---

Getting Started

Prerequisites

• Node.js 18+
• npm 9+
• UniSpot backend service running and reachable

Install and Run

npm install
npm run dev

Default local URL: http://localhost:5173

Production Build

npm run build
npm run preview

Lint

npm run lint

---

Environment Variables

Create .env in project root:

VITE_API_BASE_URL=http://localhost:3000
VITE_PROMPTPAY_PHONE=0936022762
VITE_ADMIN_EMAIL=admin@example.com
VITE_ADMIN_PASSWORD=your_admin_password

Variable	Required	Description
VITE_API_BASE_URL	Yes	Base URL for backend API calls (src/api/http.ts).
VITE_PROMPTPAY_PHONE	Recommended	PromptPay phone/ID used to generate purchase QR payload on study sheets page.
VITE_ADMIN_EMAIL	Optional	Enables one-click admin login button on login page.
VITE_ADMIN_PASSWORD	Optional	Password paired with VITE_ADMIN_EMAIL for quick admin login.

---

Notes

• Access token is stored in localStorage key access_token.
• Request interceptor injects Authorization: Bearer <token>.
• On 401, the client clears token and redirects to /login.
• Post-auth landing redirects to /dashboard for all roles in current frontend logic.
• Across frontend and backend code, moderation endpoints and pages are grouped under admin-side workflows.