How to Build & Sell Web Apps With AI Without Coding (FULL COURSE)

We have entered an era where anyone can build powerful websites and apps simply by speaking their ideas into existence through AI.

And what used to take months and tens of thousands of dollars can now be done in minutes. And mastering the skill of vibe coding, or as I prefer, software composing, is undoubtedly one of the most valuable investments that you can make in your future today.

I know this because over the past 2 years, I've gone from knowing nothing about AI to building multiple AI businesses that have generated over $6 million in revenue for me. And along the way, I've helped over 200,000 entrepreneurs in my community to learn AI skills like this.

And more importantly, use those skills to solve real problems in the world and generate income from it. And if I had to start over again today, this skill of using AI to build websites and apps, aka software composing, is exactly what I would be going all in on right now.

So, in this full course, I'm going to teach you everything that you need to build complete websites and web applications using nothing but natural language prompts.

No coding experience required.

Then I'll share the exact strategies my community and I use to turn these skills into real income because building them is only half of the equation.

And as you can tell by the length of this video, we get a lot to cover.

So this is going to be unlike any other guide anywhere on the internet on this topic.

So I'm going to be splitting it into three powerful chapters.

In the foundations chapter, we'll master the essential theory behind web app building and the key terminology that will allow you to explain to the AI what you want.

and instantly put you ahead of 99% of people who are trying to build with AI.

Then in the building chapter, we'll transform that knowledge into action by creating a fully functioning SAS app step by step over my shoulder using an incredibly intuitive tool that makes the process dead easy. As we go, you're going to develop real hands-on skills and build actual projects that you can immediately customize and monetize for yourself.

And finally, in the monetization chapter, we'll explore the massive market that is waiting to be captured.

and I'll be revealing exactly how people in my community are converting these skills into $5,000, $10,000, $15,000 projects and my proven method for getting your first few clients with zero social media and zero paid ads.

And of course, if you're new here and don't know who I am, my name is Liam Ollie and as I said, 2 years ago, I knew nothing about AI. I started my journey here on YouTube, which led me to launching Morningside AI, which is my AI agency.

Um, and then I built my own SAS agent which has over 70,000 users and then grew my online community where we are now the number one AI business community anywhere in the world with over 200,000 people. I teach people like you and nontechnical people especially how to learn AI skills and monetize them, build a business around them.

And that's really my focus in that community and everything I'm going to be sharing with you today comes from being in the trenches with the stuff every day at my agency, Morningside AI, and by working closely with students who are also doing it in their agencies. So, so if you want more information about me and want to learn more about my story, I'll link my my story video in the description below.

But without further ado, if you are ready to harness the potential of this new software composing skill, let's get into it.

All right, so before we can get into the building, we need to lay a proper groundwork first.

So, welcome to chapter 1, foundations.

I know how tempting it can be just to jump straight into prompting and building. Um, and a lot of other guides out there that you may find on this topic will do just that, but it's a shortcut that leads to ultimately getting stuck when you are building.

So, they might show you how to build one specific thing, but you never learn why it works, which limits what you can create on your own after those tutorials.

So, we're going to be doing it differently.

My promise to you in this course is that I'm going to help you to become a true software composer, someone who can build powerful custom applications because you actually understand the core principles of what you're doing.

This foundational knowledge is what is going to separate you from 99% of people who are just blindly throwing prompts at AI and this is going to be your unfair advantage in this market.

So in this chapter you're going to master the essential concepts that make up any web application.

We're going to be exploring firstly what is software composing this revolutionary new way to build software using natural language and why it's one of the most valuable skills that you can learn today.

Then we'll get into what a web app is.

We'll get clear on what we're actually building and how it differs from just a simple website and how they're so much more powerful.

Then we'll go into the front end versus back end where you'll learn the two different sides of every app, what the user sees and the engine that runs all of that behind the scenes. Then we'll get into databases.

We're going to demystify how software remembers information from user accounts to product listings.

Then there's a section on APIs where you'll understand the magic of how different parts of an app and even different parts of other apps can communicate with each other over the internet.

And finally, we'll be getting into authentication and authorization where we'll cover the mechanisms that allows users to sign up to login and how to control what they have permission to see and do within your app.

So, by the end of this foundations chapter, you'll have the vocabulary and the mental models to be able to build with AI confidently and effectively.

So, let's get started with the big idea that makes all of this possible, which is software composing.

So, now that you understand the incredible potential that we're dealing with here, the ability to be able to translate your ideas into code and and build real revenue generating software, let's dive into what this transformation actually means and why it represents such a massive opportunity for anyone who's trying to not only get into AI, but to build a a career for them in the AI era.

And this skill in particular is going to be one that will change the trajectory of many lives and careers, whether you're a student, an employee, or an entrepreneur. It was Andre Karpathy, one of the founders of OpenAI, who coined the term vibe coding.

And he was describing a fundamental shift from writing software from scratch to building it with natural language and speaking into computers and using AI to do that for you. But I actually prefer the term software composing uh since the creative process that you go through that I'm going to teach you is a lot more like composing than coding necessarily.

You can think of traditional coding as like being a construction worker and you need to kind of build everything yourself.

mixing concrete from scratch, pouring the foundation and building up the walls, laying the plumbing, wiring, electric, etc. But software composing is more like being an architect who kind of describes the vision to expert builders who can handle all the complex stuff for you.

So, you're not just getting help with code, you're stepping into a creative role and where you describe what you want the software to do and how it should feel and and how to use it.

And then the AI handles all the behind-the-scenes tech work for you.

This isn't just about speed.

It's about who gets to participate in building the digital world.

So, here's how software used to get built. Someone had an idea for an app. They write detailed specs about what it should do and and how it should work.

Then designers create mock-ups and wireframes for the UI.

That's 2 to 4 weeks right there.

And then next, the developers are going to analyze everything, choose the programming languages and frameworks.

Another one's 2 weeks. And then comes months of actual development.

And after all of that, then you've got testing and debugging uh for another few weeks after that.

So, finally launching the app out to the world might take you another week or two.

So you're looking at 3 to eight months costing potentially $50 to $500,000 depending on the complexity of the software of course. And all of this requires multiple software and design specialists.

Now here's the new way that it works with the software composing revolution.

You have an idea, you describe it to an AI system in plain English or whatever your native language is, as I'm going to show you how to do later in this video. And then this AI system creates a working prototype for you immediately.

And then you're able to refine it further through conversation.

And then you can share it with the world in just a single click. So this shrinks the timeline to days or even hours for simple projects.

And as for the cost, the tool that I'm going to be showing you how to use in this course cost as low as $20 per month. So for the first time in human existence, a non-developer, a non-technical person, like basically the whole world, can build an entire app for the cost of a freaking pizza.

So what's really happening here is that the person with the idea can now be the person who builds it.

So this revolution we're seeing isn't magic. It's the result of three major breakthroughs that are just coming together basically at at the right time.

So firstly, you've got the AI boom, which you probably heard about by now.

You got tools like chat GBT.

And they didn't just learn how to write and make poems for you. They also learned how we built. So when you say, "I want users to upload photos." The AI understands everything that involves like saving files and creating upload buttons and making sure that it all runs smoothly.

It knows what you mean and and how to make it real through code.

Secondly, we have purpose-built tools for this software composing.

You have platforms like bolt and cursor and replet agent and they weren't retrofitted with AI. They were made from the ground up for this new way of creating where basically you just describe what you want and the system builds it.

These tools are the essence of software composing or what some call vibe coding.

And the third factor is invisible infrastructure.

So these modern platforms now handle all of the hard stuff for you when it comes to building automatically.

There's no server setup.

There's no uh complex configurations.

You just get to focus on what your app should do and the rest just works.

So, we're basically witnessing the democratization of software creation.

And most people don't even realize it yet. As they say, the future is already here. It's just not evenly distributed yet. And this is the future right here. This skill of everyone being able to do this and build their own software when they need it.

So, you're really getting a head start on everyone else. So, with this skill, if you figure it out now, you can become the AI person at your company as businesses are actively seeking people who understand AI and this skill set commands premium salaries and consulting rates.

And of course, with this skill, you can also launch your own business, which we're going to be covering later in the video. And that's what I've done and thousands of people in my community have as well. This is because ideas that once required a technical co-founder can now be prototyped by you and ours.

And for those with the skill, there's another huge opportunity in that small businesses who can't afford $50,000 development projects, they are very eager for this affordable and customuilt tools that you're going to have the skills to do by the end of this video.

I know this because there's early adopters in my community that we're going to touch on later that are selling $5 to $15,000 projects that take them a weekend.

So, at the end of this video, I'm going to be breaking down exactly how they are landing these kinds of projects and show you how to turn your skills that I'm going to teach you here into real income and momentum in your career.

So, the way I see it, this is like digital literacy. You know, knowing how to use a computer, that skill opened doors for people in the '90s.

And then understanding the internet became essential in the 2000s. Now, knowing how to work with AI and build your own software is the next frontier that's going to give you an edge in your career.

This is the new form of literacy that defines who's going to get to build the future and who gets left behind.

And the shift isn't just about productivity.

It's about survival. We are watching a split screen in real time. We have those who can build with AI and have learned these skills and then those who watch from the sidelines and rely on others.

If you can guide AI to create what you imagine, you can become exponentially more capable.

This is the easiest way to put yourself on the front foot for your career.

In this video, we're doing it differently and focusing on actual mastery based on deep understanding of the basics of building software.

So, first you're going to learn the foundations, as I said, what web apps are really made of and how they work behind the scenes. You'll learn the essential terms that will help you to explain your ideas to AI clearly so that it can build exactly what you envision.

This is really the most important part because in order to get the most out of these AI models, you need to be able to describe what you want. Knowing the key terms and and having a useful vocabulary is really what separates these fumbling vibe coders from effective software composers.

Then after the foundations and the building section, we'll build an entire web app together from scratch to fully functional.

And it's going to be a real project, not some toy example.

An event discovery platform where users can browse, manage, and create music events.

And you're going to see how all of the pieces fit together from front end to back end.

And we'll take it one step at a time, prompt by prompt, so that you always understand what's happening and why.

The way I see it, you can watch others build the future, or you can start building it yourself.

So, if you're ready to level up, let's start understanding the basics of all of this.

So when you sit down at a restaurant and order food, you don't just say, "I want food.

" You give a very specific order like, "I want a medium rare steak with garlic butter and mashed potatoes hold the gravy.

" This same principle applies to composing software. The clearer you are about what you want and what you're ordering, the better results you're going to get from AI. But right now, you might not even know what's on the menu, so to speak, or even what you can order.

So let's just unpack what a web application even is so that you can better understand how to ask for exactly what you want from AI. Every piece of software you interact with falls into one of four categories. So firstly we have mobile apps that you downloaded from maybe the app store on your iPhone or Google Play on your Android.

Things like Instagram, Uber, your banking app and they live on your phone.

They can often work offline and they're built specifically for iOS or Android.

Then secondly we have desktop apps.

These are traditional programs you install on your computer like Microsoft Word or Photoshop or Zoom. And they're very powerful and they often work offline and are designed for Windows or Mac OS.

And while they're still widely used, they require installation and can take longer to update and can be harder to maintain across different devices.

Thirdly, we have websites. And these are what you access through your web browser.

So company landing pages, news sites, portfolios, they're mostlyformational.

You read them, but you don't interact that much, right? Just like a page for you to look at on the internet.

What you see is what you get. and everyone sees the same thing. And then fourth, and this is what we're going to be focusing on, we have web apps. These run right in your browser, but here's the key difference.

They're interactive.

They're personalized and dynamic. You can think of like Gmail or or Netflix or Airbnb.

They respond to what you do and they remember your preferences and they adapt in real time. It's like an app but on the web, right? A web application.

And here's why they dominate and why that's what you're going to learn in this course.

Web apps work on any device with a browser and they don't require downloads.

They can be updated instantly and they don't need Apple or Google's permission in order to launch them.

If you want to launch an app for your phone, then you have to go and apply through the app store to get permission to be on the app store. And here's why this matters.

Web apps are the foundation of most SAS businesses.

So, if you've heard that building a SAS is kind of the holy grail or the thing you should do as a founder, this is what they mean, building a web app, and it's one of the most versatile and scalable and easily monetizable software that you can create.

And that's why you're going to learn how to build one today.

What makes web apps so special is that they remember you.

your Netflix queue, your Amazon cart or Gmail inbox all stay the same between visits and they're personalized based on your activity.

They also update in real time like livestock prices, instant chat messages, or a constantly refreshing social feed.

