How I Constructed a 120K Line App With out “Studying to Code”

that feeling if you’re sitting together with your laptop computer open, looking at code that appears like hieroglyphics, questioning, “What am I even doing right here?” That was me for the previous eight months.

I’ve spent years telling myself and others, “I’m not a developer,” whereas concurrently writing simply sufficient code to outlive.

However one thing modified lately. I ended worrying about whether or not I used to be a “actual developer” and embraced “vibe coding” – constructing by really feel, utilizing AI as my coding associate, and studying simply sufficient to make one thing helpful. The consequence? After eight months, a completely purposeful app that’s reworked how I run my LEGO reselling enterprise.

This isn’t about reducing corners. It’s about discovering a brand new path into coding that doesn’t require a pc science diploma or years of finding out frameworks. It’s about constructing one thing actual, fixing precise issues, and studying alongside the way in which.

Right here’s how AI helped me go from PowerShell scripts to a full React/Specific app with out ever formally “studying to code”.

What’s “Vibe Coding”?

Vibe coding is a time period coined by Andrej Karpathy, a founding member of OpenAI, in February 2025. It describes a brand new strategy to software program improvement wherein you let AI do a lot of the precise coding when you information it with pure language directions moderately than manually writing code your self.

The core philosophy is about “totally giving in to the vibes” and nearly “forgetting that the code even exists”- specializing in what you wish to create moderately than how one can code it. Whenever you encounter errors, you paste them to the AI with out remark, and it normally fixes the problems.

As Karpathy described it, “I simply see stuff, say stuff, run stuff, and copy-paste stuff, and it principally works.” It’s notably fitted to low-stakes initiatives and prototypes the place improvement pace issues greater than excellent understanding of each line of code.

For non-developers vibe coding opens up app creation by letting you concentrate on inventive facets moderately than getting caught in technical particulars.

Is it “actual” coding? The purists would say no. However right here’s what issues: I’ve a working app that solves actual issues in my enterprise, constructed principally by means of conversations with AI. That feels fairly actual to me.

And I’m not alone – there’s an entire motion of “vibe coders” rising. Individuals constructing software program with out conventional coding backgrounds, leveraging AI to bridge the hole between what they will think about and what they will create. It’s democratizing software program improvement in a method that low-code platforms promised however by no means totally delivered.

The fantastic thing about vibe coding isn’t that it replaces studying – it’s that it permits you to construct first and be taught as you go, in context, fixing actual issues moderately than working by means of summary tutorials.

Meet BrickBuddy

My interest enterprise is promoting used LEGO on Bricklink. I get pleasure from it; low stress and satisfying work that pays just a few payments each month. However if you’re coping with thousands and thousands of little items processing all of that’s an absolute nightmare.

So I made a decision to construct an app. First, it was a PowerShell module (yea, a “actual” app in PowerShell?). It labored..sorta..however this situation wanted an online utility thus BrickBuddy was born.

BrickBuddy is an online app with a ReactJS frontend and an Specific utility internet hosting an API on the backend. You may see the touchdown web page I threw collectively on brickbuddy.io.

My aim was to construct an utility for myself to run my used LEGO enterprise and perhaps sooner or later promote subscriptions to it.

As a result of Claude can describe the app significantly better than I can right here’s his take:

Overview

BrickBuddy is a full-stack utility designed for managing LEGO brick stock, with options for monitoring, organizing, and managing batches of brick gadgets. The appliance follows a contemporary client-server structure with a transparent separation of issues.

Tech Stack

Frontend (UI)

• Core Framework: React 18 with React Router 6
• State Administration: Customized context-based state administration with AppStateProvider
• UI Parts:
  • Tailwind CSS for styling
  • Headless UI and Radix UI for accessible parts
  • React Icons and Hero Icons for iconography
  • TanStack React Desk for information tables
  • React Toastify for notifications
  • Chart.js/Recharts for information visualization
• HTTP Consumer: Axios
• Kind Dealing with: React Choose
• Testing: Jest, Testing Library, Playwright

Backend (API)

• Core Framework: Specific.js
• Database: Microsoft SQL Server (through Sequelize ORM)
• Authentication: JWT (jsonwebtoken)
• Validation: Joi, Specific Validator
• Safety: Helmet, bcrypt for password hashing
• Error Dealing with: Customized error sorts (ServiceError, ControllerError)
• Logging: Customized Logger implementation

DevOps/Infrastructure

• Construct Instruments: Craco (Create React App Configuration Override)
• Testing: Jest, Playwright
• CI/CD: GitHub Actions
• Containerization: Scripts for improvement/manufacturing environments
• Setting Administration: dotenv, env-cmd

Structure

Frontend Structure

The UI follows a well-structured layered structure:

1. Web page Container Layer:
   • High-level web page parts (e.g., UserInventory, Catalog, Batches)
   • Manages routing and page-level presentation
2. Part Layer:
   • Presentational parts targeted on rendering UI components
   • Follows a transparent naming conference (e.g., BatchSelector, LoadingButton)
   • Organized by characteristic moderately than kind
3. Motion Handler Layer:
   • Customized hooks with naming sample use[Component]Handler
   • Manages person interactions and UI occasions
   • Maps UI occasions to enterprise logic operations
   • Handles errors and UI state
4. Enterprise Logic Layer:
   • Customized hooks with naming sample use[Feature]Logic
   • Comprises complicated operations unbiased of UI
   • Communicates with backend companies
   • Handles information transformations
5. Service Layer:
   • API communication by means of service hooks
   • Abstracts HTTP requests and response dealing with
6. State Administration Layer:
   • Centralized AppStateProvider utilizing React Context
   • State validation by means of StateActionValidator
   • Persistence with localStorage through localSettings utility
   • Schema-based state group with page-specific schemas

