Overview
Everyone made it through the pandemic in different ways. Some learned new skills, some adopted pets, for my wife and I, we started a journey down a rabbit hole of horror films. Every night at 7pm, a new film would be on the TV. The ones we really liked made it to a shared notes app on our iphones. Before we knew it, we had a highly currated list of really good films we would recommend to anyone (age appropriate). This year, I saw this list as an opportunity to try vibe coding and create a website we could share with friends and family.
Where to start
A coworker of mine at Oracle loved being on the forefront of all the new technologies. A trait very valuable in tech. She told me about her amazing time building an online store using Lovable.dev. That was enough for me to jump head first and see what Lovable was all about. Starting with only a list of movies and an idea, I created an account at Lovable. My first prompt wasn't exactly well polished but to my amazement, it did generate something!
Understanding my part to play
HTML, css, databases, javascript, all the necessary technology to create a website appeared before me. I was impressed that AI could create all this for me so fast. However, it became apparent where my skills would be needed. There was a long way to go from what Lovable just output to having something I would want to share with friends and family. The list of films was unengaging and the color palette was dark, not in a spooky way, but in an unusable way. This is where I began my edits learning how to help AI see the vision I wanted for this project.
I needed colors, images, calls-to-action, a way to differentiate the types of movies. I also need to analyze what was given to me. There are some mistakes, like movies that are "upcoming" that aren't because I've already seen them. I start working with the AI agent to tackle some of these UX principals I will need for a human audience. Through several prompts like, "use this color palette" and "I need an image for each movie", I got the site looking something like this:
Bringing the human factor
I'm making some progress now. I have removed the errors I saw with movies being "upcoming". I've asked for images and gotten some, though not the real movie images. I have descriptions now for the movies that are short enough that, if interested, a user will want to learn more. These make my default call-to-actions. I've grabbed a piece of an Edgar Allen Poe poem to help name my site and give it further theme. The Lovable AI platform has already provided me with a search, sort and filter capability. Now I need to decide if I want to keep it or not and if I want to expand on it. We are a far ways away from done but the site is taking shape. AI is outputting code, ready to be used live, while I am making changes on behalf of the human interest.
Some AI hangups
This being my first jump into the AI service, I don't know how hard to push the system or where it will be blocked or stop. I want real movie images. The same posters that were used to promote the movie when it was in theaters should be here as well. "Lovable, please find the movie poster for each movie and apply it to the movie card on the homepage." ... No luck. The system doesn't know where to look for those images, can't use them for copyright purposes or the appearance of copyright, and the tax on the system to just reach out to the entire internet and grab these is too much. I need to be more specific and I need to help the AI know where to look and or what to grab.
I spent the next several days updating movie images, cast information, previews, and synopses. The site was getting to a place where I think I can show it off to a few friends. The point of the site is to showcase my wife and I's choices for great horror films but also give the user the needed information to decide if they might like it as well. Incorporating the movie trailers, cast, crew and synopses make those decisions easier, especially the trailers. Since I don't want to host the trailers myself, I work with AI to get the trailer off of you tube and embeded into the site.
A human usable site, an AI built product
Once all the movies were added, trailers, posters, cast, directors and so on, I had just about all the information I needed for this site. I decided to push the AI a little further and ask for capabilities that I knew I couldn't code myself. I wanted users, passwords, rating systems and reviews. The AI didn't even flinch at these requests and using some of the other free tools available to me like supabase and resend, I had a website that shared the six years worth of movie watching work my wife and I had done.