And unlike static websites, they're just like a portfolio that displays information.

Web apps that users contribute.

You can post and upload and leave reviews and handle complex tasks like shopping or applying for loans or managing projects.

So, that's the difference between a simple $500 website that just displays some unchanging information and a fully dynamic $50,000 web application.

When it comes to web apps, it's important to understand that there are two sides of this coin really, the front end and the back end. And this is where we could over complicate things in technical terms, but I'm going to try to make this super simple for you cuz it's a really important concept to understand as you go into building your own software.

It's actually simpler than you think.

Let's use a restaurant analogy.

So, you can think of a web app like a restaurant.

When a user arrives, they're experiencing the front end.

They're in the dining room. The front end is like the table they sit at, the decor that they're surrounded by, and the menu that they're choosing from. And then you have the waiter in there taking their orders.

The back end is the kitchen.

It's what happens behind the scenes. You got the food preparation, inventory management, order processing, basically all the work that the customers don't see, but makes everything function.

And just like the restaurant is useless without ingredients, our web app runs on data and needs somewhere to store and manage it as well. And that's where databases come in, which you can think is like a walk-in freezer or the pantry or the wine celler for the restaurant.

It's where the ingredients or for web apps the data are stored, organized for quick access, kept fresh and available for use.

So basically, if you understand how a restaurant works, you now understand how web apps work really. So when you sit down at a restaurant and a waiter hands you a menu, that menu is like the front end of your application.

It shows you what's available and lets you make a choice.

You decide on the salmon and place your order. The waiter notes it down just like the front end captures your input through something like a button you click or or through filling out a form. The waiter then brings your order to the kitchen. This is the front end sending your request to the back end of your app along with all of the details.

And in the kitchen, the chef reads a ticket salmon. They check the fridge to see if the ingredients are in stock.

And that's what we call backend querying the database. And then once it's collected those ingredients, the chef gets to work. So it's like seasoning and cooking and plating up the dish.

This is the back end doing the heavy lifting of turning your request turn the front end into a finished product.

Then finally the way to bring the salmon to your table and that is the back end sending a response back to the front end in order to fulfill the users's request.

So this whole dance from menu to meal mirrors exactly how web apps work. So when you use basically any web app on the internet, you are constantly asking for stuff from the back end like data or updates or some kind of saved info that you have like your Gmail inbox. But when you click on the sent tab in your Gmail, it's sending to Google servers and asking, hey, this person wants their information that they had sent already and then the back end finds it in the database, pulls it back, and then sends it to the front end and displays on your screen.

When you're using these apps, you are constantly asking for stuff from the back end like data updates and saved info.

You're also sending stuff back there like messages or photos or form answers for the back end to store in the database under your account.

And all of this happens super fast.

Like you just you just tap or click and then the app reacts.

It's as simple as that. So think about Netflix.

When you log in, you see all of the available shows and movies and you press buttons to play and pause and you can type stuff into the search bar.

All of that is what we call the front end and it's what we refer to as the user interface or UI for short. If you take Airbnb, the UI has photos of the rentals, a calendar where you can select dates, a book now button, a review section, a map showing the property's location.

And so, a user interface like this has one job, be easy to use, and look great while you're at it.

So, it captures the user input, your clicks, what you type in, and the selections that you make. It displays information clearly and gives you feedback when you do something, like a confirmation screen when you successfully book your rental or an error message when something goes wrong.

And when designed well, it shows up nicely in browsers on different screen sizes from from laptops to tablets to phones. But here's what the front end can't do. It can't handle the heavy stuff.

It can't make big decisions or store important data longterm.

It's like that waiter. Great at taking your order, but don't ask them to cook the meal or remember what you ordered last week.

That is the job of the back end.

So, going back to Netflix, the backend remembers what you've watched.

It makes personalized recommendations, streams video files to your device, manages your subscription and billing, and tracks your viewing analytics as well.

All this data being sent to the back end and stored in the database under your account.

For Airbnb, the back end is checking dates that are available, calculating the price, including all of those awful fees, processing payment transactions, sending confirmation emails, and updating the host calendar as well on their end. So, how they work together.

So, we're almost ready to move on to the next step, but let's just lock in our understanding by putting all of these pieces together in an example.

Everyone is familiar with online shopping.

So what exactly happens when you click add to cart? So step one, the front end, the website you're looking at, notices that you clicked the button.

It detects that you have clicked the button.

Step two, it sends a message to the back end like, hey, this user wants to add product 123 to the cart.

It includes your user ID and the product info.

And then step three, the back end checks a few things. Is the user logged in?

Is the product still in stock?

What's the updated total, including tax?

And then if all's good, it can update your cart behind the scenes.

Then step four, the back end replies, "Got it.

Cart updated. The new total is $47.99.

" And then step five, the front end shows this result.

You see a message like item added.

And the cart icon updates with your new item count. All of that happens in a flash faster than you can second guess whether or not you really need another pair of shoes. So everything in a web app follows the same rhythm.

Front end captures, backend thinks, front end shows.

Traditionally, front end and backend developers were two different roles with very different skills and learning different coding languages as well.

But as a software composer, you're going to be wearing both hats.

And this is called full stack development.

And it's a legit superpower if you want to be able to build apps and make money while doing it.

Without a way to remember things, your software would have the memory of a goldfish.

And that's not going to cut it if you want to be able to build something that people actually use.

So think about using your favorite apps.

What if you logged back into Netflix and it forgot what shows you were watching?

Or if Amazon dumped your cart when you closed the browser tab? or worse yet, your bank app erased your balance and transaction history every time you log back in or refresh the page.

So without having some kind of memory, apps would be ridiculously annoying, confusing, and basically useless.

I don't know.

I don't know.

I don't know.

So that's why software needs a way to store and organize information.

And once you understand how that works, even just the basics, you'll be way better at building the stuff with AI.

In our restaurant analogy earlier, I said that the back end stores your data in something like a kitchen's walk-in freezer where all the ingredients or your data in this case are kept ready for when they're actually needed.

That's a very helpful mental image for understanding what storage is.

But to understand how it's organized and access, there's a better metaphor.

You can picture a filing cabinet like the old school kind that you see in an office.

This is a great way to imagine how databases actually work in a real app.

That cabinet is your database, your software's complete memory for everything to do with users and the app itself.

So in a database data is organized by category. So imagine that each drawer in this filing cabinet holds one type of information. For example, if you had an e-commerce app like Amazon, you might have one drawer for the users, another drawer for products, and then another for orders. In database terms, each of those drawers is called a table.

So if you were to pull open the users drawer, you'd find a bunch of folders, one for each of your users, where each folder has tabs for labels for information like your name, your address, your email, etc. So what this looks like in real life. So to map a metaphor to an actual database table, things would look a bit like this.

You have a users table and then for each person you have the ID, the first name, the last name, the email, and then the address as well. Here we've got a table or a drawer that is full of our users with each row essentially being a folder in that drawer with columns for each tab in that folder. And at this point you might be thinking, hm, so a table is basically like a spreadsheet like Google Sheets or Microsoft Excel. So then a database is basically a collection of spreadsheets.

And honestly, it's pretty much as simple as that. Sure, things can get a little bit more complex, but just to get started with building, like we're going to do later in this video, that's all you really need to know. So, when we build our app later, we're going to be creating an application that's essentially communicating with a fancy spreadsheet that we can easily store stuff within and grab things from, like a a bunch of spreadsheets that are really optimized for building software around because we can easily interact with them and send data and pull data back.

So far, we've looked at one table at a time, like a table full of users, but real apps use multiple tables that are connected behind the scenes.

So, you can think of it like having a bunch of Google Sheets that can all talk to each other or are related to each other in some way.

So, in a shopping h, what happens when a user actually orders a product?

Let's just walk through it step by step.

So, when someone places an order, like a user named Tara, who is buying some kind of shoes, the app uses three different tables to handle that order.

Firstly, it has the users table.

So, who made that order? Then it uses the orders table, the order itself, what was bought, how many, and by whom.

Then the products table, the items to order.

So here's what happens behind the scenes.

The app knows that Tara is already in the users table with the user ID 1 2 3. It knows the shoes are already in the products table with a product ID of 999.

So when you click purchase and create a new order, it creates a new row in the orders table that connects these two things.

So in the orders table, we have order ID, user ID, product ID, quantity, total, and then we have the data to fill out one of those rows.

So this row is basically saying user 123, Tara, ordered one of product 999 shoes and the total is $89. So the actual user and product info isn't copied into this row.

The app just uses their ID numbers to kind of link things together.

And that's how databases stay clean and organized.

Instead of one big messy table, they've got smaller, more focused tables that are all connected to each other by IDs. It's like each table is a smart sheet and the app just follows the links between them. With this basic understanding in mind, you can write much better prompts at the software composing tools like Bolt that we're going to work on later. As a clearer you are, the better the AI can build it.

So, what I've just taught you allows you to go from a weak prompt like let users save their favorites to being able to create a much clearer prompt like create a favorites table that stores which user likes which products. So, I hope you're starting to see already why I've taken this route with this video.

It's this building up of of vocabulary and understanding of all the moving parts that is really what you need to have any kind of long-term success with this new skill of software composing.

So, let's recap and just lock it in, right?

Apps need memory. Databases give them that.

A database is like a filing cabinet full of drawers for each category of data.

We'll call these tables. And each drawer holds folders or rows with labeled columns.

It's really not that much different from spreadsheets that you're already familiar with. And these tables can be linked together using IDs to keep things in sync without getting sort of mushed all into the same one.

And the best part is that you're not going to need to code any of this. You just need to be able to describe it clearly.

So I'm giving you the vocabulary again.

So now that you understand how data is stored and connected behind the scenes, the next question is how does the app actually get that data when it needs it?

And that's where APIs come in.

And they're actually a lot simpler than you think.

When you hear API, which stands for application programming interface, you might start to feel a little bit intimidated.

And I get it.

It sounds pretty technical, but I promise that it's actually a lot simpler than you think.

So, if you remember back to our restaurant analogy from earlier.

Well, when you want a meal, you don't just march into the kitchen and grab some food yourself, right? You go sit down, you tell the waiter what you want, and then they go and talk to the kitchen for you.

Then, they bring the food to you when it is ready. And that's exactly what APIs do within software.

They are the waiters that carry your app's request into the kitchen, which is the back end, and they grab what you ask for from the database and bring it back to the front end. So, for example, when you visit the web page for those shoes you've been eyeing, you're asking the API or the the waiter, hey, bring me these shoes.

I want to take a look at them.

So, when you click on the shoes on the site, the API hears that, walks into the back end, grabs the shoes info from the products table in the database, and then sends it back to the front end to be displayed.

and and just like that, the shoe's name, the photo, the price, and the details can pop up and load into your screen.

And that little back and forth exchange, asking for something, and getting something is called a request and a response. And that pattern is happening constantly and often in milliseconds every time you do something within web apps. So, every time you load a YouTube video or check the weather, APIs are quietly running around behind the scenes like super fast waiters that are grabbing what you need from the back end and then serving it up to you in the front end.

There are many different kinds of APIs. So for example, when you as the user ask for something from the back end, this is called a get request, which makes sense because you are asking to get something. So when you're in an app and you click on your profile, you are getting the profile info that is stored for you such as your username, your email, your avatar, etc. And then your browser translate that info that it got for you from the back end and displays on the web page.

But APIs aren't only used for getting stuff.

They're actually used to send stuff as well from the front end to the back end.

Like for example, if you fill out a form, that is then saved in the database.

And these kind of actions and requests are called post requests.

Just like you send a postcard through the post office, post requests are for sending data from the front end or what the user is interacting with to the back end or even to another external software that your app is able to communicate with.

This might sound a bit confusing, but we will be doing this in the app that we're going to be building in the building section of this video.

Our users will be able to create new music events which will then store in the database and display those events to them in the front end. Then we have internal versus external APIs.

So, while we have these waiters who pass requests and responses between the dining room and the kitchen or the front end and the back end, where does our restaurant get its ingredients from? So, just like a restaurant isn't growing all of the food it cooks, an app doesn't always have to generate all of its own data or handle every single task by itself.

It can actually get stuff from other apps using what's called external APIs.

So, let's say that you need a map for your app.

Instead of building all of that from scratch, you can just use something like the Google Maps API which has already done all of the heavy lifting for mapping the whole world and getting all the data stored somewhere.

And Google has created a powerful API that you can just plug in to display their maps and location features inside your app.

In fact, APIs that you talk to nearly any service or application on the internet.

