Vibe Coding a Full-Stack App

This weekend, I decided to build a simple, mini end-to-end SaaS application. The goal was to create something with a frontend, a backend, a database, and user authentication. This was a step up from my previous experiment project, which were mostly simple web apps.

For this project, I used Firebase and its web-based IDE, Firebase Studio. The most interesting part is that I did not write any of the code or run terminal command myself. Instead, I used the integrated Gemini 2.5 Pro to generate everything. The entire process was a series of conversations and iterations with the AI, without opening a local IDE or running terminal commands. My setup was something like this, just a conversation chat and terminal

The Application

The result is a simple yet useful project update tool for sharing high-level stakeholder updates. It allows you to create projects and add key events to a visual timeline. You can include dates, status updates, and notes for each event. It also supports sharing the project with other users. The timeline view makes it easy to see progress and any potential delays.

Any one can register, login. Share their project with others.

The Process

I spent a couple of hours refining the application through prompts. While the process was efficient, it had its challenges. For instance, I found myself in a few loops with Gemini where it would forget to update the Firebase security rules, even after being corrected in previous steps.

This led to a good idea to improve the process is to use the complete history of our conversation to build a detailed system prompt. This system prompt can then be used for any future Firebase and React projects to reduce the number of iterations needed.

Resources

I have shared some of the resources from this project below,

  1. Initial Prompt – https://github.com/balaganesh/project-update/blob/main/prompt
  2. System Prompt (Generate out of conversation) – https://github.com/balaganesh/project-update/blob/main/AI_CODING_ASSISTANT_SYSTEM_PROMPT.md
  3. Repository – https://github.com/balaganesh/project-update

Leave a Reply to * * * Claim Free iPhone 16: https://nhatnambds.com/index.php?eryfwi * * * hs=e9f0a76cd572cc41db946a5859434aa0* ххх* Cancel reply

Your email address will not be published. Required fields are marked *

2 thoughts on “Vibe Coding a Full-Stack App”

  1. ixxlhdighy says:

    fvqrutrsnpwohpwxxqisjtleljoyxu