How I vibecoded a Production-Grade web app.

superfecta.club screenshot

I'm a real software engineer with over 15 years of experience. I still code "by hand" on my day-to-day job, but also do AI-assisted coding sessions. I wanted to vibecode a complete web app and productionize it, but I never had an idea for an app until now.

The idea of the app is a Football (Soccer) Pool; the concept is similar to a Football Fantasy League, but instead of picking players, you make predictions about results. Then you get points for how accurate your predictions are, and you sum them up, with the player with the highest score winning the pool.

I started actually using the Claude desktop app, since I don't have access to Opus in my Claude Code subscription tier. The prompt was to write a development plan for this app, basically based on the paragraph above. I also gave the AI some educated guidance to use my preferred stack (FastAPI/Python for the backend and React/JS for the front). I also did some previous research on Claude Desktop on the best data provider for Football matches and betting odds. The only other guidance I gave was to start with the data model, since that's usually where you should start when building an app. The summarized result was this one (each item was broken down into 4-5 tasks):

# Football Pools MVP - Development Plan

## Phase 1: Foundation & Infrastructure

### 1.1 Database Schema Design
### 1.2 API-Football Integration Setup

## Phase 2: Backend API Development

### 2.1 Authentication Enhancement 
### 2.2 API-Football Data Endpoints  
### 2.3 Pool Management Endpoints 
### 2.4 Picks Management Endpoints

## Phase 3: Background Jobs & Scripts

### 3.1 Data Population Scripts
### 3.2 Match Update Jobs
### 3.3 Scoring & Points Calculation 

## Phase 4: Frontend Development

### 4.1 Authentication UI 
### 4.2 Pool Management UI 
### 4.3 Matches & Picks UI
### 4.4 Leaderboard & Standings UI 
### 4.5: Pool Invites 

## Phase 5: Configuration & Deployment Prep

### 5.1 Cache Configuration System
### 5.2 Environment & Deployment

## Phase 6: Testing & Documentation

Then I started implementing one by one using VSCode with the Claude Code extension using Sonnet with simple prompts like this:

Enter plan mode and implement Phase 4.2 Pool Management UI 

As you can see in the initial plan, Testing and Documentation were the last phases, but since the initial prompt to start building Phase 1.1, I told the AI to write tests and document each feature. I even made multiple mentions of that in the CLAUDE.md file. By the time I reached deployment, everything was documented and tested. I have more than 1000 tests across front and back, and multiple Markdown files documenting each feature. Also, once I finished this MVP, I built more features, for example, adding the betting odds for each match. After this feature was completed, I asked CC to update the docs and tests for it.

I haven't coded a single line of code, but I have to admit that at one point I had to "debug" an error manually. Once I found the root cause, I explained it to CC, and he fixed it. For deployment, I just asked to build Docker images, and from there, it's just clicking buttons in your favorite cloud provider. I know that can be done programmatically, but that's a problem to solve when I have 1000s of users.

Here's the link to the app superfecta.club