So when you think of APIs, just imagine a box.

That's your app.

Now imagine another box. That's a different app.

And the way that they interface or communicate with each other is through an API, the application programming interface.

So you get the you get the naming for it. Now now imagine a wire that plugs from your box to the other box and this wire is used to send requests.

Now imagine a second wire from that other box to yours. That one is used to receive responses in your app.

And that's really all you need to know to understand the essentials of how APIs work.

It's basically just the way that softwares connect and communicate with each other, either between the front end and back end of an app or between one app and another one. So APIs allow you to plug in powerful features without having to build them yourself.

You're not reinventing the wheel.

You are composing apps out of building blocks that are already made by other teams and are available for you to use.

For example, if you want to plug in some AI into your application, OpenAI and Anthropic and all of the other model providers have super handy and easy to use APIs where you don't have to have built your own AI model or LLM.

You can just access chat GBT by API by sending a message saying, "Hey, can you do this?

" and send it to Open AI and then it will send back the response just like you're using chat GPT. So that's how you can programmatically build in very powerful things that other companies have built into your applications. But in order to be allowed to use those APIs like say talking to OpenAI's chatbt models, you need permission to use them.

And that's where API keys come in. As the name suggests, they are the keys that unlock your access to plug into various APIs so that you can start sending and receiving what you need from it. And unless the API is free, you'll also need some credits, which is essentially your way of paying the other app for renting their features within your app.

Like in order to use the chatbt models, you need to have set up an account with OpenAI.

You need to have set up your credit card on there so that you can pay for the access to the models. And then once you have that set up, OpenAI will give you a special API key that you can put into your application so that when you are communicating with them, they know that it's you and that you have paid.

So they can check that you've got billing, you've got your credits, and then every time you send a message to them, they can calculate how much that cost and how much to deduct your credits.

So let's use a real world example to explain this.

Now that we have a good mental model for this, let's make it a little bit more concrete. So, imagine you're building a food delivery app.

To build this, you could hook into the Google Maps API to show all the restaurant locations.

You could use Stripe's API to take payments.

You could use Twilio's API to send order updates via SMS and the Google Firebase API for live chat with the driver. See, you're not actually building all of these things from scratch these days.

You're composing software with your own unique features while leveraging what's already available to you out there on the market through all of these incredible APIs that people create. And the beauty is when you are working with AI tools like what we're going to use in this video.

They're going to take care of most of that technical implementation for you.

You just need to focus on clearly describing what you want your app to do, you can either suggest an API that you're already aware of, or the AI could even figure out on its own which are the best APIs to use and how to wire everything up for you. And that is the power of software composing.

And now that you understand APIs, you've unlocked a huge part of building super powerful apps.

All right, we are making great progress here.

There's only a little bit more theory before we can start building the app.

So stick with me. The final concept that we need to understand is how to allow people to create accounts in our app so that they can log into it and we're able to track and customize their experience.

So let's return to our restaurant analogy again.

For exclusive fine dining restaurants, you won't be able to get seated or get a table without having a reservation. So if you just show up without reserving a table beforehand, you'll be turned away at the door.

Similarly, your web app needs a system in order to recognize users and know what they're allowed to access.

Without it, anyone could walk in claiming to be someone else and sit at any table, including the chef's private dining room in the back. So, if you make a reservation, or in our analogy, if you create an account, then you'll be allowed in and seated at a specific table that was reserved in your name.

And in the world of software, we're talking about the concepts of authentication and authorization.

So, what's the difference between authentication and authorization?

Well, authentication is basically, do you have a reservation?

You can think of authentication like the host checking the reservation book. They need to verify is this person who they claim to be.

Do they actually have a reservation under this name? And can they prove that they made the booking? Maybe with a confirmation number or something.

In web app terms, this is when users log in with their email and password or maybe they use their Google account or they scan their fingerprint.

They're proving that they are authentic, showing that they really are who they say they are.

And that's why it's called authentication.

Authorization is more like what table are you assigned to.

So once the host confirms your reservation, they'll escort you to the table booked in your name. And so if you didn't reserve the expensive private corner booth, they're not going to allow you to sit there, right? Similarly, when you log into a web app, you'll have access to only a certain number of pages and the data is specific to you.

Like when you log into your Netflix account, you can see all of the available content and your personal watch list. But of course, you can't see what other people have watched and you definitely don't have access to a special admin view where Netflix employees might upload new content from.

Basically, you can only go where you have the authority to go.

You only see what you have been authorized to see.

And that's why it's called authorization.

In a web app, you need both user authentication and authorization.

Without authentication, your app is like a restaurant with no host.

Anyone can just walk in and claim that they're a VIP who booked the private dining room.

And without authorization, it's like letting every guest just wander into the kitchen, sit at the chef's table, and swipe the company credit card. In our app, we'll set up a login system so users can sign in and be authenticated into their own accounts.

And once they're logged in, they can create events and save events that they want to attend. And on their personal profile, they'll have the authorization to see both the events they are planning to attend and the ones that they have created themselves.

So if you feel intimidated by these terms, just know that modern AI coding tools like what we're going to use later in this video make the implementation of authentication or OR far easier than it used to be.

All righty. So you've made it through foundations.

We have covered a lot of ground.

Like seriously, a lot of ground.

Like that took me years to learn all of that.

Just in the space of 30 minutes, you've been able to do that.

So congratulations firstly. But trust me, this is the stuff that 99% of people are going to skip in getting into this new kind of software composing vibe coding thing.

And it's the very reason that they're never going to get far and they're going to get stuck later on.

So, by understanding these core concepts, you've already built a massive advantage.

Now, you have the language and the vocabulary and the mental models to build things that others simply can't.

So, let's do a quick recap before we move on of everything that we've covered.

First, we covered what software composing is and why it's so important.

You learn that you no longer need to be a coder who builds everything from scratch and instead you can be more of an architect who clearly describes your vision and lets the AI handle the complex construction.

We then defined what a web app is. Not just a static website but a dynamic interactive application like Airbnb or Netflix or your favorite SAS product that can remember users and change in real time.

You learn the difference between the front end and the back end using our restaurant analogy where the front end is the dining room, everything that the user is going to see and interact with on the web page and then the back end is like the kitchen which is the hidden engine that does all of the heavy lifting for you. We also talked about databases which is the software's memory.

We use the filing cabinet analogy where your database has tables or drawers that hold records or rows of information like your users or your products or orders. Next, we covered APIs which are the the waiters of the software world and they are the messengers who carry requests and responses between the front end and the back end or even between completely different applications allowing them to work together.

And finally, we broke down authentication and authorization with authentication being about proving who you are like showing your ID to get into a club. And authorization is about what you're allowed to do once you're inside.

Each of these concepts is a critical piece of the puzzle and together they form the blueprint for every modern web application. Now, it is absolutely crucial that you have a solid grasp on these ideas and concepts before we move on. And I mean, if it helps, go and ask Chat GBT and say, "Hey, I don't quite understand a specific part of the video.

Can you please explain this concept?

" And you'll be able to go back and forth and solve it. And that really is the best way to get personalized teaching to help you work through these tricky concepts.

And I say this because you're going to need to fully understand all of what we've taught there in order to get the most out of the building chapter that's coming up. But if you're feeling confident and congratulations, you have now laid the foundation and now it's time to pick up the tools and start building.

So, in the next chapter of this video, we're going to turn this theory into practice and start building web apps.

So, welcome to chapter 2.

You've built the foundation and now it's time to start building on that foundation.

This is where the theory becomes real and you'll see just how powerful this software composing skill is.

In this chapter, we're going to be building a complete full stack web application from scratch, which is an event discovery platform where users can browse, attend, and even create their own music events.

But we're not going to build this all at once.

We'll do it step by step, prompt by prompt, looking over my shoulder in a way that mirrors how real world applications are developed.

So, we'll start with a very simple idea and then progressively add layers of functionality on top of that. And it is crucial that you follow these builds in order and don't jump ahead because each lesson will layer on top of the last.

And by the end of each build, you'll have a working application. And by the time we're done, at the end of build three, you will have a complete full stack SAS product that you can be proud of and put straight into your portfolio.

So, here is what we're going to be covering in this chapter. Before we jump straight into building, we need to survey the current landscape of AI development tools.

This is really important for you to know and I'm going to show you all of the different options out there in terms of the tools that are on hand for you as a software composer.

And I'll also be explaining the tool that we're going to use for this course.

Then we'll get into build one where we'll be doing front end and UI design.

We're going to start off by creating the visual part of our app first, which is the user interface or front end.

You're going to learn how to take a design from an idea to a beautiful and interactive front end that users can see and click.

Then we'll be getting into build two where we'll be focusing on building our backend databases and APIs.

In this second build, we'll give our app a brain and memory.

We'll connect it to a database in order to store our events and our users and set up the APIs that allow the front end and back end to communicate with each other.

Then finally, in build three, we'll be tackling the authentication and authorization of users. So with the core app working and the front end and back end talking to each other, the final touch is to add the ability for users to create accounts, login and then have personalized experiences when they are logged in like saving events to their own profile and creating new events.

Then we will deploy your app to the real world and handle security. So this step is all about taking your application live and putting it on the internet for the world to see. And we'll be covering the essential steps to make sure that it's safe and secure. Then we'll jump into a short section on debugging, which is fixing what breaks in your app.

None of your builds are going to be perfect on the first try. So, I like to teach you guys how to fish, not just give you a fish.

So, I'm going to teach you how to think like a developer and find bugs and then use AI to help fix them.

This is a critical skill that again is going to put you ahead of 99.9% of all the other people who are trying to do this software composing and vibe coding thing.

So, by the end of this chapter, you won't just have a finished product.

You'll have the hands-on skills and the confidence to start building your own ideas.

So, let's get into it.

First up, let's explore the software composing landscape.

So in this exciting new world of software composing, there are a number of different tools that we can choose from.

Tools at the moment currently fall into three categories. We have browser based builders.

These are AI assisted app builders where everything happens online.

These are the most popular for newcomers and the easiest to get started with.

These include tools like Bolt.

Bolt is fantastic for beginners.

You just describe your app and it can build everything from the front end to the back end.

And most importantly, it has super easy database integrations with powerful backend tools like Superbase, which makes things so much easier.

And when you're ready to launch your app live to the world, you can do it in an instant with a simple publishing step.

Bolt is also the sponsor of this video and as you'll see in a second, it is the perfect starting point for beginners that also has all of the tools that you need to really grow into an advanced software composer and build complex applications.

It's just a great tool for quickly turning your ideas into working products and beyond. So, in a second, we'll be jumping into use Bolt to build the music event discovery app that we've been talking about previously.

Another popular tool is Replet agent.

So, Replet agent combines AI building with a more complete coding workspace, which is great if you already have a little bit of development experience or if you want to dive deeper into traditional programming as well. Compared to the other platforms out there like Bolt, it's known for being not so great at design, but very very good at building powerful back-end functionality.

Then we have Lovable. And Lovable is another one of these vibe coding apps uh with a reputation for being really really good at building beautiful web designs.

That's kind of their specialty.

The next category of tools are desktop AI coding assistants.

So these are apps which work on your computer and offer a lot more control.

These are kind of similar to ripplet agent because they're more for people with more technical and coding experience but they can be super super powerful.

Firstly we have cursor.

So when traditional software developers code they use what's called a code editor which is basically like Microsoft Word on steroids but perfectly made for coding.

The most popular code editor is called visual studio code which now has an AI powered tool called cursor.

So cursor can basically read your entire coding project and make contextual suggestions.

And with its agent feature you can type in what you want and it's going to attempt to build that for you within cursor.

So, this tool is great if you're already a developer and you want to supercharge your efficiency with AI or if you're gaining more experience as a software composer and want more hands-on control of your codebase.

And we'll touch more on this a bit later.

And so, as you improve your software composing skills, you may want to try out things like cursor to extend beyond what you can do on the browser based ones.

Then, there's windsurf which offers similar capabilities to cursor but with different AI models and workflows.

Finally, it's important to point out that these general purpose LLMs that you already use for brainstorming ideas like chatbt or claude can also write working code.

This means you always have a coding partner on standby, so you're not locked into any single tool. You can go back and forth between tools like Bolt and Chatbt to refine your project incrementally.

So just remember that this whole landscape is evolving extremely fast.

There's going to be new tools that pop up and old ones that fade away and features are going to be changing all the time.

The best tool is one that you'll actually use.

So start simple, experiment often, and grow your toolbox as you go.

It's very easy to get overwhelmed. So with an AI coding companion by your side and knowing how to use it properly, you're already miles ahead of the game.

