CTO Fraction

Menu
Screenshot of Cursor, an AI-powered code editor, displaying model selection settings, a file structure for a React project, and a terminal running a Next.js web application. This image represents the AI-assisted development process used to build a web app with AI, integrating tools like Cursor, Replit, and V0.dev.

How I Built a Web App with AI in Just a Few Hours

Building a full-stack web application has traditionally been a complex and time-consuming task, requiring deep knowledge of frontend and backend development. However, with the power of AI-driven tools, the process has become much more efficient. As a Fractional CTO I advise my clients to take advantage of AI tools when building software. In this article, I will take you through my experience of building a very simple demo React web app with a Python backend using three key tools:

  • Cursor – an AI-powered code editor from Cursor.com
  • Replit – a platform for creating and hosting apps, available at Replit.com
  • V0.dev – an AI-driven frontend builder by Vercel, accessible at V0.dev

This is not a deep dive into the technical details, but rather a walk-through of my experience using AI to speed up development, along with some practical applications for each tool.

The Starting Point of Building the Web App with AI

The goal was simple: build a full-stack web app with two pages displaying ‘test’, but real data. The frontend would be in React, and the backend would be a Python FastAPI service with a SQLite database. My approach aimed to take as much advantage of the AI capabilities of each tool to test its ability in building software and reducing manual effort.

  1. Creating the Backend in Replit: I started by setting up a Python FastAPI backend in Replit. Using a single AI prompt, the Replit AI assistant was able to set everything up in seconds.
  2. Generating Test Data with ChatGPT: Before connecting the frontend, I needed some test data. I used ChatGPT to generate a CSV file containing sample supplier data, including emissions and location information. Then, I uploaded this file to Replit and asked the AI assistant to seed the SQLite database with the generated data.
  3. Building the React Frontend: I used V0.dev to generate React components based on a simple design reference.
  4. Editing and Refining Code with Cursor: With Cursor, I fine-tuned the code, connected the frontend to the API, and made interactive features work seamlessly.

Step 1: Setting Up the Backend with Replit

I began by creating a new Repl in Replit, which allowed me to spin up a FastAPI backend in minutes. Replit’s AI assistant made it easy to scaffold the API:

  • Defined API endpoints for fetching and managing supplier data.
  • Integrated a SQLite database for storage.
  • Used Replit’s built-in deployment tools to host the API.

To populate the database, I turned to ChatGPT, which generated a realistic dataset in CSV format. The file contained supplier names, locations, and sample emission values. I then uploaded this file to Replit and asked the AI assistant to insert the data into the SQLite database. This gave me a fully functional backend with real-looking data to test the application.

The deployment capabilities of the platform made it really easy to deploy and in a matter of minutes I had a functional REST API ready for consumption.

Why Replit?

  • Great for quickly prototyping apps of all kinds
  • No need for local setup – everything runs in the cloud
  • Deploy instantly with a few clicks

 

Step 2: Designing the Frontend with V0.dev

With the backend ready, I moved to designing the frontend. Instead of manually coding the UI, I turned to V0.dev, which generates React components based on text prompts and/or design files. Here’s how I used it:

  1. Uploaded a design file for the homepage.
  2. Asked V0.dev to convert it into a React (TSX) component.
  3. Tweaked the layout using AI-assisted refinements (e.g., adjusting colors, button placements, etc.).
  4. Repeated the process for the supplier details page.

The tool not only built out the basic structure of the homepage but also created individual components that could be easily reused. After generating the homepage, I followed the same process to create the supplier details page, ensuring consistency in design and layout.

Why V0.dev?

  • AI-powered front-end generation saves time
  • Quickly iterate on UI changes
  • Generates clean, structured React code, which is easy to import

 

Step 3: Coding and Refining with Cursor

Once the frontend was generated, I used Cursor to refine the code and integrate the API. Cursor is an AI-powered IDE, similar to VS Code, but with AI deeply embedded in the workflow. Here’s what I did:

  • Added API calls: Used Cursor’s AI to generate API client functions that dynamically fetched supplier data.
  • Implemented interactivity: Added click events to supplier names, delete functionality for records, and dynamic table updates.
  • Debugged errors: Instead of searching Stack Overflow, I asked Cursor directly, which provided instant solutions.

One of the key improvements was making sure that clicking on a supplier’s name would route the user to a detailed view of that supplier. Additionally, I needed to implement a delete function with a confirmation prompt to prevent accidental deletions. Cursor helped streamline both of these tasks, suggesting optimized code and catching small mistakes that would have been time-consuming to debug manually.

Why Cursor?

  • It’s like VS Code but with AI – think of it as the difference between a hand saw and a power saw
  • AI-assisted debugging and refactoring make coding significantly faster
  • Great for iterating on complex logic without manually writing everything

Does your team need AI enablement?

Hire a Fractional CTO today and boost your team’s productivity near immediately.

Schedule a Call

Step 4: Enhancing Web App Functionality with AI

With the core features in place, I added a few finishing touches:

  • Dynamic Data Binding – Supplier details populated in real-time based on API responses.
  • Automatic Calculations – Implemented a utility function that calculated emissions dynamically based on supplier data.

For the emissions calculation, I needed to take the supplier’s spend and multiply it by their emissions intensity. Instead of writing this logic from scratch, I prompted Cursor to create a utility function that handled the calculation. Although this was a trivial calculation, the goal was to demonstrate how one could use Cursor for this use case and reduce manual effort.

 

Practical Applications of These Tools

  • Replit: Best for quick prototypes and MVPs. The ability to generate and seed a database with AI assistance is a huge advantage. Additionally the AI assistant can do much much more than what I did.
  • Cursor: AI-assisted coding makes it a must-have for fast iteration and debugging. The ability to refine prompts and automate repetitive tasks significantly speeds up development.
  • V0.dev: Perfect for quickly generating frontend components for React apps. Instead of manually structuring UI elements, AI can build them in seconds.

The Verdict

This simple project, which could have taken days or even weeks, was completed in just a few hours with the help of AI. The combination of Replit, V0.dev, and Cursor significantly reduced the workload, making it easier to focus on building functionality rather than getting stuck in code syntax.

If you’re looking to build a web app with AI, I highly recommend exploring these tools. You will be amazed at how much faster and smoother development becomes.

Interested in seeing the full process in action? Watch the full demo video at the top of this article.

Try it yourself and build your next web app with AI.