Skip to content
Lovable Academy
3

Build the skeleton

Your preview should be filling in right now.

Sidebar on the left with category filters. Header across the top with the app name and a "Submit Idea" button. Five placeholder cards in a vertical list, each with a vote count, title, description, category badge, and status label. Sort dropdown above the list. The bones of the app, all there.

If Lovable is still generating, give it a moment. When it finishes, look at what you got. Not for beauty, but for structure. Is the sidebar where it should be? Are the cards stacked in a list? Is the submit button visible in the header? Is the sort dropdown above the cards? If yes, the skeleton is correct.

Now here's the hard part, and it takes real discipline: do not touch the colors. Do not adjust the font sizes. Do not refine the spacing. Not yet.

You're about to add a submission form, voting logic, a database, and user authentication over the next several lessons. Each of those will shift the layout. If you spend twenty minutes perfecting card shadows right now, you may end up redoing that work later. We've already talked about the house analogy. Right now you're framing walls. The paint comes in Lesson 9.

The rule is skeleton, then function, then polish.

The only fixes that belong at this stage are structural ones. If the submit button ended up buried in the wrong place, or the sidebar is too wide, or the sort dropdown landed below the cards instead of above them, fix that now. Otherwise, leave it be. Something like:

PROMPT

Move the sort dropdown and "Submit Idea" button into a toolbar row above the request list, side by side. Make the sidebar collapsible on mobile and narrow on desktop.

That's structural. It belongs here. "Make the cards have nicer shadows" does not. We'll get there.

Click around. Try the sidebar filters, sort dropdown, and submit button. Most things probably don't work yet, and that's fine. The skeleton is about layout, not behavior. Now, it's time to work on behavior.