So with this understanding of all the tools available to us, we can now start with building our app with Bolt, which means we just need to start mapping out the plans for how our app should look and feel.

This is the app we're going to be building together throughout this course.

As you can see, it's a platform for discovering live music events.

There's this list of events that users can scroll through and check out events.

They can filter the list by category.

Whether they're interested in things like festivals or concerts, it's going to show just those events for those categories.

And of course, we will be adding user authentication.

So users can create an account or logging back into an existing account like you see me doing here.

Once we log in, we will see our user profile and see the events that we're attending as well as events that we created.

If we created the event, we can pop it open and edit it as well as delete it.

In order to create new events, we can pop open this add event form.

And whenever we fill this out and hit create event, we will be adding a new event to our backend database.

And all of our events that we're seeing here are being pulled in from that same database that we can add events to. So, we are going to be building out a full stack application uh with user authentication step by step. So, if you're ready to start building, let's get into it.

Whenever we compose software, we need to think about what our users will actually be interacting with and how we want them to experience our app. So, let's get grounded in two quick definitions.

The UI or user interface is what users see and interact with. Things like buttons, text, the layout, while UX or user experience is how people feel using the product.

Is it intuitive, helpful, enjoyable?

Think of UI as the map you design to lead the user on a specific journey and that journey itself is the UX.

To make things super clear about what we're building, I created this Figma that breaks down each major step of the app we're building, which is available for you in the course resources.

To access this and all other resources, just join our free school community.

After creating your account and verifying your email, you'll be granted access within a couple minutes.

Then head to the classroom and open the AI foundation section.

That's where you'll find this software composing course you're taking right now.

The course resources are located just below the orientation.

You'll find the Figma link here along with the relevance tool we'll use soon. When designing your own app, you'll want to start with a clear vision like this of what you're building and what elements you'll need on screen.

While AI tools like Claude or Chat GPT or other ones can certainly help with this process, I recommend beginning with a simple sketch. This approach helps you develop a firm grasp of your project before diving into development.

You can do that sketch in Figma or some other design tool or even a simple pencil on paper.

That way, once you have a solid plan, you can get a really good starting prompt from a UI design tool like the one I'll share with you in a few minutes.

So, let's walk through the skeleton piece by piece or in UI terms element by element to see how this UI design supports a smooth and intentional user experience.

We start at the top with the navbar, which is short for navigation bar.

Unless you're brand new to the internet, you've already used these and you know that they're for navigating around the site.

Nearly every web application has one, and they can range from minimal with a number of links that route to different parts of the site to much more involved.

But for our needs, we'll be starting out with a very simple navbar with only one link events, which will just scroll the page down to the event list below.

Under the navbar, we have what's called the hero section.

If the homepage of your app is like the front door, then the hero section is the welcome mat, which greets your users.

Generally, hero sections contain two key elements. a heading, in our case, discover music events, which tends to be the first text the user reads written to immediately communicate the purpose of your app. Then there's a button that invites people inside or to take an action. That's why they're referred to as CTA or call to action buttons.

They're typically in a bold color that stands out on the page and provides a clear first step for users to take in our app. The phrase join the movement makes the action feel meaningful and inclusive while also fitting the theme of our site.

Below the hero section, we have a list of events that users can scroll through to see the available events that they can attend.

And these events are displayed using what are called cards.

These are basically containers that organize information in a neat way, kind of like how trading cards display stats about players.

For our app, they'll contain a preview of the details about a single event.

So technically here, we're looking at a list of event cards.

So, in just a simple web page here, we've seen how a few UI choices, a navbar, a hero section with a clear heading and button along with this card layout can create a user experience that feels welcoming, clear, and actionable. Good UI and UX just means thinking about what the user needs at each step and designing the user interface that meets them where they are.

When it comes to planning out your apps, UI, and UX, there are a number of tools you can use these days with new tools releasing all the time that can help out. To make this process easier for you, we created a relevance UI designer tool for you to use.

The template will be available in the course resources.

So, let's walk through using it so you can see how helpful it can be.

As you see, it's going to ask me to describe my project needs. So, I'm going to tell it I need a UI design for a live music event discovery app. It is going to run me through a series of questions.

Like the first one, it's asking is it for web or is it for mobile? Is it for phone or tablet? But this is a web app.

And by the way, I did speed up the video throughout this section. So, the actual processing of the tool takes a little longer in real life than you're seeing.

Now, it's asking, do I want it to be responsive?

That's just a web-based term that's referring to, do you want it to adapt or respond to different screen sizes?

And of course, we want people to be able to use this app and have a nice experience regardless of the device size that they're looking at it on.

So, we'll say yes, it needs to look good on any screen.

Then, it says great.

Now, could you please provide the name of your app?

Uh, our app, we're just calling it Show Go.

and it's asking us what are the brand colors for Shogo. We could give it specific hex codes, which is a fancy number that specifies an exact color, or we can just share some general ideas.

So, I'm telling the UI designer that I want it to be in a dark mode with purple accents and maybe even a neon purple vibe to it. Now, it's going to ask me to describe the personality of the brand.

So, I want it to be futuristic, clean, and energetic.

So, it's going to take that and ask as a follow-up of what design preferences do we have.

I'm going to tell it that I like a minimal ticky feel.

And here importantly is going to ask what key screens or pages do we envision needing for our app.

For example, a home screen, an event details page, a user profile. We will eventually need both those pages. But for now, as we want to build this incrementally together, I'm going to tell it let's just focus on the homepage.

And considering that it's going to ask us what UI or user interface elements do we want on the homepage. What kind of navigation style buttons, search bar, event listings, etc. So, it's already envisioning the elements that were in our sketch that we drew was already pretty intuitive.

So, I'm just going to summarize what we sketched out so far.

So, there should be a navbar at the top, a hero banner underneath that with a heading saying discover music events and a button that says join the movement and then under that hero a list of event cards that display the events details.

Then, it's going to intelligently ask us what kind of content we want included in those event cards. So, we're going to say we want the event name, description, location venue date time category and an image. And then it's going to get a sense for the target audience or demographic of our application.

So, we'll say live music enthusiasts, skewing more towards the Gen Z to millennial demographic.

Now, it's asking us, what key user flows do you envision for the homepage? So, at this point, we're really talking about not just the user interface, but also the user experience.

So what kind of actions and experiences do you want the user to have when they are on your page?

So we'll tell it that we want the user to immediately be inspired to start scrolling the list of events and exploring the details of those events.

Eventually we can talk about the users logging in but let's focus on this for now.

Now as you see it's asking us for any examples of apps or websites that we like.

So I have already saved a few websites that I was inspired by.

And of course this is a process that you can go through yourself.

You can uh search the internet or even have a chat with an LLM to generate some ideas of existing websites for you that might be in line with direction that you want to take your app in. I already did that and found that this super list site has a nice feel that we can mimic with like the purple gradient and lighting effect.

And then raycast. I liked how there's this animation in the hero section.

I like this glow around the elements here.

Okay.

And then this third one is spline.

It has another animation in the header that's even responding to the cursor movement, which is cool, and a nice dark mode.

So, I'm going to give it these three inspirations and tell the UI designer what I like about them.

I like how they are in dark mode, uh, fairly minimal but futuristic, and have engaging animations in the hero section.

So, I would like to see something like this with a purple gradient.

And I'm going to get even more specific and tell it that I want animating sound waves in that hero section. I think that would be really fit the vibe of our app.

So now it's going to take all of that information from the questions that asked us uh and it's creating a summary of requirements.

So I'm going to review this, make sure it's all in line with what I'm wanting to see and say this looks great.

Let's see it.

Once it's generated, it's created something that's really quite in line with what we're looking for.

There's just a few things that I want to change.

It's missing the navbar and also I want the event cards images to be on the left, not the right. So, it's going to take that feedback and generate another version for us. So, if we scroll up here, it is looking much nicer.

It's looking nice enough for us to go ahead and copy the image. And we're going to bring this into Bolt. So, we'll head to bolt.

net. And if you don't already have an account, you can get started or sign into your account that you already have, which I'll do now. And I'm going to paste that image here. And then, if I go back into the UI designer relevance tool, you'll see it's generated a prompt for us.

And by the way, this prompt and the image itself will be available in the course resources below this video.

So I can just grab that, tell Bolt to refer to the image that I already gave it.

And then I'm going to paste that prompt in here. So it's going to refer to this and then also refer to the text prompt.

And I could just submit this as is.

But I want to bring your attention to this helpful tool at the bottom here.

If I click this, it's actually going to enhance the prompt for me. So it's going to improve that even more to be in line with the kind of prompt that's going to really suit Bolt's functionality.

So now I can review it, make any changes that I want to, but it's looking pretty good.

It seems to have all all of the pieces that I'm looking for. So I can go ahead and submit that. Now we're brought to the true Bolt interface of composing our applications.

On the left here, we see that it's thinking through the process that it's going to implement. So we can follow along with this thought process if you're interested. And then on the right panel, it's going to be generating the preview of what it has coded for us.

Mind you, I am speeding all of this up to respect your time. If you were to build this yourself, it's going to take a bit longer. And as we can see, we've got an amazing first draft of our application here.

That looks a lot like what we came up with with the UI designer.

It's got our nice list of events.

They're styled a bit differently, but I don't mind that.

I think it actually looks quite nice.

And we even have this CTA button up here in the hero, and it knew without us even telling it to to add this filter because it knew that every event had a category.

So, it it intelligently added this filter for us. We did not even have to prompt that which is really shows you the power of Bolt that it can take your idea and expand upon it and make assumptions about how you want things to work beyond what you give it.

The only thing I'm seeing here that we might want to change, we don't necessarily need this search icon. We don't need artists or venues.

So really the act of software composing is creating a really solid initial prompt and things like our relevance tool can help you achieve that and properly planning things out at the beginning and then once you have a solid baseline then you just give it feedback as you go. So now we're going to uh tell it we want to remove the following links from the navbar. We'll take away venues and artists and also remove that search icon.

Now it's telling us I'll remove those links.

And now we can see this bright red error staring us in the face.

I know that probably feels pretty intimidating, but it doesn't have to because more often than not, all you have to do is click the blue attempt fix button and Bolt is going to be able to figure it out and fix it for us.

But it doesn't actually seem to have solved it cuz we still have those items in our navbar.

So let's zoom into the chat window here.

I want to bring your attention to this discuss icon. So, if I turn this on, I can actually have more of a discussion with Bolt about what's going on in my application. If I don't have discuss turned on and I'm giving it actual prompts and discuss, I can have more of an LLM type conversation with it and then it can suggest what changes should happen from that discussion.

So, I'll tell it that I asked it to remove the venues and artist links from the navbar, but they are still there.

So, now it's thinking about it.

It's saying I'm correct and apologizing is giving me a plan to fix it. So we can review the plan and tell it to implement that plan.

And now we only have the events item in our navbar just like we want.

So that's great. But we wanted it to actually do something.

So it would be nice if when a user clicks on this, they're actually scrolled down the page to that list of events.

So let's tell both when the user clicks on the events link on the navbar, they should be scrolled to that event list down the page. So it's going to run through that behavior. We can test that out and it's working exactly how we wanted it to. Great. So, we're in a really good place. So, let's just continue to interact with the application like a user might. Uh, so we can get a feel for what feels right, what feels wrong. First thing I'm noticing here is that we have this get tickets button, but we don't actually want to be selling tickets from this application.

We just want people to be able to see events and mark themselves as attending those events.

So, let's discuss with Bolt. instead of revealing the get tickets button. When I hover my cursor over the event card, I want to always see a button on the event card that says view details because moving forward, we're going to be wanting to be able to click on that button and pop open that event and see all of its details in a dedicated page. And we can see now it has a view details button.

So, that's good. But, it's kind of looking weird here when I hover over these event cards cuz it's it almost makes them look less active versus more in focus cuz they turn kind of darker and a little more hidden. I don't like that styling.

So, I'm going to ask Bolt to fix that. I don't like how when I hover over an event card, the button dulls in brightness. What can we do to fix this so that hovering over an event card makes it feel more in focus and not dimmed?

It takes my feedback, creates a plan, which I'm going to go ahead and implement.

And if you're ever curious, as you're deepening your understanding of how things are working within your app or within programming in general, you you can of course read through this and get a sense for what it's actually doing and learn more actively that way.

So now when we hover over it's bringing it more into focus where you're getting this light color. It increases in scale and that view details button still looks clickable.

So now that it looks clickable, let's actually make it do something.

