Welcome! This is part 5 of our course on how to build fullstack apps with Bolt and Supabase
If you’re just joining, I highly recommend you take the course in the correct order before diving into this one.
Here you can find Part 1, Part 2, Part 3, and Part 4.
Parts 1 and 2 are more theoretical, so you have a better idea of what is going on.
But starting part 3, we’re going into pure app building, so if you want to follow along and get your very own app by the time you’re done, then part 3 is the best place to start.
In this lesson, we'll take our calorie calculator app and refine and refactor the UI to make it look exactly as we want it to, while improving the UX
This will turn our simple project into a professional, polished, production-grade app, your style, your way with zero compromises on quality, aesthetics, or direction.
Tools We’ll Use:
Bolt
Let’s get started!
Enhancing the Login Page#
Let’s start by adding some empathy in the login page. Something to get people really excited to improve themselves and stay consistent with this healthy habit.
We can do that with rotating motivational quotes over the login container.
Currently, our app looks like this:
And here’s the prompt I gave to Bolt:
it looks great. But I think we can add a bit to it. Let's add some motivational quotes that will rotate on display on top of that form container . Left to right or right to left
And the result? This:
It looks good, but let’s refine it a bit. I want to remove the author and icon and make the text bolder and semi-transparent. Ideally, we want to improve the rotation effect, too.
Updated prompt:
