From Prototype to Pharmacy Dashboard: Scaling an AI-Generated App with Google Gemini

Posted on by — No Comments ↓

This is a submission for the Built with Google Gemini: Writing Challenge

What I Built with Google Gemini

Last year, a friend hired me to develop a custom dashboard for his pharmacy. At the time, I was working daily with Vue.js and TypeScript, but I wanted to find a platform to accelerate the initial implementation. That is when I discovered Tempo, an AI-powered design and development tool for React.

The platform provided enough daily credits on its free tier to get started, and I loved that the code synced directly with a GitHub repository. I used most of my credits for bug fixing and feature implementation; however, the platform eventually tightened its credit limits, resetting them every 24 hours. Despite these constraints, I managed to get an initial implementation ready for testing, which included the following features:

  • User Management

  • Branch Management

  • Inventory Management

  • Monthly Sales Reporting

  • Multi-language Support (Spanish & English)

  • IndexedDB for Local Data Storage

Due to these limitations and several features yet to be built, I transitioned the development to Google Gemini to take the project to production.

Gemini played a key role in bug fixing, feature development, and migration of the database from local storage to Cloud Firestore. Additionally, it guided the deployment strategy, using GitLab Pages and Vercel to take the project to a production-ready state.

Additional features implemented with Gemini:

  • Dual-Layer Inventory: Divided into Pharmacy and Warehouse stocks.

  • Daily and Weekly Sales Reporting

  • Inventory Search and Editing

  • Orders Module

  • Daily, Weekly and Monthly Orders Reporting

  • Daily Sales and Orders Editing

  • POS Module with Barcode Scanner Support

  • Firestore User Management

  • Stock Alerts

  • PDF Reports Download

Demo

I don’t have a public demo instance available since the only live version is the one my client is using (and it requires a login, of course!). So, I’ve put together some screenshots to show you how the dashboard looks like.

  • Access & Security (Sign In): The entry point of the app, integrated with Firebase Authentication for secure access.

Sign In

  • The Command Center (Dashboard): A high-level overview of the pharmacy’s health, from stock alerts to quick sales stats.

Dashboard

  • Dual-Layer Inventory: This is where the magic happens: managing stock between the Pharmacy and the Warehouse.

Dual-Layer Inventory

  • Point of Sale (Sales Module): The real-time interface for pharmacists, featuring barcode scanner support for quick checkouts.

Sales

  • Data-Driven Decisions (Sales Report): Daily, weekly, and monthly analytics that help the owner understand their revenue trends.

Sales Report

  • Supply Chain Management (Orders): The module built to handle restocking and tracking orders for new medicine supplies.

Orders

What I Learned

This project was a continuous learning journey. Here are the key technical milestones I reached with Gemini’s guidance:

  • Mastering AI-Assisted Development: I learned to write better, more contextual prompts. By using tools like Tempo for the initial UI and Gemini to refactor auto-generated code, I was able to transform a simple prototype into a production-ready system.

  • From IndexedDB to Cloud Firestore: I hadn’t used IndexedDB or SQLite before. While I learned to configure their connections and CRUD methods, I quickly realized their biggest constraint: local data doesn’t sync across devices. As a developer with experience in MySQL, and PostgreSQL, I needed a scalable, cloud-native solution. Gemini suggested Cloud Firestore, and its free tier perfectly satisfied the project’s requirements. Although I had previous experience with NoSQL databases like MongoDB, this was my first time with Firestore. I learned how data is structured and how to use Firebase Authentication to handle users securely without storing sensitive login data in plain documents.

  • Scalable Solution (Two Repositories): I decided to separate the project into two distinct repositories:

    The Backend API: Built to solve a specific challenge: creating users without terminating the current administrator’s session. This API manages user creation, updates, and authentication independently. I deployed it using Vercel (my first time using the platform) and configured a GitLab CI/CD pipeline for automated deployment.

    The Frontend Application: Deployed via GitLab Pages. I also configured a dedicated GitLab CI pipeline to build and deploy the application automatically.

  • Overcoming SPA Routing Hurdles on GitLab Pages: During the deployment of the Frontend, I faced a common issue with Single Page Applications (SPAs): 404 errors when refreshing routes. By diving into the GitLab documentation and working with Gemini, I learned how GitLab Pages handles routing and implemented the necessary configuration to ensure the SPA router functioned correctly in production.

  • Local Development with gcloud Emulator: To ensure a safe and efficient workflow, I learned how to test database changes using the gcloud Emulator. This allowed me to validate Firestore security rules and data structures locally before deploying them to the cloud. I found this process so valuable that I documented it in a dedicated article.

Google Gemini Feedback

Working with Gemini was a game-changer for this project, but like any powerful tool, it has its learning curve. Here’s my feedback:

What Worked Well:

  • Guidance: Gemini excelled when I asked concrete questions about technology stacks (like the move from IndexedDB to Firestore).

  • Refactoring: When I shared specific code snippets and explained the required business logic, Gemini was incredibly effective at suggesting precise changes and handling complex refactors.

  • Problem-Solving: It was instrumental in debugging the SPA routing issues on GitLab Pages and configuring the CI/CD pipelines for Vercel.

Areas for Improvement:

  • Repository Integration: Currently, Gemini struggles to analyze an entire repository at once. I believe it would be a massive productivity boost if Gemini could connect directly to a GitHub or GitLab repository to understand the full codebase context.

  • IDE Extension: While the web interface is great, having a more integrated experience directly within the code editor (beyond simple autocomplete) would reduce the friction of switching back and forth.

  • Accuracy & Verification: AI responses are not always 100% accurate. I quickly learned that you must always review and test suggested changes before merging them, as some suggestions can inadvertently break existing module logic.

Leave a Reply