When I click on the view details button, I want to open up a modal for that event that shows all of its details.

And if we look back at our Figma where we planned out our homepage here, we have already planned for when we click the view details button, we open up this modal. modal is just a term that means it's an element that comes on screen but doesn't necessarily take up the entire screen because this functionality is a bit more involved.

I want to go ahead and tell it to enhance the prompt.

Then I'm going to review it.

I'm seeing it all looks pretty good but I am noticing that it puts something relating to ticketing which again we don't want.

So I'm going to delete that since everything else looks good.

I'll go ahead and submit this prompt.

It's going to take a while to work through that which of course I'm going to speed up for you. Now when we scroll down and click this button here it is.

We have this modal which pops open the events details.

That view looked a little bit compact, but an important detail to note here is that we're seeing a smaller preview window of our application.

And if we want to see the full screen, there's this icon at the top right that we can click on. And that's going to open up our app in full screen mode.

So, we can truly see how things look in an actual web page. So, it's looking beautiful except for some reason it's showing this get tickets button, which we do not want as well as a share event if we want to keep it minimal.

So, we want both of these buttons removed.

So, we'll minimize our preview window and tell it to remove the get tickets and share event buttons from the event modal.

And I'm just going to tell it to enhance it for good measure.

Now, we'll go back into full screen mode, click view details, and there it is.

Those buttons were successfully removed.

And with that, we've accomplished everything that we mapped out over in Figma, where we have our navbar at the top. We've got this hero section with our heading. We've got our call to action button. We even have this animating visual in our event list that's even filtering like we wanted it to, which it figured out on its own.

We can pop open any event and see all of its details in a dedicated modal like this.

So, in very little time, with just a few iterations and a good amount of pre-planning, we were able to build out a beautiful landing page for our application.

In the next step, we're going to uh build out the back end.

So, if you're ready to implement a database so we can add new events into that and pull events from that database, let's head to the next section and make our app even more powerful in our application. Right now, we have all of our events displaying beautifully, but we aren't yet storing them in an actual database that we're then pulling them from.

Right now, they're just living within our codebase.

So, in this section of the build, we're going to implement our actual database.

We're going to be using a a tool called Superbase.

And once we set it up, we will have a database table called events where all of our apps events are going to live.

And then we can pull those events from the database and display them in our app. And under the hood, we will be making a get request so that we can be reading those event rows from the table and then displaying the data that lives in those rows columns such as the events, title, description, and so on.

Once we got that backend synced up, not only do we want to be pulling events from that table, we also want to be adding events into that table.

So, we're going to add a new item in our navbar, which pops open a form, which has inputs that allow us to gather all of the necessary information to create a new event.

Then, we will do a post request to add those new events as rows within our events table. And finally, from our event details modal, we'll add an edit and a delete button so that we can update the event rows so that we're able to change things like the title, the description, and also we will want to be able to delete an event row. So that is what we're going to accomplish in this chapter.

So let's get started on the first step.

If we head back into our Bolt interface, we'll see under this integrations tab, there is superbase.

So this is really a tightly integrated tool that we have access to when we use Bolt.

So, if we go to superbase.com, we can go ahead and either sign into our account or click start your project to sign up now and create a new account.

So, I'll walk through creating that new account.

And once we sign up, we will be prompted to create a new organization.

We'll give that organization a name, your company name, your team name, or whatever personal name you want to give it.

You'll then specify what type of organization this is, personal or otherwise, and you could upgrade to a paid plan.

But for now, we'll stay with their free plan and hit create organization.

Then inside of that organization, we'll create a new project.

We are going to give it a password and of course a name in our case, our app name Shogo.

So we'll create that project and we are routed to the dashboard for our project.

Here's where we can see the number of tables in our database.

Of course, we have zero cuz we haven't created one.

So let's walk through creating one right now.

On this side navigation here, we'll click on table editor and then create a table.

From here, we'll give the table a name.

Uh, we're going to call it events because, of course, this is the table that's going to hold our events.

And then just a basic description, our list of live music events. Uh, and in the column section, this is where we could add the columns that relate to every field within the event, such as the title date time description but we're actually not going to do that from here.

Instead, we're going to ask Bolt to create these new fields for us.

So that is the power of the tight integration between Bolt and Superbase that we can actually prompt creating columns within your tables from the Bolt interface.

So let's head back to Bolt and set up the actual integration between our Bolt accounts and our Superbase account.

So click on the integration and then make sure we have the correct organization selected and go ahead and authorize Bolt.

Once it's successfully connected, we can select the project and hit connect project.

Now, as you can see down here in the success message, we have connected to Superbase.

What we want to do is add each of these events to that Superbase events table, which means we need columns for all of these different points.

The title, date, time, location, organizer description category and even the image. So, let's go ahead and ask Bolt to add the following columns to the existing events table in the connected Superbase project. We want it for title, date, time, location, organizer description category and the image.

I'm going to specify here that the image column needs to be prepared for users to eventually upload images and store them within Superbase.

Now, I'll submit the prompt, and Bolt will go ahead and run through these steps for us. After it's done summarizing the steps it's taking, we're going to get this confirmation button that we need to click. This just gives bolt the approval from you, the creator, to go ahead and make those changes within your connected Superbase account.

So, if we go to our Superbase events table, we'll see that those columns were in fact created for us straight from the bolt interface.

Now that we have those columns, we want to move our current events data into that events table.

So, where do those events live? Right now, I want to bring your attention to this other tab in the preview window here called code.

And like it sounds, this is the actual code base for your project.

Looking at your project in this view, you can see how it's constructed all of its folders and files. And if we look inside the events grid file, we'll see this section called mock events.

So this is in fact all of our event data.

So we want to move all of this out of our project and into our connected Superbase table.

And while we're here, a cool thing that you can do is you can highlight a section of the code which gives you this option to ask Bolt.

So if we click that then we can ask bolt questions about the code itself.

For example, we can ask it what is this mock events doing and it will explain to us the mock events is serving as a temporary placeholder for development and testing purposes. And it's even suggesting next steps where we might want to replace the mock data with our connected database and remove these mock events from our codebase. It's got a great sense for what we actually want to do next.

So, we'll say great, I want to remove these mock events from the codebase and migrate them over into the events in my connected Superbase project, mapping all of the properties to their related columns. Now, once we submit that, Bolt is going to go ahead and start doing that migration for us.

And while we're still looking at this code tab, you can see this whole time as we've been building, this is what is actually happening within the code.

Files are updating, lines of code are added, lines are removed. So this is all happening as you're prompting your app into reality.

And just like before, we need to confirm that we want to apply these changes.

So once we do, when we head back into our events table, we should see these events. And here they are.

All of that mock data is now real data living in a real database within our Superbase project. To clean this up, we'll just delete out that initial blank event that was created when all of these columns were added to this table.

So we're turning back to our Figma.

We set up our superbase project. We now have all of our actual events living there and we're making a get request.

Then fetch all of those and display them just like we were before. Now we're ready to move on to the next step where we add a new item to our navbar. When we click on that, we want to pop open this create event form with all of these input fields to gather the necessary information from our user.

Let's implement just the user interface part and then we'll get that actual functionality working where we add new events to our database. We will tell Bolt that we wanted to add an item to the navbar called create event that when clicked opens up an event create form modal with all of the necessary input fields for a user to create an event for our app like title, date, time, location, etc. The form should also have a create event button at the bottom.

But like I said, this form should not yet add events to Superbase. Let's focus on the user interface only for now.

And based on what we can see from the summary of what it did, it seems like it should be working well. So let's open up this form.

And we can see we have all of these input fields. The only thing is for our image, we don't want our users to have to put in a URL for the event image.

We want them to be able to upload actual image files. So let's tell Bolt instead of a field for the event image URL in the create event form. I want the user to be able to upload an image file from the forms input.

Now, let's check it out.

Click the create event link. And there we go.

We have this button that allows us to select actual files that live on our device and upload them. Great.

So, now let's tell Bolt to add the functionality for adding a new event row to the events table in the connected Superbase project.

And then we'll specify whenever a user fills out the create event form and submits it. All of that data should be used to create a new row in the table.

Please make sure to handle the image, upload storage and processing correctly cuz it is a process for your application too.

Upload a file, process it, and store it correctly. So, we just want it to be mindful to do everything it needs to do to accommodate that.

While this is working, I just want to remind you exactly what's happening here.

When we click create event, the app is going to take all the information here.

Make a post request to create a new event row. And then it's going to add that row and fill in each of those columns with the information that our user entered into the different input fields in our form. And then in real time, we should be getting and displaying that newly created event in our event list. So back to our app, it's telling us that it's going to create a storage bucket for event images.

That's really just a fancy way of saying I'm creating the necessary storage for the image files that your user is going to be uploading.

And so we'll confirm that we want to apply those changes.

So now that it's ready, we can go ahead and create a test event to make sure everything is working and we can add new events to our superbase events table.

We will choose our image that just lives on our desktop.

I created this earlier in chat GPT and we'll add the description.

Then go ahead and click the create event button.

If we scroll down here and go in jazz category, we should be seeing it.

And there it is. Awesome. And when we view the details, everything that we just submitted via that form is showing up here, which means when we look at our database, there it is, just like we expected.

Awesome. So, now that we're able to create new events, wouldn't it be great if we could then from this event details model also delete and edit these events?

So, remember, we're going to be adding an edit and a delete button so our users can update these event rows and also delete the entire event.

So, back in bolt, we'll tell it on the event details modal at the bottom left.

Add two buttons, a delete and an edit button.

And notice here how I'm being very specific about where I want things added into my user interface.

They should be nonfunctional for now cuz we just want to get them into our app and then get them to work.

As you're noticing, it's a better practice to implement things incrementally, get your user interface to work, and then stack functionality on top of that. So now if we open up one of our events like our cat cabaret, we see our delete and our edit button.

Of course, when we click on them, nothing happens. So let's actually make these things happen. So we'll tell Bolt that when a user clicks the edit button on the event details modal, a new edit event form should appear allowing the user to update any of the fields of that event in the event Superbase table.

And we'll ask it to please make sure that it sets up the proper permissions so that a user can patch these event rows from the app. And really what we're talking about here is rowle security.

In other words, there's security settings relating to what users can and can't do to your database and the rows within them.

Can they read or pull those rows into their app? Can they write or add rows into the table? Can they update or add rows themselves? These are all part of role level security settings.

And right now it's ensuring we have the proper settings in place. We're going to confirm that we do want to apply these changes to add update permissions for our events table. And now when we pop open an event and click the edit button, we see this form which is filled with all the values that live in that events columns.

And so we can change the title, for example, add the word live in front of it.

And when we hit update event, you can see we're seeing it update in real time, which means it's working perfectly.

So we can move on to our next and final step of this section where we set up the ability for a user to click on the delete button of the event details modal.

So a user can delete this event row from the events superbase table.

We'll confirm that we want to apply these changes to add delete permissions for the events table. And now when we go to an event like our live DJ set, we should be able to delete it.

And it's asking are we sure? Yes, we are sure.

But looks like something's going wrong cuz we still actually see that event.

So it did not get deleted. But let's double check our database. And yep, it still exists here.

So let's turn on the discuss mode and tell Bolt that when I clicked on the delete button of one of the events, specifically the live DJ set one, that event did not actually delete from the events superbase table.

And I can still see it in the apps event list.

It thinks about it for a moment.

Let's see what it's saying. So it's telling us that it understands. And to help diagnose the problem, please provide the following information.

Of course, no one likes to run into errors, but good news is this gives us some experience with debugging because it's telling us that it's wanting us to check the browser console for errors, which I'll show you how to do in just a moment. And then we should be able to see a message that's logged in that console. But in order to get our code set up to be logging this message for us, we need to tell Bolt to do what it's suggesting, which is to add the console log. And you'll see what this means in just a minute.

So now we'll open our browser's developer console.

We'll click the delete button on an event, confirm the deletion, and then we'll check the console to see what it's printing out for us.

This should help us identify whether the correct event ID is being passed and if there's any superb basease errors that's preventing the deletion or if it's actually succeeding but maybe the user interface isn't updating properly.

So let's go ahead and go into full screen so we can look at this more clearly.

And since I'm using Google Chrome I have access to the Chrome developer tools.

So by clicking these three vertical dots I can go to more tools than developer tools.

And here is our developer console.

And it looks like we've got a lot of mess here. And we don't actually yet know what triggered this. So to wipe this and start from a clean slate, we'll just hit this clear button.

And now we'll do what Bolt was telling us.

We're going to open up one of the events.

