Matt Palmer

Head of Developer Relations

This tutorial walks you through the “vibe coding” process on Replit—taking an idea from concept to a fully deployed application. This tutorial will build an interactive map visualization of San Francisco parks, pulling in external data and using modern frameworks. You’ll see how to leverage Replit Agent for initial development and Replit Assistant for refinements and debugging.

​
The vibe coding philosophy

Vibe coding is less about writing every line of code and more about guiding AI tools with your vision and domain knowledge. It’s an iterative process of prompting, reviewing, and refining.

Key takeaways from the video:

  • Conceptualize First: Start with a clear idea of what you want to build. Visualizing the end product helps, especially when prompting AI.
  • Domain Knowledge is Power: Knowing relevant frameworks (like Leaflet.js for maps) or data sources (like OpenStreetMap) significantly improves AI-generated results.
  • Iterative Development: Expect to debug and refine. AI tools are powerful, but they’re collaborators, not magic wands.

​
Project: San Francisco parks map

The goal is to build an interactive map displaying parks and public spaces in San Francisco.

Problem Statement: The goal is an interactive map to discover parks and public spaces in San Francisco. Solution: An interactive tool using Leaflet.js and OpenStreetMap data. Key lessons:

  • Prompting AI effectively.
  • Processing external data.
  • Debugging and handling errors.

​
Building with Replit Agent

Replit Agent can scaffold entire projects, set up environments, and generate initial code.

1

Crafting the Initial Prompt

A good prompt is specific. We tell Agent:

  • The goal: “Help me create a minimalist maps app to visualize San Francisco’s parks.”
  • Key technologies: “You should use leaflet for map visualization and fetch data from OpenStreetMap.”
  • Specific data types from OpenStreetMap (after research): Natural formations (woods, beaches, islets, cave entrances) and leisure locations (parks, gardens).

Help me create a minimalist maps app to visualize San Francisco’s parks. You should use leaflet for map visualization and fetch data from OpenStreetMap. Include the following OpenStreetMap data types for San Francisco: natural formations (woods, beaches, islet, cave entrance) and leisure (park, gardens).

To learn more about how to write effective prompts, check out this article.

2

Attaching a Mockup

Visual aids help Agent understand the desired layout and features. A simple sketch or mockup can be attached directly to the prompt.

3

Agent's Process

  1. Plan Creation: Agent outlines the steps it will take. Review and approve this plan.

  2. Visual Preview: Agent streams a visual preview of the app’s UI.

  3. Environment Setup: Agent configures the development environment, installing necessary languages and packages—no manual setup required.

  4. Building the App: Agent writes the code for the front end and back end.

  5. Checkpoints: Agent creates checkpoints (Git commits) so you can roll back if something goes wrong.

4

Debugging with Agent

Errors happen. Use the browser’s DevTools (specifically the Console and Network tabs) to find error messages.

  • Observe: The map loaded, but no data points appeared.

  • Investigate: The console showed an error: “Failed to fetch map features error cannot read properties of undefined reading natural.”

  • Inform Agent: Paste the error message directly into the chat with Agent. Agent will attempt to debug and fix the issue.

In the video, Agent identified an issue with parsing the Overpass API response and added robust error handling, which resolved the problem.

​
Refining with Replit Assistant

Once Agent builds the MVP, switch to Replit Assistant for smaller, more targeted edits and refinements. Assistant is generally faster for these tasks.

​
Deploying your application

Replit makes deployment straightforward.

  1. Select the Deploy button.

  2. Agent suggests a deployment configuration (e.g., app name, build and run commands). Review and confirm.

  3. If your app uses API keys or other sensitive information, store them in Secrets. Agent will use these securely.

  4. Click Deploy. Replit bundles your app and makes it live on the web.

Your deployed app will have a public URL (e.g., park-mapper.replit.app). Changes made in your development environment won’t affect the deployed version until you click Redeploy.

​
Recap and next steps

This tutorial went from an idea to a deployed interactive map application without writing a single line of code manually. Replit Agent was used for the heavy lifting and Replit Assistant for refinements, leveraging domain knowledge and an iterative debugging process.

Potential Next Steps for the Park Mapper App:

  • Add a database to store park data persistently (avoiding re-fetch on every load).
  • Allow users to save or favorite parks.
  • Implement advanced filtering.
  • Improve styling and add custom icons for map markers.
  • Enhance mobile responsiveness (e.g., ensuring filters are accessible on mobile).

Vibe coding is about iterating, experimenting, and guiding AI to bring your ideas to life. Don’t be afraid of errors; they are part of the process!