The Laravel Workshop

Explore the Figma design to learn spacing, layout and key UI elements—align visual goals before rebuilding your app's interface.

Start a Vite dev server, scaffold a Tailwind-ready project, and set up a local playground to speed frontend development and gain confidence.

Customize Tailwind config to match your design system, tweak colors, spacing, fonts, and shadows to turn Figma into production-ready code.

Build a responsive two-column login screen layout using Tailwind flex utilities to match the original UI's proportions and structure.

Implement primary and secondary login buttons with hover and disabled states, consistent spacing, and accessible interactive styling.

Recreate the login screen's vertical word stack using a flex-column trick, custom tracking, and sizing. Follow a clear, hands-on walkthrough.

Make your login screen fully responsive across breakpoints with stacking behavior, refined spacing, and final cleanup for a clean, consistent UI.

Learn to build a responsive 3-column app layout with CSS Grid—scaffold sidebar, feed, and profile panels fast with clear, practical steps.

Build a polished left sidebar with navigation links and refined styling, creating a balanced, connected UI for your app screen.

Build a top app navigation bar: position it, manage z-index stacking, and ensure a consistent, responsive UI across pages.

Build an inviting new-post prompt with placeholder text, avatar placement, and refined spacing and borders—practical UI/CSS tips for your feed.

Create a polished post UI with avatar, author info, timestamp, and responsive spacing—step-by-step CSS/HTML guidance to match your design.

Extend your post UI with nested replies—learn indentation, visual separation, and scalable thread structure for clean, maintainable discussions.

Add a responsive reply form beneath posts - ensure smooth layout flow, clear visual hierarchy, and practical CSS/UX tips.

Polish your app layout for all screens—tighten spacing, refine mobile styles, and apply final responsive tweaks so the UI snaps into place.

Design a distinctive profile header with avatar, user info, and subtle background treatments—polished UI tips to give profiles unique identity.

Install Laravel into an existing repo - set up the app, configure the dev server, and serve feed and profile views step-by-step.

Extract navigation and aside into reusable partials and layouts, learn how to componentize your app markup for cleaner, maintainable views.

Build an 'Artists to Follow' reusable Blade component to display curated artist suggestions, simplify sidebar UI, and boost engagement.

Refactor duplicate post/reply markup into a reusable Blade partial to simplify views, cut duplication, and speed up Laravel maintenance.

Extract and build a reusable feed-item Blade partial to display PIXL feed items, supply mock data, and prepare your app for real content.

Extract reply markup and update your data structure to generate feed replies, treating them like posts to streamline your Laravel feed.

Build a Profile model in Laravel: split User/Profile, add one-to-one relation, migration, factory, fillable fields, and Faker avatars for tests.

Build a Post model that handles posts and replies using nullable parent_id, add Eloquent relations, migration indexes, and a reply-ready factory.

Create Like and Follow models with migrations, constrained FKs, unique indexes and Eloquent relations to prevent duplicates and power social features.

Model reposts as posts in Laravel: add repost_of_id, nullable content, self-relationship, tweak factories and tests to support quote/plain reposts.

Learn to publish posts in Laravel: add a Post::publish method, scaffold Pest tests, run migrations, fix factories, and pass them.

Implement a reply method so profiles can reply to posts, link replies to originals, and verify single/multiple replies with tests.

Learn how to implement reposts in Laravel: create a repost factory/method, handle plain and quote reposts, wire relationships, and pass tests.

Prevent duplicate reposts in Laravel by adding a DB unique constraint (profile_id+repost_of_id), using firstOrCreate, adding removeRepost and tests.

Implement likes in Laravel: add Like::create/remove, enforce DB uniqueness, and test counts to prevent duplicate likes.

Add profile following in Laravel: enforce unique follows, prevent self-follow, implement createFollow/removeFollow with tests for toggle behavior.

Seed the database with about 20 profiles, posts, likes, follows, reposts and replies for realistic test data, then run php artisan db:seed.

Build a ProfileController and profiles.show route, eager-load counts and top-level posts, add cover image support and view partials.

Build a 'Replies' profile page: fetch posts with a user's replies, eager-load profiles/counts, add route/view, and convert to Post/Reply components.

Extract a Profile Header component, gate engagement buttons with a showEngagement prop, and prevent replies appearing on posts pages.

Show threaded posts in Laravel: add PostController/posts.show with route model scopes, eager-load relations and counts, and support nested replies.

Finalize the Artists-to-Follow component: implement real profile suggestions for both signed-in and anonymous users to boost engagement.

Learn to build a timeline query that aggregates posts from followed profiles—reposts, replies, and likes—so signed-in users see relevant activity.

Learn to build Laravel Request objects, controller methods, and Blade components to create posts—practical, step-by-step guidance for developers.

Add reply functionality to posts in Laravel: build components, routes, and handlers so profiles can reply - hands-on, step-by-step guidance.

Implement repost, like, and follow UI in PIXL—learn practical, step-by-step wiring to activate social interactions quickly and confidently.

Delete posts, unlike content, and unfollow users in PIXL—follow a friendly, step-by-step guide to wire UI and backend actions fast.

Build reusable Blade social buttons for like, repost, and follow—learn component structure, props, and markup for clean, maintainable UI.

Refactor partial views into Blade components—clean up your Laravel project for clearer, reusable UI and easier maintenance, step by step.

Refactor controller queries into query classes to simplify logic, improve testability, and keep your Laravel code clean and maintainable.

Join Jeffrey Way in Section 3: clone Simon and Jeremy's work, install dependencies, and add a composer format task to run Pint and Rector.

Build the VILT stack—Vue, Inertia, Laravel, and Tailwind CSS. Follow step-by-step setup and configuration to get a modern full-stack app running.

Migrate Blade feed views into Vue single-file components with a friendly, step-by-step workflow for converting each file.

Use Laravel's route() for hrefs and learn Ziggy to access named routes in JavaScript—keep URLs consistent and maintainable across your app.

Turn SVGs into Vue components to hide markup, enable reusability, accept props, and simplify your UI with clean icon components.

Learn how to use Laravel API Resource classes to shape and secure data for SPAs—send only what clients need with clear, testable responses.

Build a dynamic 'create post' form with Inertia 2's Form component—streamline validation, state, and submissions for faster development.

Create a reliable Post item component: render likes, reposts, and replies with accurate counts, clear labels, and responsive UI patterns.

Build post replies and interactive reply forms: toggle reply UI on button click, add threaded commenting with a hands-on demo.

Create a single-post page that shows a post and its replies — hands-on guide to routing, views, and loading them.

Add accessible dropdown menus for post actions using Headless UI — implement view, delete, and other links quickly with minimal code.

Build user profile pages: clicking avatars navigates to a profile showing bio, replies, and activity - a hands-on guide to routing and views.

Wire up the follow/unfollow form to the backend—learn to submit requests, update the UI, and enable profile follows instantly.

Show instant user feedback with FlashMessages—display temporary alerts after actions like posting, following, or updating a profile.

Add a polished splash marketing page by cloning Simon's repo—create a welcoming, conversion-focused landing page for guest users.

Jump-start your browser testing: follow hands-on examples and ready-made test files to structure a scalable test suite and speed up real-world QA.

Deploy Pixl to production with Laravel Forge - step-by-step, easy setup so you can push your app live confidently and quickly.

You've finished the series — now take control: get recommended feature projects and practical guidance to build, learn, and ship.