carlos@portfolio:~$ menu

Theme
Back to projects

Case study

StageLink

Concert ticketing MVP with event discovery, ticket selection, cart persistence, simulated checkout, and session-based digital tickets.

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.

Live DemoGitHub Repo

  • React

    Frontend

  • Vite

    Build Tool

  • CSS Modules

    Styling

  • Testing Library

    Testing

StageLink concert ticketing app preview

Project facts

Role

Frontend Developer

Type

Portfolio Project

Status

MVP

Timeline

May 2026

Focus

Event discovery
Filtering and sorting
Ticket selection
Cart persistence
Multi-step checkout
Digital tickets
Responsive UI

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

  • Data

    • 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.

View on GitHubContact me