Backend Structure

1. Controller Layer:
   • Route handlers organized by area (e.g., BatchController, UserController)
   • Validates request information
   • Transforms between API contracts and repair interfaces
   • Handles HTTP response formatting
2. Service Layer:
   • Comprises enterprise logic (e.g., BatchService, UserInventoryItemService)
   • Implements area operations
   • Frequent base service (_BrickBuddyService) for shared performance
   • Error dealing with with customized ServiceError sorts
3. Mannequin Layer:
   • Sequelize fashions representing database tables
   • Defines schema, relationships, and validations
   • Organized by entity (e.g., UserModel, BatchModel)
4. Middleware Layer:
   • Request/response processing
   • Authentication and authorization
   • Error dealing with and logging
5. Utilities:
   • Shared helper capabilities
   • Logging infrastructure
   • Error sorts and formatters

Knowledge Move

1. Consumer interacts with a part
2. Motion handler processes the interplay
3. Enterprise logic is invoked if wanted
4. API name made by means of service layer
5. API controller receives request
6. Controller validates and delegates to service
7. Service performs enterprise logic and database operations
8. Response flows again by means of the layers

Key Options

• Batch administration for brick stock
• Consumer stock monitoring
• Integration with exterior companies (Bricklink)
• Set administration
• Merchandise location monitoring
• Consumer authentication and profile administration
• Reporting capabilities

This structure demonstrates a well-structured utility with clear separation of issues, following fashionable React and Node.js greatest practices, with a concentrate on maintainability, testability, and scalability.

As you possibly can see, this isn’t a type of app that AI influencers spin up in 5 minutes and all it a clone of Netflix. It’s a complete tech stack together with deployment automation with Github Actions, Terraform, a dev and prod setting!

Constructing actual manufacturing functions is feasible with vibe coding; however requires a totally completely different thought course of and willingness to let go of some particulars.

All in all, BrickBuddy is at present standing at over 120,000 traces of code!

Granted, 1/4 of that may very well be trimmed down and simplified however that’s for one more weblog publish.

Beginning as a Junior Vibe Coder

I knew how one can code. I knew management constructions, primary structure, and a few scripting. However I had by no means touched a frontend framework. I had no concept what a part was, how props labored, or how frontend state was managed.

So I did what any curious builder would do: I opened up Cursor IDE, picked a characteristic I wanted, and typed one thing like:

“Create a web page with a sidebar and a desk that exhibits all my stock.”

And the AI did it.

At first, this felt like dishonest. However then I noticed: I nonetheless needed to check it, perceive the way it labored, and tweak issues. I didn’t perceive the syntax, however I began seeing patterns. And ultimately, I began caring why one thing labored, not simply that it did.

AI because the Driver, Me because the Passenger

To start with, AI was in management. I used to be simply the passenger.

I instructed it what I wished, it gave me code, and I pasted it in. I didn’t query the output. I didn’t know the way. I didn’t know what a reducer was, or what JSX even meant. I used to be constructing blindly, counting on the AI to see for me.

However over time, issues began breaking. And once they did, I couldn’t simply ask it to repair it. I needed to perceive the context.

That’s when issues began to alter.

Breaking Issues Taught Me the Framework

The second one thing broke and AI couldn’t patch it cleanly, I needed to be taught. I needed to debug. I needed to hint the place the error began, why a state wasn’t updating, or why a operate was getting the incorrect worth.

That ache was the most effective trainer.

It taught me the language with out tutorials. It taught me structure with out programs. It pressured me to get smarter as a result of AI alone wasn’t sufficient.

Ultimately, I ended telling the AI what to do.

I began asking it questions.

• “What does this warning imply?”
• “Why is that this part re-rendering?”
• “Is that this a great way to handle state throughout a number of parts?”

And the AI answered. And I realized.

Constructing One thing Actual

Probably the most vital issues I realized by means of that is that constructing one thing actual is the quickest approach to be taught.

I wasn’t constructing a pretend app or following a tutorial. I used to be fixing precise issues I had with my LEGO retailer. I used to be delivery options that mattered to me. And due to that, I cared about fixing bugs, refactoring code, and studying the precise approach to do issues.

AI made this doable. It let me construct earlier than I knew how one can construct.

It Wasn’t Straightforward (Regardless of What Influencers Could Say)

This wasn’t an ideal course of. I bumped into roadblocks, hallucinations, and tons of wasted prompts. I’ve spent over an hour on a single situation, going backwards and forwards with the AI, making an attempt to determine why one thing that ought to work… simply didn’t.

Sure, the UI got here collectively quick to start with. That half was simple—truthfully, that’s perhaps 5% of an actual utility. What took time was every part else:

• Managing state correctly
• Dealing with edge circumstances
• Fixing bugs that broke different options
• Studying the precise approach to manage logic throughout parts

I wasn’t simply writing code—I used to be studying structure, debugging workflows, naming conventions, and React-specific patterns. And I used to be doing it whereas making an attempt to construct one thing actual that really labored.

It was irritating. It was sluggish. It was complicated.

However it was nonetheless sooner than if I had tried to be taught React from weblog posts or YouTube movies. As a result of I used to be studying by constructing, not by finding out.

You don’t must grasp the language to begin. However you do should be curious. You must be keen to interrupt issues. And most significantly, it is advisable to hold going even if you don’t totally perceive what you’re constructing.

As a result of ultimately, you’ll.

BrickBuddy exists as a result of I didn’t wait till I used to be “prepared.” I began constructing, and AI met me the place I used to be.

And eight months later, I’ve an actual app that works.

That’s the facility of coding with AI.

Keep tuned for extra posts about my expertise within the final yr or so constructing BrickBuddy!