TicketOn is a premium event management platform built with React, TypeScript, and Tailwind CSS. It allows users to discover events, book tickets, and manage transactions seamlessly.
We have implemented a complete transaction flow that includes:
-
Checkout Page: Dynamic price calculation, point usage settings, and voucher application.
-
Payment Proof Page: 2-hour transaction timer, file upload with preview, and progress indicator.
-
Transaction Status: Visual timeline tracking 6 statuses (Waiting for Payment, Verification, Done, Rejected, Expired, Canceled).
-
Core Components:
CountdownTimer,PriceSummary,CheckoutForm,PaymentProofUpload, andTransactionStatus. -
Frontend: React 18, TypeScript, Vite
-
Data Fetching: TanStack Query (React Query)
-
Styling: Tailwind CSS v4, Lucide React (Icons)
-
State Management: Zustand
-
Routing: React Router Dom v6
-
PWA: vite-plugin-pwa
Since the backend is currently in development, you can use these mock credentials to explore the app:
| Role | Password | |
|---|---|---|
| Organizer (Admin) | [email protected] |
admin |
| Participant (User) | Any valid email | Any string |
Copy the example environment file and update the variables:
cp .env.example .env| Variable | Description | Default |
|---|---|---|
VITE_API_URL |
URL of the backend API server | http://localhost:8000/api |
-
Install Dependencies:
npm install
-
Setup Environment:
cp .env.example .env
-
Run Development Server:
npm run dev
-
Build for Production:
npm run build
src/components/transactions: Transaction-specific UI components.src/pages: Main application pages (Home, Checkout, PaymentProof, etc.).src/store: Zustand state management (Auth, etc.).src/types: TypeScript interface definitions.