Project facts
Role
Frontend Developer
Type
Portfolio Project
Status
mvpTimeline
May 2026
Focus
Event discovery
Filtering and sorting
Ticket selection
Cart persistence
Multi-step checkout
Digital tickets
Responsive UI
Back to projects
Case study
StageLink
Concert ticketing frontend experience
StageLink is a React and Vite application that simulates a complete ticket purchasing flow for live events. It focuses on event discovery, checkout UX, local persistence, and a smooth digital ticket experience without processing real payments.
React
Frontend
Vite
Build Tool
CSS Modules
Styling
Testing Library
Testing
Overview
StageLink is a frontend-first concert ticketing MVP built to simulate the full purchase journey: browsing upcoming events, opening event detail pages, selecting ticket quantities, reviewing a cart, completing a simulated checkout, and viewing generated tickets.
Problem
Ticketing products need to make discovery, selection, cart management, and checkout feel predictable. Even in an MVP, users need clear pricing, editable quantities, visible progress, and confidence that their tickets will be available after purchase.
Solution
The MVP models the complete frontend flow with React Router pages, mocked event data, custom state hooks, localStorage persistence, a guided checkout progress UI, and a session-based ticket wallet. It keeps payments simulated while still presenting the product like a real ticketing experience.
Key features
Event discovery
Browse featured and upcoming events with filters and sorting.
Ticket selection
Select ticket types, choose quantity, and review pricing.
Persistent cart
Cart items are saved in localStorage so users do not lose their order.
Multi-step checkout
Guided flow with order review, guest details, and payment simulation.
Ticket wallet
View and manage purchased tickets in one place.
Responsive design
Fully responsive experience across desktop and mobile.
Testing
Component and integration tests using Testing Library and Playwright for important user flows.
Tech stack
Frontend
React React Router CH Custom Hooks
Tooling
Vite JSON Mocked Local JSON
Styling
CSS Modules
Testing
Testing Library
Browser APIs
LS localStorage
Gallery
Event Discovery
Event discovery with filters, sorting, pagination, and featured event cards.
Event Detail
Event detail page with venue details, ticket quantity controls, and pricing summary.
Checkout Review
Checkout review step with editable cart items, service fees, and total cost.
Checkout Payment
Simulated payment step inside the multi-step checkout flow.
My Tickets Wallet
My Tickets wallet with a generated ticket, holder information, and QR code preview.
Challenges
- 01 Keeping cart state consistent across event detail, cart, checkout, and ticket views.
- 02 Designing a checkout flow that feels complete without real payment processing.
- 03 Making mocked backend behavior feel realistic enough for a portfolio project.
- 04 Balancing event browsing features with a focused purchase journey.
What I learned
- Improved React state management and custom hook patterns.
- Practiced building a fuller e-commerce-style flow from discovery to confirmation.
- Learned how local persistence affects UX across multi-page flows.
- Focused on presenting frontend work as a product experience, not just isolated screens.
Future improvements
- -> Add a real API integration for events, carts, orders, and tickets.
- -> Move mocked local data to a backend service.
- -> Add safer payment-provider test mode integration.
- -> Improve empty, loading, and error states around async data.
- -> Expand test coverage for checkout and ticket generation flows.
Interested in how this project was built?
Check out the source code or let's talk about building something amazing together.