And we're going to go ahead and hit delete.

Confirm deletion. And as we can see, it's saying it's attempted to delete the event with the ID of 13 and was deleted successfully.

So it seems like it actually worked that time. And if we go into our app, let's just double check.

Yeah, we're not seeing the live DJ set event.

So, let's go to our superb base table and make sure that it was deleted.

And there it is. It just was removed from the table. So, that's odd.

It didn't work the first time, but it ended up working the second time.

Sometimes these things happen. Development is not always a straight easy path.

Sometimes you have to make some detours and do a little debugging.

And in this case, we didn't even have to implement the solution.

It maybe just needed some more time to figure itself out. But with that tangent out of the way, let's summarize what we've accomplished. We now have all of these events living within an actual database.

We can edit them.

We can delete them. We can create new events.

So, we've made really great progress in very little time. But, of course, we're not done yet because in a real application, we probably don't want just anyone to be able to create events.

And certainly, we don't want any random stranger to be able to delete events or edit events.

If I create a new event, some random person should not be able to visit the website and then delete the event or change the location without my permission.

That's why we're going to add user authentication in the final chapter of this build.

We will be using Superbase's built-in authentication features for our application.

That means soon we will have a dedicated users table on our back end that we can add new users to and pull users from. That way on our homepage when a user clicks on these join buttons they'll pop open this new join modal where they can fill out the fields with their personal information and click join which creates a post request to create a new user which is then added into our users table within Superbase.

If they already have an account, they can click the sign-in link which opens the login modal where they can sign back in with that same information which makes a post request verifying that user already exists within our Superbase users table.

And to make the user experience smooth, we will add these links that allow people to switch between the different modals depending on whether they need to sign into their existing account or create their account.

So heading back into our application, let's get that functionality started.

We'll tell Bolt when the user clicks on join now or join the movement buttons, pop open a new modal with a field for a user's name and email so they can create a new account.

Don't add any actual authentication behavior yet.

Just build that modal because as we've talked about, it's much easier to build step by step than trying to prompt these elements to be built at the exact same time that we are prompting for complex authentication behavior on the back end. So once it runs through this logic, we should now be able to click these buttons and pop open that modal and it's looking great.

We have a field for the user's name, their email address, and a new to add a password field even though I forgot to tell it to add that field within the prompt.

Now at the bottom here, it says already have an account sign in, but of course we don't yet have a sign-in modal, which we need for users to log back into their created account.

So let's tell Bolt now create a sign-in modal in a similar style as the account creation modal that is open when the user clicks on the signin navbar item.

Now when we test this out we're clicking but it's not opening that new modal.

So let's turn on discuss mode and tell Bolt I'm not seeing that new signin modal when I click on the signin navbar item.

It's going to give us a plan to fix the modal and we have this terminal error.

So we'll ask it to attempt to fix it.

Looks like we still are getting a terminal error.

And once again, we still have that terminal error. So, at this point, we could continue to go down this path of asking Bolt to attempt to fix the error.

But sometimes with Bolt or with software composing in general, you'll find that you'll get into what I call these error loops.

And it's actually easier if you go back in time to an earlier state of your application.

So, if I scroll back up here and I find the last point that was working well within our application. So right here I found the point where we added the sign up modal for user registration.

If we click this revert button, it is going to revert to a previous version. So if we confirm that we want to proceed.

Now what is happening is we're being taken back in time to that version.

So let's reprompt it with slightly different phrasing and see if we can start from a clean slate and get a better result.

We'll tell it now when the user clicks on the sign-in item in the navbar, open a new modal that takes in the user's email and password and specify that we don't need any actual authentication setup yet.

Now, let's try that out. And yep, on the first try, we're getting that sign in modal looking exactly like we wanted it to.

So again, that's just proof that sometimes it's better not to waste time in those error loops and just to revert back to the last successful version of your app.

And of course here at the bottom, if a user doesn't have an account, we want to encourage them to sign up.

So to get our prompt really specific here, I'll take a screenshot of this section, feed it into the bolt prompt window and say when I click on this link at the bottom of the sign-in modal, I want to be switched to the join or signup modal we created earlier.

And similarly, I want to be shown the sign-in modal when I click on the sign-in link at the bottom of the join modal.

So let's test that out. And the join modal is not yet working. But let's try it on the sign-in modal just to make sure.

So it is working there.

So let's tell it. On the sign-in modal I can effectively switch to the join modal.

But from the join modal I can't yet switch to the sign-in modal from its link at the bottom.

All right. Hopefully that fixed that.

Just testing this out. There it is.

We can switch back and forth between the modal for our users to create an account and log back into their account.

Perfect. Now we're ready for our next step.

So we'll turn on the discussion mode because we're going to get a little more complex here and add the actual authentication.

So we're going to tell Bolt that we wanted to set up Superbase authentication so that we can create new users by taking in their name, email, and password from the join modal and then log back in from the sign-in modal.

Again, we've already built out the user interface.

Now we're adding the functionality.

So come up with a plan and we'll tell it to implement authentication.

Now once it's done, if we go back inside of our Superbase, head over to the authentication tab, we can see that we have this new users table and it's all set up with a user ID or UID, a display name, their email, and under providers, the type is email. So what does that mean?

Well, if we look in the signin providers tab, there's a bunch of different providers such as Google.

I'm sure you've seen this many times online where you can log into an app with your Google account.

We could set that up here.

We could also set up to be able to log in with our Apple account, but that's a little more complex.

And to keep things moving forward more simply, we're sticking with just the email provider, which really just means that the user gives us their email and their password, and we create their account from that.

As we can see, it is enabled because Bolt assumed that's what we wanted based on how our join form was set up and the prompt that we gave it.

But there is a setting inside of here that we want to turn off. Notice how it says confirm email. This setting means that users will need to confirm their email address before signing in for the first time.

This just automatically sends an email to the email that they sign up with. They'd have to go in and click it to verify their account.

You might want this in your application, but we're going to turn that off just to simplify our build. Then go ahead and save that setting. So, now that we've confirmed we have this users table set up, we should be able to create an account from our app and see that new user show up here. So, let's go back to the app and click join now.

And I'll sign up giving it a name and email and a password and click create account.

If we go back into the users table, it looks like that didn't work. But don't worry, what we actually need to do is just hit refresh.

And then we will see that user is showing up in our table with their ID, display name, and email. So now that we're creating users who can log into our app, what should our application look like once users log in?

Because what we show them on the public facing side should be different from what they are able to see once they're inside of the application itself. So really, we're talking about the authenticated view versus the unauthenticated view.

Starting at the top, there should be changes within the navbar. If the user isn't logged into our app, we really don't want them to be able to create an event.

So we're actually going to be removing that from the landing page.

And we also don't need this whole call to action hero section inside of our app because users will already have joined.

So we'll remove that which means we have the ability to then display more events within the space of the screen that we have.

So let's head back into bolt turn on discuss mode and say now that we have off let's make it possible for only authenticated users to be able to create events.

So remove the create event item from the navbar for logged out users.

Also, the signin link should not be displayed and the join now button should instead be log out.

Great. So, we're making progress now.

We'll tell it that we also want to remove the hero section when a user is logged in.

Cool. Now, when a user is logged in, this is what they'll be seeing.

A nice clean list of events with no unnecessary information.

And then when we log out, we still have that hero section with the necessary calls to action. But if we pop open the details for an event, we're still showing the delete and edit buttons, but we don't want strangers on the internet to be able to delete and edit our events. So we'll tell Bolt that when a user is not authenticated, we should not display the edit or delete buttons on the event details modal.

So let's open up an event again.

And great, those buttons are no longer there.

So we're making great progress.

Let's head back into our Figma and get clear on our next steps. So, we've now designed the authenticated view of the page that we're showing events on.

We also want to add a new page for the user's profile and each user will have their own user profile which they have the key or the authority to access.

On this user profile page will show that users's information and we'll have two different tabs.

one for the events that they have marked themselves as attending and another for the events that they have created which should give them a simple and easy way to manage events in our app.

So the benefit of planning things out is we can grab screenshots from our plans and send them into Bolt to give it more context.

Again, however you do this and whether it's with pen and paper or some other tool is entirely up to you. So we'll share that screenshot with Bolt and tell it that when a user logs in, they should be routed to a new user profile page.

This page should have their user info at the top and two tabs. One for displaying the events they are attending.

And we'll specify that we'll build that functionality out later so it doesn't get confused trying to do too many things at the same time. And another one for events the user has created.

We'll tell it to refer to the attached image for context.

Since this is a little more advanced of a prompt, we're also going to enhance it for good measure.

Double check and see that it all looks good.

Then submit it. And it's okay if you don't understand everything it's telling you, but the more apps you build like this, the more of the process you're going to start to understand.

So, we'll submit the prompt. And now, when a user signs back into their current account, let's see what happens.

Well, they're not yet being routed to their profile, but we do have this profile item in the navbar. So, let's click that and see what it looks like. Cool.

It looks a lot like the screenshot that we shared.

We have our user information at the top.

We have a tab for the events that the user is attending and a tab for created events.

But on this tab, it looks like we have a bunch of events.

And scrolling down further, we have this entire event list. So that's obviously not what we want. And going back to the attending tab, looks like that event list is at the bottom here.

So let's tell Bolt to fix that. Let's tell Bolt that there are a few issues.

When the user logs in, they are not routed directly to their profile page.

on the profile page, the full event list is there.

If you scroll down, we do not want that because that should only be on its own dedicated page. And also in the events created tab of the user profile, we're seeing a bunch of events even though the user did not create them.

We only want to see events the user created in this tab.

All right, so we'll implement the plan.

Now, when we head over to the profile and we scroll down, the event list is gone on both views. And it's not showing us any events in the created tab, but it is telling us that no events were created.

And it's giving us this helpful button to create our first event from here.

But if we click it, it's routing us to the event list itself.

That's not what we want. So, I'll tell Bolt that when I click on the create your first event button from my profile, I'm routed to the events page. Instead, I should open the create event modal.

So we'll implement its plan and go back and check that.

Great. Now we are seeing that create event form like we would expect.

But something I'm noticing here is that there is this organizer field, but we don't want users to fill this out themselves.

We want to take that users's information and save them as the organizer of that event. So we'll tell it instead of the create event form having an organizer field, we want the organizer column to be filled in automatically based on the ID of the user who is creating that event.

So let's go ahead and create a new event to make sure that that's working like we wanted to.

Once we fill out all of this information for this event that I know all of you want to go to, when we click create that event and head to our events table, we will see that under the organizer column, our users ID has been automatically added as the organizer.

This is going to help our app keep track of which users created which events and then display those events to them within their user profile. And we're seeing the event that we created. If we pop it open, remember we have these delete and edit buttons.

That's great if we are the organizer of the event, but if we didn't create the event, we shouldn't be able to delete it or edit it. If we go to the event list, we'll probably find that we can click the delete and edit buttons on every event, even if we didn't create that event.

But when I click on the events link in the navbar, we're not actually routed to that event list.

And also, there's this messy text here, which looks like it says something like back to events. So, let's clean this up quickly and then we'll return to fixing who's seeing the right buttons on the right events.

So, we'll tell Bolt to fix the navbar functionality so that when we click on the events item, we're routed to the homepages event list and also remove that ugly back to events item from the navbar. Once it runs through that, we can test that out. If we go to profile and then click events, we are routed to the event list. And now we can continue where we left off. As you can see, even though I did not create this specific event, I can still delete and edit it.

So, we'll tell it that a user should only ever see the delete and edit buttons on the event details modal of the events they actually created, or in other words, that they are the organizer of.

So now, when I open an event that I did not create, I do not have the ability to delete or update it. Perfect.

So this is another example of authorization where only the user who has created an event has the authority over that event and the ability to update and delete it. Next up, there is a button that we do want to be displaying here and that is an attend button that users can click to say that they are attending that event.

Then those events can be displayed here in the attending tab. In order to get this to work, what we're really talking about is relational databases, which you should remember us covering earlier in the foundation section. So let's get clear on how all of this is going to work where we allow users to mark themselves as attending events.

From the event list, they open up the event details modal and they'll click on a new attend button.

This is going to make a post request to create a row in a table in Superbase called event attendees.

Our back end is going to be using relational databases where it's relating users to events with this separate event attendees table which is like a bridge between them.

We have a row for each event attendee and it has a column for that user's ID and the event ID.

So let's head back into Bolt.

We'll start with the user interface and tell Bolt to add an attend button on the event details modal for users who are authenticated.

Now when we open that event details modal great, we're seeing this nice attend button.

