Laravel 12 & React: Build a Social Media App with Inertia

Create your first React page components (Home, About) and render them from Laravel routes using Inertia::render().

Implement client-side navigation using Inertia's Link component for instant page transitions without full page reloads.

Learn web URL conventions and convert your routes and page names to kebab-case for better SEO and readability.

Build a layout component to share common UI elements like headers and footers across multiple pages using React's children prop.

Master React props and the special children prop to create flexible, reusable components.

Use php artisan make:model to create the Post model and migration, define the database schema, and test with Tinker.

Create PostController with show method, use route parameters to fetch posts, and pass data to React components via Inertia.

Install Laravel Telescope to monitor database queries, requests, exceptions, and debug your application in real-time.

Create an index method to fetch all posts for the social feed, define TypeScript Post interface for type safety, and display posts in a list.

Apply Tailwind CSS utility classes to style your social feed and create a modern, Twitter-like responsive design.

Extract navigation into reusable React components: AppHeader, AppHeaderLink, and AppHeaderLogo.

Build a create form using Inertia's Form component, handle POST requests in Laravel, validate data, and save to database.

Show Laravel validation errors in React using Inertia's form errors, install clsx and tailwind-merge for the cn() utility function.

Add user_id foreign key to posts table, define hasMany/belongsTo relationships between User and Post models.

Create PostFactory to generate fake posts with faker, update DatabaseSeeder to create users and posts together.

Use ->with('user') to eager load post authors, prevent N+1 queries, add User type to TypeScript, and display author names.

Handle missing user_id errors by making the field fillable and adjusting queries to prevent crashes.

Learn about shadcn/ui component library and why it's perfect for building professional Laravel and React applications.

Run npx shadcn@latest init to install shadcn/ui, configure components.json, and set up CSS variables in app.css.

Learn how Tailwind CSS v4 @import, CSS variables (--background, --foreground), and shadcn/ui themes work together.

Use npx shadcn@latest add to install Button and Card components, understand component variants and Radix UI primitives.

Replace custom HTML and styles with shadcn Card and Button components throughout the application.

Install shadcn Input, Textarea, and Label components, create custom InputError component, and rebuild the create post form.

Overview of the commenting feature we'll build including models, migrations, and user interactions.

Use php artisan make:model Comment with migration, controller, factory, and request classes following Laravel conventions.

Define relationships (Comment belongsTo User/Post, Post hasMany Comments), add foreign keys to migration.

Configure CommentFactory to generate fake comments with body text, update DatabaseSeeder to create comments for posts.

Implement CommentController store() method to validate comment body, post_id, and save comments to database.

Define Comment TypeScript interface with id, body, post_id, user_id, and timestamps for type-safe React components.

Redesign posts/show.tsx page using shadcn Card components for cleaner, more professional post display.

Create reusable CommentForm component with Textarea and submit button, CommentCard to display individual comments.

Load comments with their authors in PostController using ->with('user'), pass comments array to React.

Add comment store route, connect form action to route, test end-to-end comment submission.

Use Inertia::defer() to load comments count asynchronously after initial page load, improving perceived performance.

Use Form render props (wasSuccessful, recentlySuccessful) to clear textarea after successful comment submission.

Use Inertia form onSuccess event to scroll to comments section after submitting, improving user experience.

Install Sonner toast library, create Toaster component, show success toast when comment is added.

Understand why Inertia reloads all props (including deferred ones) on validation errors and how to handle this behavior.

Use router.reload() with setInterval to poll for new comments every 5 seconds, updating the UI automatically.

Refactor comment rendering into CommentList component for better organization and reusability.

Compare previous and current comment counts, show toast notification when new comments are detected during polling.

Replace useState with useRef to track comment count without causing re-renders, prevent notifying users about their own comments.

Create LoadingCard skeleton component, show it while comments are being fetched during initial load.

Plan the like system including database design, relationships, and user interface requirements.

Create Like model with post_id/user_id, migration with foreign keys, define relationships (Post hasMany Likes).

Install Laravel Wayfinder to generate type-safe route helpers in TypeScript, update existing routes to use route() function.

Use ->withCount('likes') in PostController to efficiently count likes for each post, display count in UI.

Query relationship existence with ->exists() to determine if the current user has already liked a post.

Build LikeButton React component with Heart icon from lucide-react, props for count and liked state.

Create PostToggleLike invokable controller to toggle likes (firstOrCreate/delete), add route with auth middleware.

Use Inertia::defer() to load like count and user_has_liked status, handle loading state in LikeButton.

Use router.post() to toggle likes via AJAX, implement optimistic UI updates for instant feedback.

Plan the authentication system including registration, login, and protected routes.

Create LoginController and RegisterController shells, build form pages using shadcn components and auth-layout.

Implement RegisterController store() method to validate input, hash passwords with bcrypt, create users, and log them in.

Implement LoginController store() method to validate credentials, use Auth::attempt(), regenerate session for security.

Add 'user' to shared Inertia data in HandleInertiaRequests middleware to pass authenticated user to all pages.

Use Inertia's usePage() hook in React to access shared props.auth.user in any component.

Show "Login" and "Register" links when logged out, show user menu when logged in using conditional rendering.

Install shadcn DropdownMenu, create UserDropdown component with logout button, implement logout route.

Create UserResource to control which user fields are exposed to frontend (hide email, password), prevent over-sharing.

Automatically set user_id from Auth::user()->id when creating posts and comments, remove user_id from fillable.