AI Dev Tools: Week 2 - End-to-End Application Development

AI
Zoomcamp
CI/CD
AI Dev Tools
Building a complete application with AI: Frontend-first, OpenAPI, Docker, and CI/CD.
Author

Ousmane Cissé

Published

December 5, 2025

This week took my understanding of AI-assisted development to the next level by building a complete end-to-end application — from frontend to backend, database, containerization, and cloud deployment. Here’s what I learned:

Frontend-First Approach with AI

We started by using Lovable (or similar AI tools like Bolt, Cursor, or Claude Code) to rapidly scaffold a multiplayer Snake game in React with TypeScript. The key insight: rather than starting with backend logic, we built an interactive frontend first, complete with mockups for authentication, leaderboards, and live gameplay. This frontend-first strategy shifts how you think about API contracts — you build the UI you want, then design the backend to serve it.

The prompt engineering for frontend was crucial: describing the app’s features (game modes, multiplayer mechanics, testing coverage) helped the AI generate a cohesive, testable codebase. The lesson: clear requirements lead to better code generation.

API-First Backend Design with OpenAPI

Once the frontend was done, we didn’t write the backend arbitrarily. Instead, we:

  1. Extracted OpenAPI specifications from the frontend code — documenting what API endpoints and data structures the frontend actually needs
  2. Generated a FastAPI backend directly from those specs

This “API contract first” approach ensures frontend and backend stay synchronized and prevents wasted effort on unused endpoints. I learned that OpenAPI is a powerful bridge between AI-generated frontend and backend — it forces both to speak the same language.

Database Integration & Real-World Concerns

Initially we mocked the database, then we integrated SQLAlchemy with PostgreSQL and SQLite. This introduced important real-world considerations:

  • Integration testing: We wrote separate integration tests (not just unit tests) that spin up a SQLite database and verify the full data flow works
  • Schema management & migrations: Real databases require careful handling of data persistence and schema changes
  • Testing strategy: Mock databases for unit tests, real databases for integration tests

I realized that many junior developers skip this, but it’s critical for production apps.

Containerization & Local Development

We containerized everything using Docker Compose, bundling:

  • Frontend (served via Nginx)
  • Backend (FastAPI)
  • Database (PostgreSQL)

This forced me to think about: - Environment configuration - Service networking and communication - Build processes and dependencies - Running everything locally in a reproducible way

Running docker-compose up --build felt like magic — suddenly an entire application stack worked locally, exactly as it would in production.

Deployment to the Cloud

We deployed to Render, combining frontend and backend into a single container. The workflow:

  1. Build a single Docker image with both services
  2. Push to a cloud platform (we chose Render for simplicity)
  3. Let the platform handle scaling, SSL, and management

This demystified “DevOps” — it’s really just containerizing intelligently and picking a platform that abstracts infrastructure away.

CI/CD Pipeline with GitHub Actions

The final piece was automating everything:

  1. Run tests (frontend + backend) on every push
  2. Run integration tests separately
  3. Deploy automatically to Render if tests pass

This creates a safety net — bad code can’t accidentally get deployed. We learned that CI/CD pipelines, while seeming complex at first, are just a series of automated checks and deployments.

Key Lessons

  1. Leverage AI for speed, but maintain structure: AI can scaffold code fast, but without proper API contracts (OpenAPI), testing (unit + integration), and containerization, it falls apart at scale

  2. APIs are the contract: OpenAPI specs bridge frontend and backend teams/tools — treat them seriously

  3. Testing isn’t optional: Unit tests catch bugs, integration tests catch integration bugs. Both matter

  4. Containerization enables reproducibility: Docker/Compose makes “it works on my machine” a non-issue

  5. Automation frees mental energy: CI/CD means you can focus on features, not manual testing and deployment

  6. End-to-end thinking: You can’t just build a feature in isolation anymore. You need to think: frontend → API → backend → database → tests → deployment

Mindset Shift

Week 1 taught me AI tools exist.
Week 2 taught me how to think like a real engineer using those tools: designing APIs, writing tests, containerizing, and automating. It’s the difference between “I can generate code” and “I can ship production applications.”

Homework: End-to-End Project - Online Coding Interview Platform