Frontend Mentor Challenge with Laravel

We kick things off by reviewing the Frontend Mentor challenge requirements and unpacking the provided design and asset files. This lesson sets expectations for the series, clarifying that the goal isn't pixel perfection, but a thoughtful, maintainable Laravel implementation. We explore the project structure, identify the key UI pieces, and outline the backend features we'll need to support the cart and order flow.

Starting from a blank slate, we spin up a fresh Laravel project and get our development environment ready. We walk through the default structure, discuss what Laravel gives us out of the box, and trim away anything unnecessary. This sets a clean foundation for building features incrementally without fighting framework defaults.

With the design specs in hand, we translate the provided style guide into a Tailwind-friendly system. Colors, spacing, and typography are mapped into utility classes so the UI stays consistent without custom CSS bloat. This step ensures that every component we build later feels cohesive and intentional.

We introduce our first real backend feature by creating a Product model and database migration. This lesson covers schema design, field choices, and how product data will flow through the app. By anchoring the UI to real models early, we avoid fake data hacks and keep everything grounded in Laravel.

Rather than manually creating records, we seed the database with realistic product data. This makes development faster and more enjoyable, while also reflecting how production apps bootstrap their data. Seeders give us a repeatable way to reset and test the application state.

We build the core page layout and introduce the product grid that drives the entire experience. Using semantic HTML and Tailwind utilities, we create a responsive structure that adapts cleanly across screen sizes. This becomes the backbone for everything else in the UI.

Each product is refactored into a reusable Blade component with proper semantic markup. We focus on accessibility, clean structure, and predictable data flow, ensuring that each product card is easy to reason about and extend later.

With structure in place, we refine the visual styling of the product cards. Spacing, hover states, and visual hierarchy are dialed in to match the spirit of the design. This lesson is about polish--making the UI feel intentional without overengineering.

We design and implement the empty cart state, ensuring the UI communicates clearly when no items have been added yet. Rather than treating this as an afterthought, we make it feel like a first-class part of the experience, guiding users toward their next action.

It's time to model the cart itself. We introduce Cart and CartItem models and define their relationships, laying the groundwork for quantity management and totals. This lesson focuses on clean data modeling that supports future flexibility.

Instead of tying carts to users, we implement a session-based cart system. This approach keeps things simple while still supporting all required features. We explore how Laravel sessions work and why they're a perfect fit for this type of interaction.

We add safeguards to ensure a cart always exists when needed. Whether a user is adding their first item or returning mid-session, the app reliably resolves a valid cart instance. This eliminates edge cases and keeps controller logic clean.

In this lesson, we wire up the core interaction: adding products to the cart. Routes, controllers, and form submissions come together to increment quantities and persist state. The UI immediately reflects backend changes, reinforcing a tight feedback loop.

To prevent stale data buildup, we introduce a cleanup strategy for abandoned carts. Using a scheduled command, old carts are pruned automatically. This mirrors real production concerns and shows how Laravel handles background maintenance elegantly.

We calculate and display the total number of items in the cart, surfacing this information prominently in the UI. This small feature dramatically improves usability, giving users constant feedback as they interact with the product list.

The cart comes alive as we build the active cart UI. Items, quantities, and totals are displayed clearly, and the layout adapts naturally as content changes. This lesson focuses on making dynamic data feel stable and readable.

We continue refining the cart interface, improving spacing, alignment, and component structure. Small tweaks compound into a much smoother experience, highlighting how UI polish often comes from iteration, not rewrites.

Users can now adjust quantities directly from the cart. We implement increment and decrement controls, wire them to backend actions, and ensure edge cases are handled gracefully. This creates a responsive, predictable cart experience.

We refine quantity logic so decrementing an item to zero removes it entirely. This lesson focuses on aligning user intent with backend behavior, keeping both the UI and data model intuitive and consistent.

In addition to quantity controls, we add an explicit way to remove items from the cart. This gives users clear control and avoids forcing them into repeated decrement actions. It's a small UX improvement with a big payoff.

We introduce the native HTML popover element to display the order confirmation UI. By leaning on platform features instead of JavaScript-heavy modals, we get accessibility and behavior for free. This lesson shows how modern HTML can simplify complex interactions.

We enhance the confirmation popover with smooth enter and leave transitions. Using modern CSS features, the modal feels responsive and polished without introducing JavaScript animation complexity.

The order confirmation screen comes together with icons, summaries, and totals. We extract components, clean up markup, and ensure the layout scales gracefully as content grows. This is where the experience starts to feel complete.

Clicking "Start New Order" now clears the cart entirely. We implement a backend endpoint to delete cart items and carefully manage UI state so the app resets cleanly. This lesson highlights how small oversights can create subtle bugs--and how to fix them methodically.

We do a full responsive pass, testing the layout across screen sizes and edge cases. Adjustments are made to spacing, scaling, and scrolling to ensure the experience holds up everywhere. This is practical, real-world responsive tuning.

Interactive elements get their final layer of polish with thoughtful hover and focus states. We fine-tune buttons, icons, and borders to provide clear feedback while staying within the design system. Subtle details make the UI feel finished.

In this bonus lesson, we walk through deploying the project to Laravel Cloud. Unfortunately we're not able to submit the challenge as the live site URL doesn't allow projects hosted on Laravel Cloud. Ah well!