I’ve been very critical of the AI craze since the whole thing started because I’m always skeptical about the flashy new buzzwords but this one’s had a unique run time and so I can’t say that I wasn’t curious about it. I started using Copilot in VSCode pretty early on in the AI craze and I found it to be mostly useful for accellerating my workflow but I wasn’t really able to move further with AI tools at the time. After discussing AI with some co-workers when I was at Kwiks I decided it would be beneficial to re-explore the topic a bit and use some of the tools to see how things were. I was impressed with ChatGPT’s abilities but I was mostly focused on it’s image generation capabilities so I wasn’t using it as a programming tool.
Jump to 2025 and I have a friend that’s heavily in to AI tools and uses them in his music projects. He’s so convinced that these AI tools are a game changer for everyone and that people underestimate their abilities that I had to debate with him about the usefulness of AI for professional use. We’ve discussed ChatGPT many, many times now over the past few months and I began using it again to poke around with some questions and see what it could do for programming since that’s my career focus. While I was poking around, my friend made a website with ChatGPT. He has no programming background and he told me that this website included a paywall so I was very eager to take a look at it! Within 5 minutes I realized that ChatGPT had developed a whole website in plain HTML and that I could right click and “hide element” to defeat the paywall (this might sound familiar to some). The problem here is that my friend, who has no programming background, would have never known that problem existed unless I had told him about it! I think that is a pretty good argument for the usefulness of ChatGPT (and AI in general) - it’s a great tool to accellerate workflows but it’s not a worker replacement because you still have to know what you are doing.
Building a Product
Now with the background out of the way I had an idea that would allow me to evaluate the usefulness of AI in my workflow long term and especially in personal projects because if I can use AI to fill in my weak spots that could be super useful. This idea coupled with the fact that Google is giving Gemini Pro away to students and all I needed was a project idea to get started so I decided to “vibe code” a simple social network!
Getting started I asked Gemini to come up with a home page idea for a social network:
Hello! I’m building a social network but I am terrible at design. Can you create a mock up of a home page that includes information about the platform and a space to login to an existing account with a professional looking dark pastel theme?
It came up with a couple of images for me as I prompted to change things to fit my idea more until it came up with this:
I really liked this design and I thought it fit my vision pretty well so I asked it to provide me with a color pallet and other design specifications in order to build it which it did, very verbosely. I then asked it to generate a React page for me that looked like that and it generated a React page… of something completely different! After trying 4 times to get the generated React page for that design I just told it to start over and build me something new:
Let’s start over from scratch. I need a professional, minimalistic home page that shows information about the platform while also providing a login area. This design should be primarily dark theme with only pastel colors.
The design it came up with looked okay so I decided to keep going:
Keeping the same design, let’s create a new page for an onboarding flow. The onboarding flow must include the following information:
Username
Full name
Password
Headline
Bio
Location
Work history
Education history
It also did this page pretty well but it had one text box for work and education history so I had to prompt it to break that out into separate sections which it did but I was a bit unhappy with the overall design it looked pretty ameturish so I prompted it to make some changes including taking up more of the horizontal space and changing some colors.
After this I worked on the backend a bit using Hono on Cloudflare Workers with Prisma, relying a lot less on Gemini since this is where the bulk of my experience is although I’ve never used Hono or Prisma before so I did have to ask some questions here and there which all went pretty smoothly. I did notice that when working on the backend sometimes it would forget how things were set up and it would often suggest insecure code for example, endpoints not requiring auth or not properly validating user data. However, it’s not just Gemini - I still have Copilot configured in my editor and Copilot often makes the same mistakes and did so here too but I’m used to the workflow of looking at the suggested code, refactoring and checking it and then moving on to the next feature. It’s vital that you don’t just accept these suggestions blindly because problems here could introduce major issues for your projects later.
Now I needed a Feed page which I prompted Gemini to design again and with some light prompting we worked through a design to get things fleshed out as I used it and poked around at the page to figure out what I felt should be tweaked. One thing I noticed is that when it was generating icons it was actually generating the SVG on the fly and sometimes those icons looked a bit “weird” though they were pretty close to existing icon libraries so it appears that it was trying to generate icons it was aware of but without telling me I could just include the icon library and use them directly from there. I had to prompt a few times to fix some of those icons and ended up swapping all of them out later with the icon pack they were “inspired” by. I also asked Gemini to include some basic animations which it did without any extra prompting which was pretty cool!
The backend for the feed page was okay I did most of it by hand like before but I did have Gemini draft the endpoints for me first so that I could see what it would suggest. It’s suggestions were mostly okay but it did omit some things I would typically include like pagination and some more flexable coding patterns to make adding features later easier.
Moving on to the profile page it was able to generate a decent design without a lot of prompting too so I used it almost directly from Gemini without a lot of tweaks.
Note that as all of this was happening I was making many minor tweaks to the code as I integrated it into my project. While Gemini was generating what I would consider good designs it wasn’t doing so in a DRY approach and it was frequently repeating code across pages, bundling components with page code and other minor code style issues that I was having to fix while moving things over. That being said, I was saving a ton of time and design is a weak point for me so I was pretty impressed with these results so far.
Adding Features
Now that I had a basic system set up and working I wanted to play around with adding full stack features and what better feature to start with than a chat system? So I prompted Gemini to architect a chat system:
I’m thinking about adding a chat system to my social network project but first I have to think about things from a high level and plan out the infrastructure, services, libraries, etc. The backend is built with Hono running in Cloudflare Workers using Prisma Postgres. I’d like this chat system to be real time including typing indicators, online indicators, etc. while also seamlessly transitioning offline when the user is done on the website so they can see their messages when they get back! This system will also have to support group chats between users. I am not interested in any calling features like voice or video calls but I am interested in supporting file sharing between users in chats as well. Any architectural recommendations for ways to design this system around my existing backend and infrastructure?
You can see that I’m being very specific with my prompt explaining what the next steps are and what considerations need to be taken into account. Gemini presented me with a well architected solution to add this feature using my existing system, even suggesting a service I have never used before Cloudflare Durable Objects. I mentioned that I wasn’t familiar with Durable Objects and Gemini explained it to me, I asked about pricing and again it explained it to me. It generated a Durable Object for me to throw in to my project again without a lot of tweaking and it worked great. I also had Gemini build out a basic chat UI for me in a Master/Detail flow similar to other messaging platforms which it did pretty well.
Detailing
Now that I had a pretty nice looking platform I wanted to focus on some of the “detail” work because there were a few elements that I thought could look better and have a better UX. To get started I wanted to highlight a word on the home page to make it stand out with some colors and animations but I wasn’t sure exactly what I wanted to do with it so I prompted Gemini with a more open ended question:
I have some text in a
<p>element that’s a header for a page and I want to make one of the words in that text animated. How can I achieve this with React/Vite and Tailwind. The animation should be subtle, professional, minimal and repeatable. I would like a preview in Canvas of anything generated.
Expectedly, this ended up taking quite a while with a lot of follow up prompts but eventually it did come up with something good that I locked on to and perfected with more prompts and I was able to integrate it into the project after about 45 minutes of prompting.
Next up was pretty much the same thing but with some bullet points on the same page:
I’m creating a primary feature list for my React/Vite website and the standard
<ul>is too boring. Keeping with the professional, dark, pastel theme can you design me a simple list with 4 bullet points that looks good and fits within my design?
Another open ended question and so as expected there were a lot of prompts to figure something out but this time it was much faster. It came up with some star icons that I then asked it to animate and then asked it to animate them randomly so they appeared to “twinkle” like stars on the page and it was able to do all of that very easily!
I won’t talk about each individual component here but I do think it’s important to touch on a couple of them to describe the overall experience more and I started to run in to problems redesigning the login area of the website. It took me about 4 hours to redesign the login area of the home page with Gemini and most of that was spent trying to get it to revert to a previous revision that it came up with. It seemed to get stuck in a loop when I would ask it to go back after making a change and it would take several prompts to get it to do so. It was pretty frustrating going back and forth with Gemini trying to get it to simply revert some changes.
Another weird issue that I had with Gemini was asking it to help solve a bug that I was having with my feed page. When I initially loaded the page it was jumping to the bottom of the posts feed automatically and then whenever I went back to the page and state was refreshed it would jump to the bottom again. Now, as someone without a ton of React experience I wasn’t really sure what the issue was and I was trying to not use Google, Stack Overflow, etc. and restrict myself to Gemini so I ended up locked into a massive loop for about 5 hours in which Gemini couldn’t figure out how to solve the problem. At one point I jumped over to ChatGPT and asked it the same question and ChatGPT was able to solve the problem in about 3 prompts. The problem was that a child component in the feed had the autoFocus parameter on so it was auto focusing the items as they rendered. Simple problem, simple fix but it was weirdly hard for Gemini to figure out. I ended up going back to Gemini and prompting some more and it did figure it out eventually… but it took significantly longer than ChatGPT.
Interestingly at some point during my vibe coding journey Gemini was updated from 2.0 to 2.5 and I happened to be actively using it when this happened. When the new version went live my conversation basically froze for about 20 minutes and then when I was able to access things again only 2.5 was available and Gemini had seemingly lost all context from all of our previous chats on 2.0 which was incredibly frustrating. I spent some extra time describing the project, design and architecture again to regain some context but it was never really as accurate as it was before and I didn’t notice any significant improvements over the work I had done with Gemini 2.0 unfortunately.
Conclusion
I covered a wide range of topics with Gemini: frontend design, frontend development, backend development, database design and project architecture. The reason for this is that I wanted to see where it’s strong points are and what parts of my workflow it would be of the most use to me. It really seems to accel at architecture and with detailed prompts it can give good suggestions for architecting projects before building them out.
While I didn’t outline the entire process here overall I think that Gemini has been pretty useful to me and I think it could play a part in my workflow moving forward, if anything in my personal projects where I am responsible for parts of the stack that I usually wouldn’t be involved in or have minimal experience with. As a largely backend and infrastructure guy I lack design skills and have a hard time coming up with good looking UI and I think Gemini really excells at this. Given a bit of human input and some knowledge about software and architecture you can really develop some large and complex projects in record time with tools like these.
You may have noticed that at no point did I just copy and paste results directly from Gemini. Gemini, ChatGPT and even Copilot have a habit of suggesting poorly structured or broken code and very often they don’t consider potential security issues and so I would say that despite what some people say about AI “replacing” programmers you still need to be knowledgable and know what you’re putting out for the whole internet to access and these are skills aquired over years of experience not something you can just do without any knowledge of them.