In this episode, we set up the very first version of our products page for the app. Here's how we go about it:
First, we start with creating a new controller just for displaying the list of products. We make sure only authenticated users who have enabled Stripe can view or manage products, so we add the relevant middleware. Next, we build a new Blade view for the product index and hook it up to its own route (i.e., /products
).
To keep everything tidy in our UI, we update both the desktop and mobile navigation so that there's a clear link to the products page right from the dashboard.
Now for the database work: we set up the products
table migration, making sure each product is connected to a user. Products get a title, unique slug, description, price (stored in cents for accuracy), and a live
boolean to indicate if they’re published yet. We also set up the Product
model and its relationship with the User
model—so each user can own many products.
Once that's done, we update the controller to grab all the authenticated user’s products (ordered with the newest first) and pass them to the view. Since we don't have any real products yet, we manually create a couple in the database for now.
On the frontend, we loop over all the products and display them in a nice responsive grid using Tailwind CSS. The grid adapts between one column on mobile and three columns on larger screens. Each product is shown simply by its title (but you can easily add prices or other details). There’s also a button at the end to add a new product, styled to match the rest of the layout.
That’s the basic setup! Now you have a working products page, ready for listing items and jumping off into product creation and editing in future episodes.