Frontend Overview — React.js + Inertia.js

The frontend of the Event Registration Platform is built using React.js, rendered and orchestrated through Inertia.js. Inertia acts as a glue layer between Laravel and React, enabling a modern single-page application experience without the complexity of a fully decoupled SPA.

Instead of managing a separate API and router, Laravel handles all routing, and Inertia delivers React components as page responses. This keeps the development workflow simple while still providing a smooth, dynamic user interface.

Why Inertia.js?

Inertia.js allows us to:

• Build a SPA without a client-side router
• Use Laravel routes to deliver React pages
• Pass backend data directly into React as props
• Avoid writing a REST or GraphQL layer for internal navigation
• Maintain scroll and state automatically between page transitions
• Keep the application structure simple and maintainable

Role of the Frontend

In this system, the React + Inertia frontend handles:

• Rendering event, distance, and category information
• Building interactive registration forms
• Managing client-side validation
• Displaying confirmation and feedback screens
• Providing seamless navigation without page reloads
• Handling authenticated and guest views

Project Structure

A typical Inertia + React + Laravel structure looks like:

resources/
 ├─ js/
 │   ├─ Pages/
 │   ├─ Components/
 │   ├─ Hooks/
 │   ├─ Services/
 │   └─ app.jsx
 └─ views/

Laravel side:

routes/web.php
app/Http/Controllers/

How Inertia Connects Laravel and React

return Inertia::render('Events/Show', [
    'event' => $event,
    'distances' => $event->distancias,
]);

export default function Show({ event, distances }) {
  return (
    <div>
      <h1>{event.name}</h1>
      <DistanceList items={distances} />
    </div>
  );
}

When Axios Is Used

Even with Inertia, Axios is still useful for:

• Form submissions
• Registration endpoints
• Search features
• Admin actions

import { useForm } from "@inertiajs/react";

const form = useForm({
  first_name: "",
  last_name: "",
  age: "",
  email: "",
});

function submit() {
  form.post("/registrations");
}

Benefits of Using React + Inertia

• No duplicated routing layers
• No separate API required for internal pages
• SPA feel with no complex frontend build
• Laravel stays in control of routes and backend logic
• React provides a modern UI layer
• Excellent DX with Vite, hot reload, and simple structure