Now let's make it work.

So I'll say when a user clicks on the attend button, I want them to be added as an attendee of that event.

So create a new superbase table for event attendees that can track the attendees of events.

We will call this table event attendees.

We'll confirm that we want to apply the changes and create that new table.

So when we open up an event and click that button, we should be added to that table.

But when we do that, we see this error.

So let's attempt to fix it.

Looks like it figured itself out.

Now when we click attend, it's now showing there's one attendee for this event.

And the state of this button switched from attend event to leave event, which is a nice logical assumption that Bolt built in.

So let's go to our superbase and double check that we actually have that events table, which we do. And we have this event attendee row with the events ID and the users ID. Now over in our profile, we should be seeing the events that we have marked ourselves as attending.

So let's tell Bolt in the user profile display the events that user is attending under their events attending tab.

Checking that out here is that event that we marked ourselves as attending and we can view those details.

We can leave the event if we wanted to.

So that is a great user experience.

If we look back at the event that we created, we can also mark ourselves as attending that event. Something we do want to change, however, is the fact we're displaying the organizer here.

We don't need to show the organizer's ID to everyone in our application.

So let's just ask Bolt to remove this from the details view.

We don't need to display the organizer.

We want to keep that data on the back end only. Now if we look at that event again, nice. We're no longer seeing that organizer.

Let's double check that the leave event button is working.

Looks like it is. If we head back into our profile, it's no longer showing up in our attending tab. Great.

So it is working. There's a little more work to do. If we log out and we go to an event, we can make the app more effective at inviting people to join by adding a button to the event details itself that invites them to join to attend.

So, we'll tell Bolt on the event details modal for a non-authenticated user, show a join to attend button that pops open the signup modal. Now, if the user is not logged in and they open an event, they'll be invited to join the event and create their account.

Great. We've built out our entire app and for users that are new or not logged in, we have this nice landing page which invites them to join the movement and explore our events. They can learn more about that event and we're encouraging them to join our app to attend.

Once they have joined, they can log back into their account and they have a customized profile that shows the events they've marked as attending, the events they've created, which means we're building this cool community of people who can create and share their events. And users can explore other people's events and mark themselves as attending those.

So, our app is super useful and you could duplicate this same functionality for any kind of event, whether it's music, social events, volunteer events.

But of course, an app is not actually useful unless it is available on the internet for people to find and use. So, in this next section, we're going to learn how to publish our app, which is simpler than you might think, so that we can share what we built with the world and get actual people using our app.

The official term for publishing your app is called deployment, which is the process of putting your finished site online.

So when you hit publish and bolt, it builds your project, packaging up everything you've created into a ready to go website. Then Netlify, a hosting service that puts websites live on the internet, picks up that package, and delivers it to the world through your own link. When it's finished with that process, it'll tell us that the site has been successfully published.

And you can view it at this link.

And here is the app we built living on the internet for anyone to use. If we shared this URL, then other people can use our actual app.

In order to uh take ownership and control over this project, you can transfer this Netlefi project into your own Netlefy account.

If we click this, we can either log into our Netifi account or sign up. If we don't yet have one, we could use something like GitHub or GitLab or just sign up with an email.

If it's our first time, we're going to have to go into our email and verify our account.

Then go ahead and log in.

Notice how it's telling us we can claim our apps on Netlefi. So, we will click claim apps.

Now, we've successfully claimed our Bolt project. We can view that project.

And here's the dashboard for the project. We can go into the configuration and do things like change the project name because we probably don't want to name this Sensational Cactus or whatever random name was generated for it. So instead, we'll call this show go app. A benefit of using Netlfi is that it offers continuous deployment, which means that your site can be set up to automatically update whenever you make changes to your app.

Netlifi enables this by watching your project for updates and instantly publishing them live. We won't set that up now, but it is a powerful option you can explore.

I also want to show you domain management because right now the domain name that our app lives at is showapp.

netifi.app.

app. This is what users would have to type into their browser to find you.

And it's likely that you actually want to set up your own custom domain.

So, if you go to add a domain, you can add a domain you already own. If you purchase one on another site like godaddy.com or we can actually buy a domain name within netlefi.

We can search for something that we want like showo.app and it looks like that's not available, but there is showgo.

live which is a perfect domain name for our app.

So, if we wanted to, we could go ahead and buy this. And then in domain management, we could set that up as the primary domain name that users would actually type in and see in the browser.

That covers the basics of what you need to know to deploy your site, customize your domain name, and release your app into the world so that people can start using it, giving you feedback, and most importantly, making you money.

And I'm about to tell you all of my tips for how to monetize these kinds of projects.

But before I do that, I want to make sure that you have even more confidence to build these projects on your own.

So, let's go through a checklist for debugging when things go wrong during software composing.

Even when you're using powerful tools like Bolt, building software doesn't always go according to plan.

But here's the good news. That's all completely normal.

Bugs and errors aren't a sign that you did something wrong.

They're just part of the building process.

What matters is how you approach them.

One of the most common things you'll run into is a terminal error. We ran into a number of them during your app build.

When that happens, try this.

First, click attempt fix. If that doesn't solve it, turn on discuss mode and explain exactly what you're seeing.

Phrase your request as clearly as you can.

Now, let's talk about UI and UX issues.

These can show up in all kinds of ways.

Maybe a button doesn't take the user where it should, or something shows up in the wrong place on the screen.

When that happens, the best thing you can do is walk through your app like a real user would.

Click around. Notice what feels off.

Then clearly explain to the AI what you expected to happen and what actually happened instead.

Screenshots can really help here, especially for visual issues.

Another thing that can trip you up is what I call an AI error loop.

That's when the tool keeps trying to apply the same fix again and again without getting anywhere.

If you find yourself in that loop, it's time to switch things up.

If you've tried something three times and it's still not working, go back and revert to a version that did.

Then reword your request or break it into smaller steps.

And if nothing's working, just take a short break.

That mental reset can make a big difference.

Sometimes a feature looks like it's working, but it's not. You might see a confirmation message saying something was added or deleted, but nothing actually changed inside the database.

So, always check your database to verify that what your app looks like it's doing on the front end matches what is actually happening on the back end.

In the build section, you saw me open Chrome's developer tools and look at the console.

That's where you'll see useful logs and error messages you can share with the AI. If you're running into an issue, open the console, clear any existing errors, messages, or warnings, and then recreate the problem.

That way, you will see only the fresh, relevant output, making it easier to spot what's actually going wrong. Take a screenshot of what's in the console and ask your AI to help you debug.

And just like that, you've done it.

So, just take a quick second to appreciate what you've accomplished. You have built a complete full stack web application from the ground up. Think back to the start of this course. We began with the foundational concepts, the front end and the back end. the database as your app's memory, APIs as the messengers, and then authentication as the gatekeeper.

These were just some abstract ideas and concepts back then, but now they are real.

You didn't just learn about the front end, you designed and prompted a beautiful interactive user interface.

And you didn't just learn about the back end, you built one, creating a database in Superbase to store real data for your users and events. And you didn't just learn about authentication, you implemented a secure login system that gives users their own personal experience within your app.

So what you've just done in a matter of hours is something that just a few years ago would have required a computer science degree, three years of coding experience, and probably tens of thousands of dollars to build.

So you now have a superpower. You have the ability to take an idea from your mind and turn it into a real working piece of software that can be used by anyone in the world.

And this is what it means to be a winner in the AI revolution.

It's not about watching from the sidelines as many people are doing right now.

It's about stepping into the arena and feeling uncomfortable and becoming a builder.

You've taken a massive step on that path today. So now you have the skills and you've proven that you can do it.

The only question left is how do you monetize it?

So in our final chapter, I'm going to answer that for you.

I'll show you the exact blueprint for turning these powerful new skills into a real and sustainable income. So let's get into it.

All right, so you've seen how to build a complete full stack web application from scratch using nothing but natural language.

So you have the technical skills now, but the big question is how do you actually make money with this?

Like what's the point? So in this final chapter, I'm going to give you the complete blueprint for turning these skills into a real income. We have a lot to cover here. Uh so let me break down exactly what's coming up.

So firstly, I'm going to be revealing the best business model that you can start right now to monetize these skills, the AI automation agency, and I will back that up with proof, sharing five incredible examples of real people from our community who are already making thousands or even tens of thousands of dollars with these exact skills.

Next, we'll break down the most common and high demand services that these successful builders are offering to businesses.

This will give you a very clear starting point, showing you exactly what you can sell to businesses today.

And finally, I'll be walking you through my proven step-by-step process for signing your first few clients without you having to pay for ads or spending months creating content.

So, by the end of this chapter, you're going to have a clear and actionable plan.

So, let's get into it.

Now, before we dive into the how-to, let me just destroy a a huge misconception.

You didn't need to build the next Airbnb or create some revolutionary ventureback startup in order to make some money in the AI space these days. And the real opportunity is much much simpler and a lot more accessible to people like you and I.

It's helping businesses to make the single most important transition of the next decade, adopting AI.

So, think about it. Every business owner knows that they need AI to survive.

They're hearing about it everywhere now.

Good stuff and bad stuff. But for most of them, AI is just this abstract buzzword.

They don't know how to actually apply it in their own business and get some benefits from it. And right now, I can tell you from my own experience of running my agency, Morningside, that many businesses are stuck with these clunky spreadsheets or inefficient workflows that are costing them thousands and thousands of dollars a month.

And that's where you come in.

The skills that you've just learned allow you to build a bridge for these businesses.

You can create custom AI tools and intelligent dashboards and powerful software that helps them to automate their processes, understand their data better, and actually use AI to get ahead. So whether you like it or not, the future of business is simple.

It's going to be more software and less people.

And you you can now build that kind of powerful software that businesses need to make that jump.

But don't just take my word for it.

Of course, let's hear from some of the world's most famous businessmen about just how obvious and glaring this opportunity is.

If I was 25 years old today in 2024, what would I do?

I think everything is looking at AI now in a different way and I think AI growth is going to be exponential. So, anything to do with AI now, what could that be?

In the simplest form is helping people use the technology.

There's going to be a massive amount of people wanting to use it that don't know how to and they're willing to pay to solve that pain point.

Mark Cuban is saying the exact same thing that the biggest opportunity right now is helping small to medium-sized businesses who don't understand this technology but know that they needed to survive and they are absolutely right.

I've been running Morningside AI my agency for 2 and 1/2 years now and we've worked with dozens and dozens of businesses who are in this exact same position and we help them out with consulting and figuring out where AI can help them and then we build those systems for them and manage them longterm as an AI transformation partner.

And here's why we've been able to do that and be so successful over the past 2 and a half years. So according to recent data, there are 1.7 million businesses in the US alone that are making between half a million to $10 million per year. These are the small businesses that make up 62% of jobs in the USA.

And these businesses know they need AI and they need new software in order to stay competitive, but they can't afford to hire a traditional development agency for hundreds and hundreds of thousands of dollars.

And here's the key, there's basically no one there to help them right now.

All the big consulting firms are focused on helping other huge corporations with million-dollar contracts.

So this means that there's a massive starving market for the exact skills that you now have where you can offer 5 105 $20,000 services to these small businesses and make it actually affordable for them so that they can actually get some benefit of the AI revolution as well. And I was able to spot this opportunity 2 and a half years ago and start my agency because we've seen this pattern before.

When the internet first came out in the '90s, businesses were desperate for websites.

Well, eventually they were.

And the agencies that popped up to build those websites for them, they made fortunes.

And today it's not about websites.

It's about AI and AI powered software and AI automation and AI agents and you are now in the perfect position to build it for them. Like I said, I spotted this opportunity in in early 2023.

And my agency, Morningside AI, was built on this exact principle of helping businesses to make the transition by building custom AI systems and automations that they couldn't build themselves.

They don't know which ones they need and they don't have the ability to set them up themselves and also manage them. The skills that you've just learned, how to build AI integrated apps and systems are the foundation of this entire model. And the market for this stuff is still completely untapped.

Based on data from my own community, for every one person offering these kind of AI development services, there are 1,100 businesses in the US alone that need help.

The most powerful way to monetize the skills you've just gained is by offering AI automation and custom software services to small businesses.

This is the core of what I call the AI automation agency or AAA model.

the exact model that I used to build my own agency, Morningside, which has allowed us to work with some of the world's biggest brands and generate millions of dollars in revenue. And the best part is that this path is accessible to you right now.

And it's not just me getting success with this either.

There's thousands of people in my community that are already on this path, turning their AI development skills like what you just learned into real income. So don't take my word for it. Let me show you what's happening right now within the community.

