Part I: I "Vibe Coded" a Full Stack App with Claude

To be clear, this article is not designed to be a tutorial, but more of a look into common issues and difficulties one can expect to encounter if attempting a similar project on their own.

Intro

“Vibe Coding” is a term used to describe the action of developing a piece of software using only AI chat responses, often times implying the end user has made little to no attempt to understand or alter the generated code in any way.

I saw the warnings on Reddit. There are endless threads of experts and beginners alike battling out over whether vibe coding is a valid approach to development. Some say vibe coding is dangerous and a blatantly irresponsible approach to creating deployable applications. Others say it yields as valuable a result as any senior developer who is going to ultimately pass the project off to a junior developer to work out all of the bugs anyways. At times, the debates got heated with certain Redditors showing off the fruits of their vibe coding endeavors only for experienced software engineers to rip it apart bit by bit. The real question I was trying to discern from scrolling through was whether or not I could actually produce a working app on vibe coding alone.

TLDR: The answer is yes, but that is not to say it was easy.

For reference, I have a background in development so I did not approach this challenge having no knowledge of data structures and algorithms. I do not know JavaScript but I can generally trace through it. The goal of this project, however, was to use only Claude AI to write and debug my app and try to insert as little of my existing knowledge as possible to replicate the experience of individuals without any software background.

The App

I decided I wanted to create an Instagram-esque application for Spotify users except instead of pictures, the subject matter was user generated playlists. Following another user would populate an infinity scroll type feed populated by user’s new playlist creations in chronological order. It was to have a dashboard with some engaging items (this I decided to leave up to Claude’s creativity), a feed for the playlists of the users they follow, and a profile page displaying their own created playlists. This idea covered a few concepts that I had zero prior knowledge of how to approach: Creating a full-stack app, building in user login and profile functionalities, and integrating Oauth via a third party and connecting to their api.

My Setup with Claude

Reddit taught me how important my first prompt in this conversational process was going to be. The more I described up front, the less adjusting I was going to have to do down the line for any subsequent feature additions or edits. Mine was as follows:

But there is an additional piece of setup I want to recommend for an undertaking of this scale: Make a project with your chat history. Anthropic has some pretty weak rate limits and you are going to want a system in place to make sure that as many times as you start a new chat, Claude always knows where to pick up. For this, I recommend creating a project and uploading text documents every time you are forced to start a new conversation. This allows you to use Claude’s entire context window and reduce the speed you hit your daily chat limits. Label the text documents in chronological order and include a project instruction indicating that the documents should be understood in that order. If you want more information on how to setup a Claude project, I wrote a whole article on it.

Claude first asked me to choose a tech stack and made a few recommendations. Based on the suggestions and a little side research, Node.js backend and React.js frontend seemed like a pretty popular approach (if those names do not mean anything to you, that is okay for the purposes of this article). Claude then proceeded to write a textbook of next steps, many of which I had questions about. I really had to prod it to slow down. Until it was only having me complete one action per response, I was having some trouble getting the necessary assistance for an instruction I did not understand or when I encountered an error. After pleading with the chatbot to treat me like an imbecile that knows nothing, it slowed its responses to a pace I could handle. Down the line I put this in the project instructions and never encountered the issue again.

Next, it had me set up the client side (frontend) and server side (backend). At this point, it starts assuming you know at least high level command line code.

Tip: Make sure to contextualize your skill level in the original prompt as this will alter the language it uses to interact with you.

To be quite honest, there was a lot of command line type navigation in this sort of project and it probably would have intimidated me if I was not at least a bit comfortable with the concept. However, if you have no knowledge of standard bash commands or do not even know what I am talking about in this paragraph… that is OKAY! You just might need to ask more explicit questions of the chatbot to understand exactly what you need to type and where. If you are on windows, I recommend telling it that you want to use PowerShell and Terminal for Mac OS. There are minor adjustments in syntax between interfaces, but most commands are relatively similar and easy to follow.

The Build

I started running into some errors immediately due to a miscommunication about the syntax I was using in PowerShell but these were all pretty approachable. Now we were cooking, and the only amount of brainpower I had to exert was creating new files in specified file paths and copying huge chunks of JavaScript to those files as instructed.

It had me start the server once it was set up and to the surprise of my years-of-debugging-code-war-torn-eyes, it worked on the first try. Then I proceeded run the client side code anddddddd BZZT, it would not render. This was the first big issue I encountered and Claude was not exceedingly helpful in helping me debug. Shortly thereafter I encountered another issue relating to security protocols blocking the port my local client was using (again if you do not know what this means, I did not either and it did not hurt me too bad). Together we got to the bottom of both problems but it was admittedly a bit of a pain. I realized in retrospect with both of these issues that I was not giving Claude the right information it needed since it was not explicitly asking me and I did not know any better. This is another example of where fine tuning in the original prompt could have saved me a great deal of confusion.

This was the first moment where I had to copy my chat into a project context document and start a fresh conversation. To my surprise it was able to continue right where we left off without a hitch. I also began experiencing some rate limiting at this point which was pretty irritating.

The Infinite Loop of Doom

The most challenging issue I faced came when I tried to add a major feature, albeit relatively simple, after the initial setup. I realized I left out a search page for users to navigate to other profiles and add “friends” which is obviously a pretty important aspect of a social media style app. Claude wasted no time helping me add the search icon to the icon doc at the bottom and a good looking search page to the app. However, upon attempting to search something, I was met with a red error box.

I will spare you the unnecessary details and stick to only the important pieces for those of you considering to attempt a similar mission. This took a LONG time to fix. An experienced software engineer might have identified the issue immediately, but I was left navigating the console error log, PowerShell responses, and just about every JavaScript doc Claude and I had assembled trying to determine what was preventing the search from executing. I will not even attempt to explain what I learned but the solution ended up being that certain functions were defined in the wrong order triggering a security protocol to block the search function from executing. Long story short, a couple lines of code were in the wrong order. Alas, I successfully searched for and added a few friends (redacted below) I had sign up for the app on my local implementation.

Part I Conclusion

To summarize, Claude did a great job working with someone having my level of full stack experience. I was left with a functional app I could run off my computer built completely from scratch. However, debugging and adjusting was quite difficult without a clear understanding of the intricacies of my app’s code. This app has some higher level features but is still relatively simple. Yet, I encountered more than one significant stretch where I had to chase down an elusive solution to a problem I did not understand. I could have put in the work to learning the “why” of every little step, but that was not the goal of this project. While I was able to come out triumphant in this phase of development, I cannot completely dismiss the fact that my background played a part in my success.

Final thoughts: I fully think someone with zero development experience can “vibe code” a functional app. Most errors I encountered will likely be routed out once Claude can read a live version of your code repository in real time*. Either way, any level of coding experience will probably make a substantial difference. I think inexperienced coders will likely have a more difficult time debugging the defects to perfection and have to set aside a significant number of hours to be successful.

*At the time of my writing this article, Model Context Protocol was not yet a widely deployed feature but now this statement is a bit outdated. I will be writing an article on this shortly.

Want to learn more about how your business can leverage the power of today’s technology? Read about how we can help at Abel Analytics and schedule a free consultation here.