Tech:

React.jsLaravelTailwindMySql

Project Architecture & Foundation

Component-Based Structure

The application was built using a modular architecture that separates concerns into distinct directories:

• src/Pages: Contains top-level components for each route (e.g., HomePage, Checkout).
• src/components: Holds reusable UI elements (e.g., PricingTickets, SponsorsTile, form inputs) that are used across multiple pages.

Build & Development Environment

• Utilized Vite as the build tool for its fast Hot Module Replacement (HMR), which significantly sped up development and debugging cycles.
• Configured as a standard React Single Page Application (SPA).

Routing and State Management

Client-Side Routing

• Implemented with React Router to create a seamless, multi-page experience without full page reloads.
• Main routing logic in App.jsx defines the application's structure, including a catch-all * route to handle 404 errors gracefully.

URL-Driven State for Checkout

• Selected ticket type (BASIC, BUSINESS, VIP) is passed as a URL parameter from the HomePage to the Checkout page (e.g., /Checkout/VIP).
• This approach ensures the checkout flow is stateless and predictable:
  • The URL becomes the single source of truth.
  • Users can refresh or share the link without losing context.

Checkout Form & API Interaction

Controlled & Performant Forms

• Used React Hook Form to manage the checkout form's state and validation.
• Optimized performance by minimizing re-renders, as state updates don’t occur on every keystroke.

Asynchronous Data Submission

• Axios handles the POST request to the backend API upon form submission.
• Form includes an isLoading state to:
  • Disable the "Buy Ticket" button during the API call.
  • Prevent duplicate submissions.

Server-Side Error Handling

• The handleApiErrors function catches validation errors returned from the server.
• Errors are mapped to the appropriate form fields, e.g., an invalid email shows an error under the email input.

UI Implementation & User Experience

Responsive Design with Tailwind CSS

• Entire UI is styled using Tailwind CSS utility classes.
• Ensures the layout is fully responsive and adapts to various screen sizes.

Accessible Interactive Components

• Provides out-of-the-box logic and accessibility, while allowing full styling control with Tailwind.

User Feedback Mechanisms

• After successful payment:
  • User is redirected to the homepage.
  • A confirmation message is stored in sessionStorage.
• The HomePage:
  • Reads and displays the message in a modal.
  • Clears it from sessionStorage after display to avoid repetition.

Video demo : link🔗