Forem: Makena Kong

Building an interactive map with Replit Agent: A software engineer tests vibe-coding efficiency

Makena Kong — Mon, 17 Nov 2025 21:14:58 +0000

Exploring funded brick-and-mortar companies on Wefunder isn’t easy, so I asked Replit Agent to build a map and see how much time AI could save me versus doing it manually.

In about 3 hours and for roughly $22, it produced a fully searchable map of funded companies. Most of the cost came from the Agent inefficiently debugging an API integration and unnecessary reloads. If I had built it myself, it probably would’ve taken 4–5 hours to design, build, test, and deploy.

Check out the code or explore the map below:

Repo: 🔗 Wefunder Brick & Mortar App by kenakingkong on Replit

Demo: 🔗 wefunder-brick-and-mortar-map.replit.app

Keep reading for a full breakdown of what worked, what didn’t, and where AI saved time versus where it didn’t.

Background

Wefunder has thousands of funded companies, but the only way to browse them is by scrolling through media-heavy cards on the Explore page. (eg: wefunder.com/explore/brick_and_mortar).

There is a map feature, but it only shows companies that are currently raising. I needed a better way to explore funded brick-and-mortar companies.

Replit launched Replit Agent in 2024, an AI agent for automating software development and building web apps.

I’m a full-stack engineer with 5+ years of experience (makenakong.com/dev), so normally I’d just build this myself. But with all the hype around vibe-coding, this felt like a low-stakes project to test it out.

Building the app

Getting started

My first prompt was:

“Build me an interactive map of all funded brick-and-mortar companies on Wefunder.”

The Agent started looking for a public Wefunder API, which exists but is not publicly accessible. I should’ve told it upfront that I had a private API endpoint ready.

After a few minutes, I updated the plan with the correct endpoint and example JSON. Another minute later, I approved the revised plan and hit Build the entire app.

Eventually, the app loaded, but without any companies. And that’s when things got hands-on.

“Development”

Setup and Initial Structure

The agent installed the packages and generated core components, including Leaflet, an open-source JavaScript library for interactive maps. I’m unfamiliar with the package so it would’ve taken me a while to read the documentation and render it properly.

API Endpoint Issues

First, I tried using the Explore page endpoint, but hit a CORS wall.

Then I generated an external API key and tried using Wefunder’s private external API (the one KingsCrowd uses).

The JSON structure was totally different.
It wasn’t filterable by category.
This confused the AI and resulted in non–brick-and-mortar companies showing up.

After watching the agent repeatedly debug and regenerate with no progress, I finally parsed the endpoint explore page data myself and hardcoded it.

This would’ve gone much smoother if Wefunder had a clean, public API. And, this would’ve been faster if I had parsed the JSON response and debugged it myself as well.

Fine Tuning

Once the data displayed correctly, I fine-tuned the UI/UX through small prompts, like:

Remove all icons and make the total raised and investors inline
Add a “funded ” to the total raised and investors section
Remove search by category functionality from the sidebar
I asked it to fix the position of the search icon in the search box and it took 8 minutes and cost $1.38.

Each request took between 1–8 minutes and cost $0.30-$2.00.

Realistically, I could’ve done most of these edits manually faster and for free.

Hosting

The agent published and hosted the site directly. It failed once, then succeeded.

Other issues

Replit Agent sometimes removed only parts of a feature instead of all of it, leading to compilation errors.
It often reloaded the entire app after tiny changes, instead of doing partial reloads, burning extra credits.

The search functionality still needs work but I’m running low on credits.

Comparison

What I Liked

It saved time on setup and boilerplate.
The default UI was perfectly fine for a simple app.

What I Didn’t Like

Watching it reload endlessly.
Watching it chase the wrong debugging paths.
Watching my credits evaporate when I could’ve fixed things faster myself.
Not knowing what the code looked like at every moment.

Replit AI vs Me: Who Should Handle What?

Installation & Setup: Agent, it was fast and runs in background

Overall design & layout: Agent, the default design was decent, but my design-first approach might’ve saved fine-tuning time

Front-end components: Agent was fast

Debugging the API: Me, Agent took longer and cost more

UI fine-tuning: Me, Agent followed prompts but I’m still faster and free

Publishing: Agent, super convenient

Code quality: Me, but Agent was fine

Thanks for reading!

If you found this article useful, please like and share it with someone who might enjoy it.

And let me know, have you built anything with Replit Agent? Drop a comment below, I’d love to hear about your experiences.

You can also read this post on Wefunder or on Medium.

Netlify Dynamic Site Challenge: Make your own thank you postcards

Makena Kong — Sun, 12 May 2024 04:53:49 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

I built a site where you can customize, download and print your own minimalist postcard. You can download and print your designs at home - as individual images or a generated PDF.

You may be thinking you can do the same thing on the Walgreens or Costco websites - and they will print and ship the cards to you. Yes, you can. But, personally, I've never liked those over-colored, whimsical and cheesy designs.

TL;DR - the longer backstory. Every year, I design our family's holiday cards and a few moms always ask what site I used to do it - to which I thought, I should start a custom holiday card business. Then, I forgot about this idea until I saw this Netflify challenge and immediately got to work on a few templates and an mvp. I realize I could've just made & sold some Canva templates - but unfortunately, I'm a software engineer and I just had to build a whole platform from scratch.

The Stack: NextJS + React + Tailwind, Supabase database + storage + auth, Resend email smtp, Netlify hosting

Demo

https://postcards.makenakong.com

Feel free to make an account and create your own postcard - i'd love to get feedback!

Otherwise, here are some screenshotted walkthroughs:

creating a postcard

step 1: choose a template

step 2: customize your card

step 3: export & print your card

my postcards

view & reprint your postcards

postcard gallery

view everyone's postcards!

Future Features: User account management, naming/updating/deleting postcards, more templates and customization options, a landing page, hook up to a printing api idk

Platform Primitives

Using Netlify Image CDN on-demand image transformations

All postcard images (in /gallery, /my-postcards, /postcard/:id) are converted to .avif format at half their original pixel dimensions and 75% quality via a Netlify Image CDN transformation.
Postcard images can be exported in it's original .webp format and original dimensions or exported in a .jpeg format and original pixel dimensions via a Netlify Image CDN transformation.

namespace ImageUtils {
  export namespace Netlify {
    const BASE_NETLIFY_URL = `${process.env.NEXT_PUBLIC_SITE_URL}/.netlify/images/`;

    export interface INetlifyImageParamProps {
      url: string;
      w?: number;
      h?: number;
      fit?: string; //"object" | "contain" | "fill";
      position?: string; //"center" | "top" | "bottom" | "left" | "right";
      format?: string; //"avif" | "jpg" | "png" | "webp" | "gif" | "blurhash";
      quality?: number;
    }

    export function getUrl(data: INetlifyImageParamProps) {
      const params = Object.entries(data)
        .map((entry) => `${entry[0]}=${entry[1]}`)
        .join("&");
      return `${BASE_NETLIFY_URL}?${params}`;
    }
  }
}

Thanks for reading! Happy postcard making!

This is a test post!

Makena Kong — Thu, 14 Sep 2023 06:53:14 +0000

Poublishing my draft!