Real examples of people taking these skills and making money with it.

Take Noah Santon and his agency, Born and Brand.

They're a perfect example of this. So, they build what are called MVPs or minimum viable products for their clients.

And get this, they can go from just an idea to a working app in an average of only 14 days.

And they're charging an average of $15,000 for these projects, plus some monthly retainers as well. The value for business owners is so clear.

They are saving months and potentially hundreds of thousands of dollars in order to test their software ideas. And Noah's offer is so good, they've even been noticed by Versel, the creators of one of the top AI development tools. Then there's Ryan Duffy from Fitted Automation.

He's building entire custom platforms for his clients, integrating everything from CRM to AI chat bots, and he's locked in retainers of $5,000 a month.

He's showing that one person with these skills can deliver what used to take an entire software engineering team to do.

Another example is Ahmed Muktar of Agent XAI, and he's built a sophisticated HIPPA compliant AI medical assistant.

So, the client paid over $5,600 for just the initial build, and Ahmed has also secured 20% equity in the company.

And it's not just happening in the US.

We have guys like Lucas Malatak in Slovakia building a complete financial planning platform called Finn Plan Pro with no prior coding experience. He charged over $7,300 for the build and gets $400 every month on retainer from his client.

Another community member Patrick Burn is tackling the manufacturing industry building complex supply chain platforms using these vibe coding tools and he's landed clients on a $15,000 per month retainers for the ongoing work that he's doing for them. And finally, we have Toby Fox Mason who is whipping up some incredible dashboards for some massive clients like UCLA Health for $3,500 and the Saudi Ministry of Health for $1,800.

So, what I'm saying is that this stuff isn't hypotheticals.

These are real people from my community achieving incredible results with the exact kinds of skills that you're developing right now.

So, the next step is what can you actually offer?

So, based on what's clearly working, here are some of the high demanded services that you can start with.

Firstly, we have rapid prototyping and MVP development.

So, think about it. Lots of people have ideas, particularly business owners, but they're terrified of spending $50,000 or waiting three to six months for a traditional developer to get it done.

With these skills you have now, you can be the solution. You can offer to build a functional prototype at a minimum viable product in weeks, not months, and for a fraction of the cost.

Remember Noah's agency we just talked about?

Their offer is so powerful that they have a 87.5% close rate on their sales calls.

So, you can structure similar packages, maybe starting at a $1,000 to $5,000 for an initial MVP.

You then prove the concept and then you can upsell them with more development later.

The second proven offer that you can start with is the custom internal tools and dashboards.

Like I said before, so many businesses are running on clunky and outdated systems or just like a total mess of spreadsheets. And so with these skills, you now have the power to fix that.

You can build them custom CRM or or project management tools or intelligent analytics dashboards that streamline their entire operation.

For example, Stfan Floren who built a custom CRM for a HVAC company for $3,700 upfront plus a monthly retainer.

Or Toby Foxmason's dashboards from before.

These projects solve a very specific and very expensive problem for businesses.

And the third proven offer is niche SAS MVPs.

So this is a bit more of an advanced play, but as your skills grow, you can start to spot recurring problems in a specific industry.

It's like Ahmed's Helix AI for the medical field that we talked about before, you can build a targeted software solution and potentially even get equity in the business if you help one of your clients to build one of these softwares that solves a specific problem in their industry.

Okay, so now you know what you can offer.

Let's break down how you actually get your first client.

Step one is to deepen your skills and build your portfolio.

First things first, if you haven't already, you need to join my free school community. This one is a non-negotiable because it's where you're going to find all of the resources and the templates and the guides that I mentioned.

The link is in the description if you haven't joined already.

And once you're in, you can find the YouTube resources post for this video.

And in there, there'll be a link to all of the resources I've mentioned.

And inside there's also my entire free course which is all around how to start an AI automation agency. There's a lot of business strategy concepts and also full guides like this on how to build AI automations and also AI agents as well.

The next step is that you need to practice deliberately become a real builder and practice these skills more.

An easy way to do this is to go into my community and find what others have built on Bolt or Lovable or Replet.

Just search up Vibe Coding or Bolt or Lovable etc. and then challenge yourself to be able to rebuild what they've done.

And this is how you truly learn by taking the skills we've taught here and be able to flex them to solve your own problems and build on top of what we've taught here.

Another great way to further your skills is to build your own personal projects.

Create some handy tools or apps for yourself. Maybe you want to make a LinkedIn content generator or an AI performance coach. These kind of projects become your portfolio of things that you've done. The proof that you know what you're talking about and that's going to help you to get your clients in the next step.

And finally, you need to stay on the cutting edge.

This space of of software composing and vibe coding is moving very very fast.

So keep watching tutorials, keep staying active in the community to see what other people are doing with it.

And just really make sure you're up to date on the latest tools and techniques.

And for those who want to take their skills to the next level, once you've got a good grip on things like Bolt, you can then explore tools like Cursor to add even more advanced functionality to the apps you build.

A very common way of building more advanced apps is to build it initially in Bolt and to move it to Cursor to do even more advanced stuff and then move it back to Bolt and then deploy it there. And step two is to gain real world experience by offering your value for free. And this step is crucial and many many people miss it.

The fastest way to build credibility and testimonials is to do your first one or two projects for other people for free.

So you can frame it as building your portfolio.

If you just go onto my school community and post an introduction something like, "Hey everyone, I've been mastering AI app development with tools I built and I've built." Mention a personal project that you built recently in step one and I'm looking to build one to two more real world projects for free and add them to my portfolio.

Does anyone need some kind of prototype or custom internal tool built?

I'll be happy to chat and help. So when you get a project, deliver excellence.

Treat it like it's a $10,000 project.

Your goal is to make your client ecstatic.

And then you ask the magic questions.

Firstly, I'm so glad you're happy with the result.

Would you mind sharing your experience in a post in Liam School community?

It would mean the world to me.

That is an extremely powerful method, giving you social proof and helping you to get your first paying clients.

And the second thing that you should be asking to your clients is, amazing, now that you've seen what's possible, do you know anyone else who might benefit from a similar solution?

I'm now taking on paid projects starting around your initial starting price, maybe 500, a,000, 2,000. And that's how you get referrals where your past clients or the free clients you've worked with refer you to other people who become your paid clients.

So, trust me on this. It's one or two successful free projects with public testimonials posted in the school community will generate more paid leads than you can handle.

One of the great things about my community is that we support those who give first and that is the easiest way to shoot to the top and be recognized for what you do. Step three is to transition into paid projects and start marketing yourself properly. So once you have a couple of case studies and a good portfolio, it's time to start charging.

The most effective method for getting these paid clients at this stage is to use warm outreach. This is an untapped gold mine which is basically sending out messages to your existing network, your friends, family, schoolmates or colleagues or any even acquaintances, people that you barely know, anyone that you follow on Instagram or have ever had in your contacts. I'll leave a link to Alex from Guide to Warm Outreach, which is incredible.

I'm not even going to try to top it. Uh it's really, really good and it's free. I'll leave a link in the resources for this video on school.

Basically, his method is to reach out to 20 to 30 people that you know per day, not to sell to them directly, but to ask them for referrals. A simple message works best.

You can say, "Hey, name hope you're well.

Just a quick one.

I've recently been building custom web apps for businesses.

I've built mention your portfolio here.

Do you know any business owners struggling with a common pain point that you think they'd be struggling with?

I'm offering my services at a very competitive rate.

Now, any intros will be hugely appreciated.

The warm outreach strategy is based around getting hundreds and hundreds of people that you could reach out to and then just blasting that message out to 20 or 30 people per day and eventually people are going to start coming back and saying, "Oh yeah, hey, I know someone who could be interested in this.

" And that is the most reliable way of getting paid clients.

Another great way to start getting paid clients is through what I call the community content flywheel.

There's a guy in my free community called Rory Ridges and he's been doing this perfectly where he's basically making YouTube videos about what he's learning on his journey, things he's doing for clients, the cool things that he's done personally, and then when he posts them on YouTube, he then shares them back into the school community for this 200,000 people who are also very interested in the same things to say, "Hey, that's a cool video, Rory.

" And they check out his YouTube channel.

He starts to get views.

He starts to get subscribers.

And by doing this community content flywheel love of creating content on say YouTube or LinkedIn, then posting it back in the school community, you start to get an audience for yourself much faster than if you're just relying on the algorithm alone.

So to do this, you can start off real simple.

Just record yourself building a small tool or or something cool that you made, then write a post or or film a video about it, then share it on just one platform. Just pick one and do it.

And you don't need to do a whole bunch of them, trust me. Just if you just do one and do it well, you'll get all the leads that you ever needed.

So say it's on YouTube, then you can share that YouTube link and make a little post about it in my school community and say, "Hey guys, this is something that I learned when I was doing XYZ.

This might be helpful for you guys. Let me know if you want to see anything else." So like I said, this kind of crossosting jump starts your channel or or your profile growth on something like LinkedIn and and also builds your reputation in our community and attracts inbound leads over time through it. Then you need to set your initial pricing.

I recommend that you start with project based pricing.

So for an MVP, it could be anywhere from $500 to $5,000. And as you get better, you can move to monthly retainers like Ryan Duffy where he's got it at $5,000 a month or Patrick Burn where he's got it at $15,000 a month.

Now, what I've just laid out, it's not about just landing a few freelance gigs, right?

This is the foundational path to building your own sustainable and scalable AI automation agency.

So, you start by delivering these AI built web apps.

You provide incredible value to your clients and then you can start to expand your services. You can hire other specialists in AI agents or AI automations to work under you or even other software composers so that you can focus on growing the business.

So this is the path that I took with Morningside AI and now we have a killer development team and a killer AI consulting team as well where we're doing development deals with huge companies for $200,000 or more and $60,000 AI audits that we do in just 4 weeks.

So while we didn't get to that point overnight, it is the path that tens of thousands of people in our community are on right now.

So the skills you've learned in this video are your entry ticket. The demand for the stuff is enormous. Businesses need these solutions to stay competitive.

And now you have the ability to provide them.

So the opportunity is here.

Right now you have the foundational skills.

You've seen the proof. The next step, the most crucial step is to take action.

If you haven't already followed these tutorials and you just skipped the end, go back and do it and then dive into my school community.

It is the best place to be if you're trying to start an AI business and learn AI skills. So if you haven't already, that is your immediate next click after this video.

The resources, the incredible network in there, and the support, it's all there for you.

The link is going to be in the first link in the description.

Then once you're in there, you need to start building more projects.

Don't let these skills get rusty.

Replicate, innovate, build for yourself your own projects.

Copy what other people have done. The more you build, the more confident and more capable you'll become. The more skills you're going to add on to this incredible foundation that you've got now.

And then next, you need to start offering your skills. You got to take that leap.

Reach out to your network, post in the community, and don't be afraid to start small. Your first paid project doesn't need to be $15,000.

Just aim for a fair price for the value you deliver and grow from there. You need to think about this long term.

and overcharging someone and watching it blow up in your face because you couldn't deliver that value is just going to completely derail your journey.

And of course, like this video and subscribe if you haven't already.

Uh, and share it with your friends and family.

I put a lot of work into these videos and I just really like for as many people to be helped by this as possible.

And by subscribing, you're going to make sure that you're in the loop to see all of my future videos on learning AI skills and monetizing them and building businesses around them.

So, to wrap up, just remember those names that we talked about. Yeah, we have Noah Ryan Ahmed Lucas Patrick Toby.

They all started from a point of learning of initial skills just like you.

And they embraced these new AI development tools and put in the effort to master them and are now out there delivering incredible value and earning significant income by using these skills.

And you absolutely can, too.

And I'm not going to sit here and tell you that it's always going to be easy.

There are going to be challenges and bugs to fix and moments of doubt.

But the ability to create software with AI and to bring your ideas to life is a superpower in today's world. And now you possess the beginnings of that superpower.

All the resources we've discussed and the links, the tools, and the incredible support of my school community are waiting for you.

The path is clear. So, let's get building.

And more importantly, let's get you monetizing these incredible new skills.

The AI revolution isn't waiting, and neither should you. Your future as a software composer and as an AI automation agency owner starts today.

So, if you want to jump straight into mastering no code AI automation in 100 minutes, you can check out that video up here.

It's definitely the best sort of complimentary skill to add on top of what you already know, and that's one of my most comprehensive videos to date.

But guys, that is all for the video.

Congratulations on making it through.

I'm so proud of you and I'm so excited for the journey that you're about to start on.

That's all for me.