Design with Prompts

Download source code here

Transcript

[00:00:00] Today we're going to do something fun. We're going to build this digital piano using just prompts within 10 minutes. And this piano, you can play it as you can hear it. And you can also play it on your keyboard.

How cool is that? Let's get started.

First thing we're going to do is copy our code from the Next. js website and we are going to open our terminal

and within my terminal I'm going to paste this command and say piano and I will say yes to all the other options, and That should get the project up and running.

Okay, so now that's ready. What I'm going to do is go to cd piano and I am going to open it in cursor And I will close this so I don't need the terminal anymore. Okay, so now that I'm in my cursor, I am going to open my page. [00:01:00] tsx as usual, and I can open my terminal and I will say npm run dev for me to see what's happening on the browser.

So I'm going to open this, and I can see that it's a basic Next. js application, nothing fancy.

The first thing we're going to do is to come up with the piano itself. So the piano itself, we are not going to design in cursor, but we are going to do it in v0. So I'm going to go back to my browser and type v0. dev.

I wanted an idea of how the piano should look like. So I made this on Figma. So what I'm going to do is just copy this. I'm going to hit command shift C to just copy the piano, go back into V0 and just paste it and that should paste the image over here.

And I'm just going to say design this piano as attached. And that's it.

Now V0 will do most of the other work and it will come up with a design that we can use

now you can always go and [00:02:00] ask for the tweak. So you could be like do not show the notes on the key

great. And then make it full width and place it in the bottom of the screen.

I actually don't like this. I'm just going to go back and say retry on the previous one. And that way you can actually go back to the previous one that it came up with. I think I'm just going to use this for now and I'll try to position this in the bottom within cursor.

So I'm going to go and say, add to code base and just copy this thing. And, and I can go back into cursor. And then what I have to do is create a new terminal here and just paste this thing over here. And it will say, do I need to install a component? And I will just say yes.

And I am just going to say yes for everything else. So now what it did was, if you see in my app, now there is a file called components and there is a [00:03:00] piano. tsx. I will run this first on the browser. So I think it's already running. So I'm going to go back into where my program is running.

And I am going to open my composer and say open my page. tsx and say that, show the piano, tag this file, piano. tsx, show the piano on the home page, remove everything else.

And what it should do is just do as I asked and just show me the piano. And now you can see the piano on the home page.

So first thing I'm going to do is to move the piano to the bottom of the screen. So I'm going to go back into cursor and select my piano. tsx and say, move the piano to the bottom of the screen and let's see what happens.

And that should take care of the positioning. And once I refresh, you can see that everything else is working fine

so now what I will do is I will also double the number of keys. So it looks a little bigger than [00:04:00] this. So I can go back to this composer and say, now double the number of keys on the piano. And that should pretty much take care of things. I don't have to say anything else.

And I will accept it and go back and there you go. I think this is a pretty neat looking piano already.

So the next thing I'm going to do is I'm going to go and include the sound. So when I press on one of the keys, I want the sound to play. So to do this all you need to know is we will be using a library called ToneJS. And this takes care of everything. It has all the, sounds that you need pre installed and you don't have to do much.

You just have to say, use this package and just make my piano work. That's it I'm going to say, when I press on a piano key I want to play the corresponding sound using ToneJS. And I would also say use the notes from a grand piano.

We're going to [00:05:00] accept these changes and we will install the Tone package that it is asking me to do.

And I'm going to go back into my terminal and I will install this package. Now this error should go on its own. And now I can, let me see if everything's working fine. I can go back and refresh and

perfect.

It was that easy.

So now that our piano's basic functionality is working, I'm going to say, remove the background, behind the piano and once I go back, okay, now that's a clean looking piano. Now I'm going to add some lines to the piano for each key, and we can add a stroke color to those lines. So it looks a little more real like when you're pressing a key and you can see the visual of the line. So let's do that.

In my composer, [00:06:00] I am going to say create a vertical line from the bottom to the top of the page with the color 353535 now repeat the same line and evenly space it horizontally. have as many lines as the number of keys in the keyboard.

And it's using CSS to create these lines and position it evenly across the piano. This is perfect. And I will say yes and go back and you can not see the lines. So let's see, the lines are not visible because they are being rendered behind the piano keys. Let's adjust the code.

Okay. I'm going to say yes, and hopefully they should be visible now. Oh, I see the lines, they are on the keyboard. I would say the lines should be behind the keyboard. But on the full screen. Not on the keyboard

See, I think it's like how well you describe it is how well it will [00:07:00] respond. So there you go.

So now what we're going to do is just create a margin around the the background lines so we can try to fit the background lines within the width of the piano. So we can do that by going back into cursor and let's make sure we select all the files that we need. So we need to select background lines and piano.

Once we do that, now I want to say, create a margin, on the left. and right of the background lines container. When I go here, I can see there is a margin, increase the margin I can see that now the margins have increased. It's over here. It's not so visible, but let's go and see where it did this. It increased the, margin on both the background lines and piano components. We'll update MX4 class to MX8 for larger margin

So let me make it mx16 and I can see the margins are already increasing more. So I'm going to make 28. This is exactly what I wanted. And um, [00:08:00] and now the keys are also working perfectly

Now the last thing we're going to do is we're going to map each key to a key on the keyboard. So when we play on the keyboard, the notes should play.

We're going to go back to our composer and we are going to clear, clear it out. And we will say let's make sure we tag our piano and tag our page. So it knows we are working within these files and we are going to say for each key on the piano. Assign a key on my keyboard when I press the key, play the note

I'm going to accept the changes, and go back and see,

That's very cool! Literally you can use your laptop keyboard as a keyboard and play music out of this

now you could add a lot more visual detail if you want, you can make the lines fade out to black if you had some [00:09:00] understanding of how CSS classes work or how basically the code, structure is, you can get into a lot more granularity without having to know JavaScript or without having to know how to write math or logic or any of this, you know?

And that is actually very easy to learn. It's not very hard to modify some of the tailwind CSS classes or one of these things. So, This video is not going to go into any of the code stuff. So I'm going to stop here and I will see you in the next video.

Thank you for watching.