I Gave Myself Two Weeks To Build a Website From Scratch Using AI - Here’s What I Learned
The Video That Blew My Mind
I wasn’t a believer in the power of AI until a few weeks ago. I have a PM on my team at work who constantly emphasizes the value of using AI in our workflows to boost productivity. I started seeing a bunch of the engineers on the team integrate AI into their day-to-day and backend services and I couldn’t believe how powerful it was. I started playing around with GitHub Copilot to see what additional value I could derive from it for my role, and HOLY SH*T, it was auto-completing my queries, writing descriptions for fields, suggesting ways to write analyses without even having access to a dataset. MY MIND WAS BLOWN. I then went down a YouTube rabbit hole. I watched video after video, and I couldn't believe what I was seeing. People were building full-stack applications in under an hour without writing a single line of code. I immediately knew I needed to get in on the action and test it out. This blog post will describe what I built and what I learned. In the past, I’ve done really in-depth technical write-ups on how I achieved certain solutions, but this time around, I am going to focus on sharing my learnings and highlight some tips and tricks I picked up along the way.
This is the YouTube video from Riley Brown that first made my jaw hit the floor was this one. 2-hours straight of practical vibe coding on Cursor. The video contains three demos; each one builds on each other. Riley starts off with giving an overview of Cursor and then proceeds to tell the agent to create a box with balls bouncing around in it, and within a matter of seconds and without a single line of code, he had a functioning webpage that did just that. Next, he moved on to building a site that generates images based on a user description which was an introduction into the use of APIs in Cursor. Lastly, he goes on to build a deep research application that generates in-line diagrams to explain complex topics. This introduced me to the concept of connecting, writing, and reading from a database. These demos got me thinking about all of the ideas I’ve had over the years that I never carried out because building a mobile app or a website was hard - not any more. I gave myself two weeks to come up with an idea, create wireframes, draft requirements, and develop and launch a functioning website for you to use.
My Idea - Find Recipes Based on Ingredients
I immediately began to rack my brain for ideas that I could turn into fun, easy, and helpful applications. As a home cook, one of the challenges I have is knowing what to do with ingredients that I have or that are about to expire. Traditional food or recipe sites and blogs require you to either know the recipe you want to make or they’ll display new and popular recipes for you to become inspired by. The problem with this way of searching for recipes is that, once you know what you want to make, you then have to go acquire the ingredients. I wanted to flip this concept on its head. What if we could provide a list of ingredients into a search box and have an application return only recipes that use up your ingredients - NOT ONLY THAT - it tells you the percentage of the recipe’s ingredients that you have and what you still need. This was the idea for the web application I built which you can visit now by going to dishcover.recipes
My Solution is dishcover.recipes
I built a site that allows users to discover new dishes based on the ingredients they provide - this concept allowed me to came up with a new verb that I used to name my site - dishcover (discover x dishes = dishcover, get it? 😅). Below you’ll see some screenshots from my site. The main user flow is this
Input one or more ingredients into the text box and tap to search for recipes that use up some percentage of the ingredients you have
Browse relevant recipe cards which display recipe image, duration, steps, servings, score, missing ingredients, and percent match to the ingredients you have, and more
Preview the recipe directly from the recipe results page or go to the full recipe page
If you like the recipe, and want to save it for a later time, you can save the recipe to your Cookbook page, which is a collection of your saved recipes - for each recipe, you can leave personalized notes so you can remember important steps or changes you made when making the recipes (e.g. “Use less sugar next time”, “Substitute broccoli for peas”)
While these are the main actions, there are plenty of quality of life improvements that were a nightmare to implement, but core to building a site like this that i’ll get into later - recipe filtering, sorting, redirects, popover modules, returning back to cached search results, saving recipes, logging in via Google OAuth to view your cookbook, and more.
In the next section, I’ll talk about how I sized up the problem and got started
I Built My Website From Scratch - Here’s How I Did it
From the video I shared earlier, I had a general sense of what I needed to do to spin up a website. Use Cursor as my AI pair programmer who will do most of the heavy lifting, use Supabase for auth and database capabilities, and I’d deploy my site using Vercel.
But before even touching an IDE or writing a line of code, I started building wire frames and writing down requirements that would help guide the project. I did some preliminary wire framing in Figma which you’ll find below - feel free to browse around on these to see my thought process for the site. In Figma, I created a super barebones user journey; visualizing how they’d navigate through the site. Believe it or not, I spent a few hours putting this together - being a designer is HARD work. I took some inspiration from Bon Appétit, Recipes.com, Google Recipes, and other food blogs which helped me to mock up some really basic components. These wireframes would be the starting point for my site.
Next, I took an attempt at writing some loose requirements that will help guide and constrain the scope of the site. As I wasn’t going to be the one developing the site, I provided as much context as I could so that Cursor could build context around what it needed to build. To start, I asked ChatGPT for how do create a requirements doc, specifically for guiding development using the Cursor/Vercel stack. ChatGPT provided me with a nice framework that I could fill out give to the Cursor agent. I copy and pasted the template in a Google Doc and filled it out with information about dishcover.recipes. Below you can take a read through what my finished template looked like.
Once I was happy with the MVP of my Figma wire frame and requirements, I loaded any applicable screenshots and paragraphs into Cursor, said a prayer, hit enter, and let Cursor agent go to work. It was actually remarkable how close Cursor got to delivering the base functionality on the first try, but there was still days worth of prompting to get it to a finished product. This blog is unlike other ones I’ve done in the past. In previous blog posts, I’d give really in-depth technical explanations and walk-throughs for how I achieved certain parts of my solutions, but this time around is so much different. With the state of AI assistants and how advanced they are, you could achieve a similar solution by just conversing with your favorite AI-assistant. Long gone are the days of having to troubleshoot on your own or follow tedious instructions step-by-step. Now you can just say “Build me a this or troubleshoot that” and you don’t really need to know how it’s done. That is why I am skipping the technical explanations for this project and just discussing what I learned. For a project like this, it’s more about knowing how to engage with the LLMs and AI-assistants than really having a deep understanding of software development. While, yes, it is helpful. I think someone who comes from a non-technical background could achieve a similar output, maybe just not in the same amount of time.
Below I’ve put together some of my learnings from this project, but at a high-level I was able to get a working solution by using Cursor to develop a front-end and back-end. Supabase was used for Google authentication and data storage. This allows users to sign into their cookbook and view the recipes they’ve saved and their notes about them. My codebase was hosted in GitHub and the project was deployed with Vercel. I purchased the domain dishcover.recipes and was able to use Vercel and NameCheap to have the website visible on the domain I purchased. My desire to launch a website like this was ultimately driven by my curiosity for understanding of how these tools work and how they can work together. It’s amazing that I can just type in “Here is the documentation for Spoonacular and this is my API key. Can you put my key in a secure place and then figure out how to get raw recipe information back from the recipe endpoint? We are going to need to need this information for displaying recipe information on the recipe cards” and Cursor will make it work in under 5 mins - this would have otherwise taken me days if not weeks to figure out how to make the calls and return data, let alone have it display in the right places programmatically across my entire site - forget it. The power of these tools is truly unbelievable, and below you’ll find some of my learnings from this project.
What I Learned From Launching recipes.dishcover & What I’d Do Differently Next Time
-
I learned this the hard way. I had a complete working prototype with must of the site’s initial functionality done running perfectly on my local host. However, I then asked Cursor to deploy to Vercel and it was game over. I had to work through error after error until I got something that would display on Vercel. I probably spent another 5 hours over two days troubleshooting these errors. It was miserable and it felt like I may need to start fresh and change my strategy. After I had a working Vercel deployment, I then came up with a new workflow all together. I created a dev branch off my working production branch. I would pull down main into a new feature branch for each new small UX or UI improvement I made. I also found out that Vercel will deploy any branches that are pushed to your GitHub repo automatically making testing through Vercel super easy. My advice is to start deploying on Vercel immediately after you get a version of your site to display on your local host. I certainly learned the hard way.
-
Tools like Cursor, Loveable, v0, and Windsurf make it really easy to get a functional website up and running in no time. But, what I learned after this experience is that making a site that looks good is REALLY hard. Maybe it’s just me and being new to vibe coding, but my site looked like a kindergartener made it when I finally got a working version deployed on Vercel - it looked very similar to what you see in the wire frames. I knew I needed a way to make my site look better once I had functioning, but I wasn’t sure how.
After some research, I found tools like 21st.dev are great for building awesome components like buttons, search boxes, nav bars, effects, and more (here are a few I found that I wanted to include in my site Feature Section with Grid, Landing Page, Popover Button, Shuffle Grid, Aurora Background). With these components, you can generate its code and a prompt through 21st.dev that you can give to your Cursor agent for it to implement. The free version of 21st.dev has limited designs, but I can see this being really powerful for building really cool and modern UI with the paid version.
Another tool, I tried out was relume.io. Relume is a tool that takes your sitemap and turns it into wireframes. Through a UI you can apply style guides and themes to the wire frames making for a really organized and modern looking web page. By the time I found out about relume, it was too late. Relume would be a great first step to help come up for a theme or style for your website once you know which pages your site will contain.
It’s also found that it’s super important to have brand identity. To achieve this, I provided ChatGPT with an overview of what my site allows users to do, and I asked it for some clever site names. This is how I ended up with dishcover and my site slogan - Taste More. Waste Less. Dishcover Your Next Dish. I also played around with a few logo generators, and serendipitously landed on the one that is featured on the site today - a home cook with a mustache - just like me 👨🏻. With most of my site assets ready to go, I let Cursor take the wheel. I prompted it with something like - “You are the world’s best UI developer. Your role is to make the website look beautiful. Just focus on making the site look clean, simple, and modern. Do not change any of the functionality of the site, just make the site follow a single theme and color pallet. You know what users want to see - so go ahead and give it to them. With this prompt, the Cursor agent took my UI from looking like a 3rd grader designed it to something fairly passable. I then made several tiny incremental updates to the site’s appearance in order to get to the finished product, but Cursor did much of the heavy lifting for me. Had I brought more ideas to the table around themes, colors, creatives, and more, I’d bet my site would look much better - but beauty is in the eye of the beholder.
-
This project has taught me that you can’t just expect your agent to know exactly what to do - you need to be almost overly prescriptive. Instead of saying “Can you add a button to search for recipes”, say something like “Add a button just below the header image that says “Search” that, when tapped, will allow the user to search for recipes that match the ingredients they just input. Here is a great resource on prompting that I took a great deal of direction from during this project - The Prompt Engineering Playbook for Programmers
-
Before starting this project, I had this naive belief that an AI assistant like ChatGPT or Gemini could scrape the internet for recipes that match a list of ingredients and return back the recipes that match those ingredients. While to some extent, this is true, for this project, I learned that it wouldn’t be feasible to display recipe cards to the user that all contain the same relevant information in this way. I ended up incorporating Spoonacular into my site. Spoonacular is an API that gives users access to over 5,000 recipes and provides with the ability to search for recipes by ingredients. Once I get the recipe ids from the Spoonacular endpoint, I pass that ID to the Recipe Information endpoint which returns back all of tje raw information about each recipe such as duration, recipe summary, score, instructions, and more. While they offer a free tier of their API, I ended up paying for their basic tier because I kept going over the daily request limit. If you are going to make an application where you need to display relevant information to users, think a lot about where you are going to source that data from. I got lucky that this API existed, otherwise I would have needed to explore other alternatives or scrap this idea entirely.
-
Throughout this project I found myself saying, “It’d be neat if users could do XYZ or it would be cool if…” but these features weren’t included in my initial plan and this often led me down so many rabbit holes, taking time away from just completing my project. I’m not saying it’s wrong to want to try add in cool new features or functionalities, but it does take time away from shipping your product. If I had more time I would have focused more on making the site responsive for viewing on mobile, I’d work on the button effects and general button styling, I’d work on making the cookbook page more personal by adding recipes that you “May Also Like” based on your saved recipe cards or search history. Heck, there were times were I wanted to spend time formatting fonts and justifying titles just to make the site more aesthetically pleasing, but I also had a backlog of other features that needed to get implemented just for the site to work as I intended it to. I kept reminding myself that the Bon Appétit site and wasn’t built over night and that they have teams of people working on it just to make it cohesive - I am proud I was able to deliver exactly what I set out to do, but “What If” is a question to explore in the context of application development.
-
In the video I shared earlier in this post, the creator was using Wispr Flow. This is a voice dictation software that converts speech to text within any text box you are hovered over. My initial reaction when first seeing this was - I am not going to speak to my computer to build this a website - that’s kind of silly. But then I tried it…and HOLY SH*T. I saved so much time typing. Wispr Flow provides users with stats about their usage and I am averaging 149 words per minute with this tool over the course of my project According to reddit, the average person does about 40 words per minute. I was able to almost 4x my typing speed in this project - significantly reducing the overall time it took to complete this project. While the voice dictation tool may not hear me perfectly every time, I found that Cursor was impressively good at overlooking those typos and grammatical issues by using context clues to answer the right question. I monitoring what was being sent to Cursor from Wispr Flow each time, and was really impressed with the synergy between the two tools. I know that Willow Voice is another popular tool in this space, if you want to give one of them a try.
-
It’s possible that there were better tools available to help me reach my desired solution. Typically, I’d spend more time researching before I get started with a project, heck, I spend days researching products before I purchase them, but in this case, I just wanted to jump in and start developing. I knew which tools to use because I saw that they worked in the YouTube video, but next time, I’d probably spend time conversing with an AI assistant about all my possible tools in the solution space and then choose the best one that works for me based on their strengths and weaknesses. For my next web or mobile based application project, I’ll look into using v0, Bolt, Lovable, GitHub Copilot in VSCode, or Replit for a trusty coding agent. For a backend-as-a-service, I’d explore Firebase, Parse, or NHost. UI is tough, and now I understand why designers get paid what they do, but I might explore v0, Figma MCP Server, Builder.io, Stitch, or Uizard. These options that I listed are just popular ones I found, but the space is rapidly changing so there may be new players in the space once I start on my next project. Ultimately, you should choose the tools that work best for you depending on your situation.
I’m Ready to Tackle My Next AI Project
At the time of releasing this post, I’ve taken on a few AI projects at work and I’ve just built my first website from scratch. What holds true across these experiences is that AI assistants helped get me across the finish line. There is no doubt that being able to work with AI assistants and LLMs has become and is going to be a highly valued skill in the workforce - it not only allows people to boost their productivity by saving time doing manual tasks, it is a HUGE unlock for solving difficult problems. By no means, am I an expert in this field, and this post is not intended to convince you that I am - I’m far from it. I am just getting started and excited to learn more in this space. Feel free to leave a comment about my website, suggest tools that make your workflow easier, share platforms or tips on how make your product more beautiful, or feel free to share your experience or thoughts on LLMs or AI assistants. Thanks for dropping by and reading this post. I hope you got to learn something new!
All the Best - Brandon
