Muhammad Yasir Amin

Loading website…

More from Muhammad Yasir Amin

Build Along With Me

Practical walkthroughs on Laravel, React, APIs and deployment workflows.

Subscribe on YouTube

Modular Laravel + React Starter Kit

System Design ArchitectureModular monolithActive

Modular Laravel + React Starter Kit

A modular Laravel and React starter with authentication, permissions and an Inertia admin interface.

Foundation Kit combines Laravel, React, TypeScript and Inertia.js with a discoverable module structure, authentication, permissions, file attachments and shared admin components. Explore the source, request flow and deployment tradeoffs.

Modular Laravel + React Starter Kit
System PatternModular monolith
Technology Stack11+ Core Frameworks
Deliverables3+ Solutions Engineered
Deployment StatusActive
Architecture Document

Case Study Overview & Implementation

What Foundation Kit provides

Foundation Kit is a Laravel and React starter for applications that need a shared admin interface, authentication and feature modules. It connects Laravel routes to React pages through Inertia.js, with TypeScript, Tailwind CSS and shadcn/ui components. The existing portfolio implementation uses Laravel 12 and React 19.

The development problem

A new business application often needs the same supporting work before its first domain feature: sign-in, permissions, settings, file uploads and a consistent interface. This project packages those foundations with a repeatable module structure so application-specific work can build on an existing base.

How a module reaches the interface

Backend features live under app/Modules; React pages live under resources/js/modules. The module service provider discovers route files, migrations, commands and views. Web routes receive the web, authentication and verification middleware; API routes are registered separately under the API prefix. Feature-specific permission checks still belong in the relevant route or controller.

A typical request passes through a controller, validation request, repository and Eloquent model. Inertia returns the React page and its props from that Laravel application. A separate API remains useful when an independent mobile or public client needs one; Inertia does not remove that requirement for every consumer.

Included building blocks

  • Laravel Fortify authentication, including registration, password reset, email verification and two-factor authentication.

  • Spatie roles and permissions, with frontend permission hooks for interface visibility.

  • A polymorphic attachment model and reusable upload components.

  • Laravel Reverb integration for WebSockets.

  • Wayfinder-generated route helpers and TypeScript page components.

  • Application settings, an admin shell and development tooling for formatting, linting and tests.

Where to inspect the implementation

Start with ModulesServiceProvider for module discovery, then follow a module's routes, controller, validation and repository. Compare the matching React page to understand which data Laravel supplies and which interactions belong to the browser.

Browse the Foundation Kit source or view the Composer package. The repository README documents installation and development commands. For a container-based environment, see the separate Docker development setup.

Tradeoffs and deployment responsibilities

The modules run within one Laravel deployment and database boundary; module folders do not create independently deployed microservices. Teams still need application-specific validation, backend authorization, tests and operational configuration. A starter's authentication and tooling do not by themselves establish that a new application's deployment is secure or ready for its workload.

Backend

Php & Laravel 12,

Frontend

React 19, Typescript, Inertia.js for a single-page app experience without building an API

Custom module system

backend in app/Modules/, frontend in resources/js/modules/ (Dashboard, Privileges, AppSetting included)

Authentication

Laravel Fortify (registration, login, 2FA, email verification, password reset)

Roles & permissions

Spatie Laravel Permission (backend + frontend hooks)

Document Management

Morphable attachment system (AppAttachment), HasAttachments trait, and custom React file uploaders

UI

shadcn/ui (Radix) + Tailwind CSS 4

Type-safe routes

Laravel Wayfinder (generated route helpers for the frontend)

Real-time

Laravel Reverb (WebSockets)

Developer tools

Laravel Telescope, Pest PHP, ESLint, Prettier, Laravel Pint

App settings

Backend-managed logo, site name, and general settings (used on welcome page and app shell)

Visual Deliverables

Project Gallery & Screenshots

3 Visuals
Screenshot 1 for Modular Laravel + React Starter Kit
Screenshot 2 for Modular Laravel + React Starter Kit
Screenshot 3 for Modular Laravel + React Starter Kit

YouTube Channel

Build Along With Me

Practical walkthroughs on Laravel, React, APIs and deployment workflows.

Muhammad Yasir Amin
Available for Contracts
Author & Solutions Architect

Senior Full Stack Engineer

Independent Senior Full Stack Engineer working on Laravel, React and Next.js applications, APIs and delivery workflows.

Laravel & PHP ApplicationsReact & Next.js InterfacesREST APIs & IntegrationsDatabase Queries & DebuggingDocker Development WorkflowsClear Scope & Handover
Discuss Your Next Step

What Does Your Application Need Next?

Share your current system, the problem you want to solve and what a useful result looks like. We can identify the right starting point and agree on a practical scope.

Technical Audit

Find the Next Useful Fix

Application Development

Scoped, Reviewable Milestones

Ongoing Support

Agreed Capacity and Priorities

Share your goals, current stack and requirements before the call.