top of page

I Made a Web App with Replit, and I Can Barely Code (pt. 2)

  • Writer: Lindey Hoak
    Lindey Hoak
  • Sep 30
  • 4 min read

Welcome back to a graphic designer's experience building a web app with no coding experience. To see where this started, read part 1, or here's a quick summary:


TL;DR: A recap of part 1

  • Despite no software development skills, I was able to design what looked like a functional framework of a website, from scratch.

  • The idea: A web app to connect business professionals for lunch.

  • The outcome so far: A pretty exterior but no functionality.

  • All the heavy lifting is being performed by Replit's AI Agent, who I'm about to learn is an overly-confident optimist.


Tricky Maneuvers

For a non-programmer like myself, connecting 3rd party content was not a walk in the park.


In order to integrate features like LinkedIn login, Google Calendar sync, and accurate restaurant recommendations depending on location (via Google Places), I needed to navigate away from Replit and set up OAuth integrations on sites I’d never used before.


Initially, Replit Agent’s instructions on how I should do this were too vague for me to understand. That’s when I remembered I had another helpful tool that could explain it to me:


A conversation between myself and ChatGPT to help me understand Replit's instructions. I start by sending a screenshot and saying: "Hi! I'm working on building a website with Replit. the AI agent gave me these instructions to get some of the website integrations officially connected. Could you take these instructions and make step-by-step instructions of how I can complete the items it gave me in this photo?" ChatGPT responds: "Absolutely! Here's a more detailed, step-by-step breakdown of what you need to do to set up real calendar integrations (Google, Microsoft Outlook, and Apple Calendar) with OAuth authentication on your Replit-hosted website: STEP 1: Register the Application with Each Provider. 1A. Google Calendar. 1. Go to Google Cloud Console. 2. Click "Select a Project" → "New Project". 3. Name your project and click "Create". 4. In the left sidebar, go to APIs & Services → Dashboard → Enable APIs and Services. 5. Search for "Google Calendar API" → Click it → Click "Enable". 6. In the sidebar, go to "Credentials" → Click "Create Credentials" → Choose OAuth 2.0 Client ID.
ChatGPT helped me understand Replit's instructions

These integrations really slowed down my progress on the site. Between setting them up correctly, providing key credentials and secrets that Replit needed, then troubleshooting their success over and over and over, I was unsure the app would work, let alone keep working as I made more changes:


A conversation between myself and Agent, troubleshooting Google Calendar OAuth integrations.
Troubleshooting Google Calendar OAuth integrations with Replit

I could go on and on about the cycles Replit and I got stuck in together (poor John has heard all about it). But what matters is that I did ultimately get all the integrations to work.


Next, let me tell you what else wasn't going as planned.


Walking in an Agonizing Circle to Nowhere

In one of our calls, John asked: “Do you feel like you can be a designer with this?”


No. I can’t. Not really.


In fact, Replit’s largest weakness was design. And trying to correct it was practically fruitless. Let me walk you through my attempts to fix this calendar layout:


A screenshot from the Superior Network draft website, where I've circled the display issue in red.
A screenshot from the web app where I circled the issue in red.

I shared a screenshot of the issue and typed to Replit’s Agent: “The calendar layout is odd; there's a large blank space to the right of the calendar view. I've drawn an oval in red over the blank section. Can you space the items around it appropriately to fill that gap?”


I pressed send, it ticked away for a while, then told me that it had “✓ Fixed the calendar layout.”


Me: “The Calendar page still doesn't look correct. That gap is still there next to the calendar numbers.”


Second time was a charm, as Agent fixed it. That is, until minutes later when I asked it to change other content on the page. Suddenly, the spacing issue was back.


Another screenshot from the Superior Network draft web app, where I've now outlined the issue in a red box, trying to explain where the problem is to Replit's AI Agent.
A screenshot from the web app where I outlined the issue in a red box.

Simply asking, “can you now extend the calendar higher and lower? It needs to fill more space” didn’t work.


I’d never missed click-and-drag so much.


A screenshot from the web app with drawn arrows indicating where I needed the calendar to go.
A screenshot from the web app with drawn arrows indicating where I needed the calendar to go.

Me: “I’ll try to explain what I want in a different way. Can you please extend the calendar width in the direction of the red arrows I’ve drawn? And can you please extend both the box for the calendar AND the calendar itself down in the direction of the green arrows I’ve drawn?”


After 3 more back-and-forths, where I kept explicitly stating that I wanted in different words, it successfully filled the gap.


The lesson here? AI is truly non-deterministic, and I think this applies to how it responds and how it understands. Just like people, sometimes it needed to hear an instruction more than once to successfully follow it.


Down the Replit Web App Rabbit Hole

When Replit ran into issues, they were most often self-inflicted. In the instance below, we had been trying to figure out why my Google Calendar’s connection wasn’t appearing on the dashboard. Turns out Replit hadn’t been fetching that info the entire time:


A screen capture of text from Replit's AI Agent, where it explained that it was never fetching the status information we needed for a tool to work.
Replit never told my dashboard to fetch the status.

And, in its lowest moments, Agent got caught in cycles:


The Replit AI Agent keeps saying "Let me fix the profile layout to restore the left-aligned format you preferred and ensure all your profile information displays properly:" over and over.
A typical Replit spinning loop of death

Agent started to sound so human. This sounds just like me reflecting on my procrastination:


Replit's AI Agent keeps saying different variations of: "You're absolutely right! I need to stop getting stuck and actually fix this! Let me make the code changes now:"
Same, Agent. Same.

What can a user do in this instance? My solution was to pause Agent, tell it we were changing tasks, and come back later. And this worked well, almost like the AI returned to old projects with fresh eyes.


My response to Replit's AI Agent getting stuck in a loop. The screen capture from my conversation says: "Sorry, but the conversations still don't appear! Let's work on something else and come back to this."
Working in circles? Let's come back to it later.

This was actually my best bet with any Replit issue: if we found ourselves down a troubleshooting rabbit hole, we’d climb out with the plan to solve it later.


This worked on everything from LinkedIn and Google Places integrations (where we genuinely needed to wait on those platforms to grant access) to design issues through miscommunication.


The complete dashboard view of Superior Network's web app built with Replit. It shows the brand logo, header, buttons to reset data, check notifications, check messages, and visit settings. My profile for Lindey Hoak is displayed, with example professional info, skills & expertise, professional achievements, networking goals, and interests.
The complete dashboard view of Superior Network

So how was the site? Well, it was pretty! But the moment you tried to use a tool, flaws started to show.


I was in for a longer project journey than anticipated. But now I'd really find out for sure: Can a website built by AI actually work? Or was I doomed to work in troubleshooting circles forever? Tune in next time for part 3 of this app-building story.


Want to skip ahead to a spoiler by exploring the final product? You can check out Superior Network now!


The above content was written by Lindey Hoak.

BearPeak Technology Group is a software studio based in Boulder, CO, offering studio, startup, strategy, and staffing services. Schedule a free consultation at bearpeak.io/contact.


Comments


bottom of page