Bolt

How To Build Beautiful, Responsive UIs in Minutes With Bolt

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.

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 

 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.

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.

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

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.

Okay, let's remove the author and the icon. I want the quote to be a bit bolder and semi-transparent.

And make it so the quotes are constantly, slowly rotating, and when one quote overflows on the left, the start of the next quote starts appearing on the right.

Also, let's make the container a bit wider

Exactly as we wanted it, even with this slightly tougher to explain feature!

It looks nice, but I think it would look even better if we added a light gradient or some kind of pattern to add a bit of depth.

Nice! Now let’s improve the background a bit. Let’s add some depth by adding a light gradient or subtle pattern

Next up, instead of separate Log In and Register tabs, let’s combine them into one tab with a button for logging in and another for registering.

Now let's get rid of the Log In and Register tabs. Let's do both in the same tab. Have the form with 2 buttons instead of 1. Log In Button should remain as is and underneath it, add the register button which will be outlined instead of full

The result looks great! But the buttons feel a bit bland to me. Let’s tweak them a bit and make them really 

let's also make them rounded and add a slight shadow or gradient to make them pop

Now, while we’re at it, let’s try something a bit more edgy, shall we? What do you think would happen if we asked it to give us a dark mode option?

Looks awesome! Now let's add 'dark mode' to the app. I want a way to switch it on and off both in the auth screen and in the calorie counter screen

Now we have this button with a moon icon at the top right.

 better than I expected. Looks really techy actually.

Remove The “Wait, What Did I Type? Let Me Rewrite It from The Start” Problem

Look, I’m a fast typer. But this comes with a slight drawback. Sometimes, when I’m typing something, I might press two neighboring buttons at once, by mistake - or I might 

So, let’s add a way to show the password so that we don’t have to re-type the whole thing from scratch.

Nice! Now can you add a 'show password' icon in the password field so that I can see the password when I click it?

As you can see, it adds an icon within the input field. And if I go ahead and click it…

I can finally see my password (which I need to work on probably)

Anyway, let’s move on to the main screen now.

Currently, the main screen in our app looks like this:

If you’ve been through our previous lesson where we built the UI, you’ll see that it’s now somewhat different.

It has inherited the gradient, rounding, and pattern from our previous prompt when we were working on the Auth page.

Still, to be honest with you, it could use some work.

And we’ll do that starting with the section width. While it looks great on mobile, it just feels too wide for a desktop app.

The main section looks great on mobile but it's too wide for desktops. Can we narrow it down?

Now that we have a better structure in our app, let’s make the fonts a bit better. And why not add some icons while we’re at it?

Awesome! Now let's make the fonts a bit more modern. They look kinda basic.

And let's add an icon or emoji next to each meal label while we're at it

It already looks much more polished even with those tiny changes. But we’re only getting started.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How To Build Beautiful, Responsive UIs in Minutes With Bolt

Tags

Tools

Level

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript