How I Used Replit to Build a Fully Functioning Web App
Plus some must know tips.
The last time I seriously cut any code was back in the early 2000s. Even then, it was using Borland Delphi and Microsoft Visual Basic to write add-on applications for the ERP software that we sold and implemented to various clients. Things quickly moved on in the coding world and I got left behind, embarking on a career of management and data strategy consulting.
Since then I have always wanted to get back into building applications but as technology continued to progress, so did the learning curve. Want to create an app? Go ahead and learn backend, front-end, and database tools. Then put them all together and there you go! If only it was so easy.
When no code platforms started become mainstream I spent some time looking at these. I tried Bubble and whilst building business logic and workflows was easy, creating the user interface was hell on earth. Next, I gave Adalo a try which was not too bad. It was very easy and quick to build a user interface and data elements but that also made it limiting because there were just somethings that were not possible. Also, it was not that cheap, especially if you wanted to use certain features like geolocation. At $65 a month, it was an expensive subscription for what is essentially a hobby. You can see a demo of the app at www.ecofloats.app.
After hanging out on YouTube for many hours, and I mean many, I came across several AI-enabled software development platforms. Like Cursor, Bolt, Lovable, and Replit. I played around with Bolt and Lovable as both provide a limited amount of daily credits or tokens to build an app. I was quite impressed and wanted to go a bit deeper. I had also started looking at Replit, although to use the AI agent to build, you needed a paid plan. I had seen the founder, Amjad Masad, in several interviews and was really impressed with what he had build.
So one afternoon in the last week of 2024 I signed up for a $25 a month plan and started building. Here is how I did it. Warning: the process of building and testing is very addictive!
Step 1: An Idea
Something that I am not short on is ideas! I needed something that would not be too big scope or too complex and something that users would find interesting. I settled on a website that allows the public to report bad or selfish driving, with the view of creating awareness of road safety and a social conscience when using the roads.
I noted down the key features that I wanted and moved on to the next step.
Step 2: The Initial Prompt
After signing up to a paid plan on Replit, I start with prompting the agent, describing the app I wanted it to build. There is a feature which helps improve the prompt and this is what I started with.
The agent began work, first by creating a mini project plan and asking me to validate it. It then began building. The agent is also creative and suggested features to add, most of which were pretty relevant to what I was trying to achieve.
It is fair to say that the first results were not bad but a little refinement was needed. This is all done in a conversational way and fairly straight forward. Each time the agent makes a change of a certain significance, it creates a checkpoint to which you can roll back. Each checkpoint costs $0.25 and this is offset against your monthly subscription charge. I continued this process till everything was working to my satisfaction.
I did encounter problems along the way when something would not work or the app crashed and the agent was pretty good at fixing things. I usually copied and pasted any errors I encountered and this helped things along.
The agent created the app as well as a relational database. This was done using Postgres hosted by Neon and fully integrated into Replit.
Step 3: Adding Third Party Integrations
Most of what I wanted to active, the agent did with JavaScript code and additional libraries but there are some third party platforms that it used. I am not sure how it decides on what to use so probably something for me to learn more about.
It needed a platform to store images and it chose a platform called UploadThing which has a free subscription tier. There were some problems with getting this to work and I suggested using AWS S3 storage instead. The agent complied but we hit some issues which I think were of my creation, not being able to set up S3 access controls properly. We reverted to the first approach and and got it working.
I also asked the agent to integrate Google Analytics which it easily did. All I needed to do was provide the analytics tag.
Step 4: Building a Landing Page
Having completed the app, I asked the agent to build a landing page. I provided the design brief, the copy, and the hero image and the page was built pretty quickly. At this point it is worth noting that when building a project, Replit provides both an agent and an assistant. The agent is intended for larger, more complex changes, and the assistant for smaller changes. The checkpoints that the assistant creates cost $0.05, so this is a little cheaper than using the agent.
To tweak the landing page, I primarily used the assistant.
Step 5: Improving User Registration
When performing the initial build, the agent created its own user sign up and registration process. This worked well but then I realised that my app would need to handle things like resetting passwords. I therefore decided to use Google Firebase to handle user registration and authentication. This then provides more sign-up options, e.g. using your Google, Apple, or Microsoft account. After setting up the project on Firebase, I got the agent to change the approach.
Unfortunately this broke a few things that I then needed to work through but with the help of the agent, got it working.
Step 6: Deploying the App
After quite a bit of testing, it was time to deploy the app to production. The process is straightforward and the agent does it all for you. The deployment failed the first time, I am not sure why. I tried a second time and it worked - my web app was live!
By default the app gets a subdomain address at replete.app but you can hook it up to a custom domain which is what I did. I registered the domain at Namecheap and the Replit configuration was really easy.
You can check out the app at https://dashdiary.co.uk/
Cost of the Project
This is a really inexpensive way to build a fully functioning web application. The largest cost is the Replit agent, which cost around $30 to build the app. Once you exceed your $25 of monthly credits you can consume the services on a pay as you go approach, setting a budget and notifications.
Here is a full cost breakdown:
Replit Agent: $31.75
Assistant: $2.30
Deployment: $0.04
PostgreSQL storage: $0.10
PostgreSQL compute: $1.63
The total cost was $35.82, plus a few dollars for the custom domain. The UploadThing object storage is on a free tier, as is the Google Firestore.
Tips For Creating Your Own App
No doubt you are rearing to get building. I know that I will continue to add features to my app and will also be building several others. Here are a few things to keep in mind:
Be very specific with your initial (and subsequent) prompts. Do not leave any room for ambiguity
Create your user authentication as early as possible because this will save you a lot of trouble
The agent is great at suggesting new features. Try and manage this carefully and focus on what you set out to build. Get this working first and then evolve your application from there
Try and use the assistant where you can as it is 20% of the cost of the agent
Having some basic coding skills does help. For me it was some SQL knowledge which helped me manage the backend database during testing and then cleaning it up afterwards
When you deploy your application, there is only a single instance of the database so be careful making changes to your development database as this is one and the same as production
If you get stuck with something or are considering a new feature which you are not sure is possible, ask the assistant
Don’t use the agent or assistant to come up with copy/content as this will incur unnecessary cost. Write this yourself or use ChatGPT or Claude.ai
Final Thoughts
I am continuing to evolve the app and trying to get users to join and use it. Part of this was trying to create an integration to my mail automation platform (Mailerlite). I considered things like Zapier but this required a paid subscription. I came up with the bright idea of creating a Google Firestore function written by Claude.ai. This was a seriously bad idea as I wasted a large portion of my Saturday trying to get it to work, mostly just trying to get a small development environment working for the Firestore functions.
I eventually gave up and went back to the drawing board the next day. I ask the Replit assistant to do this for me and it created the custom code. I supplied the necessary API details and after less than 30 minutes it was working! Now when a user registers, they get a welcome email.
I think that building apps like this is really compelling. I think that paying someone to code the same app from scratch would cost at least 25 times more.
Check out the app at https://dashdiary.co.uk and let me know what you think, or if you have any questions.