From Prototype to Pharmacy Dashboard: Scaling an AI-Generated App with Google Gemini
Source: Dev.to
Project Overview
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 a platform that could accelerate the initial implementation. That’s when I discovered Tempo, an AI‑powered design and development tool for React.
- The free tier gave me enough daily credits to get started, and the code synced directly with a GitHub repository.
- I spent most of my credits on bug fixing and feature implementation.
- Eventually Tempo tightened its credit limits, resetting them every 24 hours.
Despite these constraints, I delivered an initial implementation ready for testing, which included the following features:
Core Features
- User Management
- Branch Management
- Inventory Management
- Monthly Sales Reporting
- Multi‑language Support (Spanish & English)
- IndexedDB for local data storage
Because of the credit limits and several features still missing, I transitioned the development to Google Gemini to take the project to production.
Gemini‑Powered Enhancements
Gemini played a key role in bug fixing, feature development, and migration of the database from local storage to Cloud Firestore. It also guided the deployment strategy, using GitLab Pages and Vercel to bring the project to a production‑ready state.
Additional Features Implemented with Gemini
- Dual‑Layer Inventory – separate Pharmacy and Warehouse stocks
- Daily & Weekly Sales Reporting
- Inventory Search & Editing
- Orders Module
- Daily, Weekly & Monthly Orders Reporting
- Daily Sales & 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 (the only live version is the one my client uses and it requires a login). Instead, I’ve put together screenshots to show how the dashboard looks.
| Section | Description |
|---|---|
| Access & Security (Sign In) | Entry point of the app, integrated with Firebase Authentication for secure access. |
| Command Center (Dashboard) | High‑level overview of the pharmacy’s health, from stock alerts to quick sales stats. |
| Dual‑Layer Inventory | Manage stock between the Pharmacy and the Warehouse. |
| Point of Sale (Sales Module) | Real‑time interface for pharmacists, featuring barcode scanner support for quick checkouts. |
| Data‑Driven Decisions (Sales Report) | Daily, weekly, and monthly analytics that help the owner understand revenue trends. |
| Supply Chain Management (Orders) | Handles restocking and tracking of new medicine supplies. |
Technical Milestones Achieved with Gemini
1. Mastering AI‑Assisted Development
- Learned to write better, more contextual prompts.
- Used Tempo for the initial UI and Gemini to refactor auto‑generated code, turning a prototype into a production‑ready system.
2. From IndexedDB to Cloud Firestore
- First experience with IndexedDB and SQLite – learned connection setup and CRUD methods.
- Realized local storage doesn’t sync across devices; needed a scalable, cloud‑native solution.
- Gemini suggested Cloud Firestore; its free tier satisfied all requirements.
- Gained hands‑on experience with Firestore data modeling and Firebase Authentication for secure user handling.
3. Scalable Solution (Two Repositories)
| Repository | Purpose | Deployment |
|---|---|---|
| Backend API | Handles user creation, updates, and authentication without terminating the current admin session. | Deployed on Vercel (first time) with a GitLab CI/CD pipeline. |
| Frontend Application | The React dashboard. | Deployed via GitLab Pages with its own CI pipeline. |
4. Overcoming SPA Routing Hurdles on GitLab Pages
- Faced 404 errors when refreshing routes in the SPA.
- Consulted GitLab documentation and worked with Gemini to configure proper fallback routing, ensuring the SPA router works correctly in production.
5. Local Development with gcloud Emulator
- Tested Firestore security rules and data structures locally before deploying.
- Documented the workflow in a dedicated article because it proved so valuable.
Google Gemini Feedback
Working with Gemini was a game‑changer for this project, but like any powerful tool, it has a learning curve.
What Worked Well
| Aspect | Why It Was Effective |
|---|---|
| Guidance | Concrete answers when I asked about specific technology stacks (e.g., moving from IndexedDB to Firestore). |
| Refactoring | Precise suggestions after I shared code snippets and explained the required business logic. |
| Problem‑Solving | Helped debug SPA routing issues on GitLab Pages and configure CI/CD pipelines for Vercel. |
Areas for Improvement
| Issue | Suggested Improvement |
|---|---|
| Repository Integration | Gemini currently struggles to analyze an entire repository at once. Direct integration with a GitHub or GitLab repository would dramatically boost productivity. |
| Context Persistence | Maintaining context across long sessions (e.g., multi‑step migrations) could be smoother. |
| Code Execution Feedback | Providing simulated execution results or linting feedback would help validate suggested changes faster. |
Thank you for reviewing my submission. I hope this clean, structured overview demonstrates the value Gemini added to the project and highlights opportunities for further tool enhancements.
- **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.