RxProfile

Introduction

Using Firebase Studio for vibe coding initially restricted me to the Next.js framework, rather than allowing me to get familiar with pure vanilla HTML, CSS, and JavaScript.

• It was only later, upon gaining exposure to Google Antigravity, that I became more comfortable with Vite + React and Cloudflare deployments.
• Even so, I have always been curious about how other vibe coders set up their apps - whether they also default to Next.js or use other platforms.

Inspiration from a Serverless Approach

My friend shared a web project with me where users can input data and export it as Word, PDF and JSON files.

• Backing up, transferring and restoring JSON files allows data to be shared without relying on high-end, costly databases like Firestore or real-time sync.
• What impressed me most was that she managed to contain all the structure, styling and logic - HTML, CSS and JavaScript - within a single HTML file.
• The only tradeoff was that she had to wait four hours after burning through Claude's token limits very quickly.

The real pain of being a vibe coder is that we are never true programmers; we lose our magical power to turn ideas into reality the moment our tokens run out.

Conceptualizing RxProfile

Seeing that a database could be saved locally as a JSON file and exported to Word or PDF, I thought deeply about how to incorporate this workflow into an app design.

• I realized I could create a patient medication profile generator PWA where healthcare professionals can easily generate a PDF copy for their patients and save the data locally as a JSON file (which could then be backed up to cloud storage like Dropbox) for future use.

Prototyping and Refactoring

After opening Google Antigravity, I described the idea using a natural language prompt.

• Fairly quickly, the AI agent started generating the bare minimum vanilla HTML, JS, and CSS files.
• With my prompts, the web app grew progressively more complex, and in less than an hour, my account had exhausted its token limit.

While the AI kept editing the exact same three files, I found myself missing the structured environment of the Next.js framework, where I could expect the AI to organize logic into modular .ts or .tsx files.

• Instead, it was updating specific parts of a monolithic file, leaving me worried that it might overlook or forget to update other areas.
• I was equally in the dark about potential TypeScript errors or unchecked bugs.
• Eventually, I refactored the legacy files to adapt them back into a Next.js export, and ran necessary tooling like TypeScript, Biome, and Knip to ensure code quality.

Summary

After a few hours of vibe coding, RxProfile remains at a very early stage of development. Once I set up the basics, new ideas kept flowing.

• For example, I need to expand the routes of administration to include sublingual, oral drops, and oral sachets.
• When adding eye drops and ear drops, I also need to include extra fields for "left", "right", or "both".
• I also need to move beyond standard daily dosing schedules (e.g., OD, BD, TDS, QID, PRN) to accommodate more complex regimens like every other day, weekly, and monthly.

The most tedious work ahead will be setting up a prefilled medication database.

• This feature would allow users to select a medication and automatically populate the route of administration, default frequency, indications, and special instructions - a massive task I have not even started yet.

NOTE: The RxProfile design is not intended for acute medication use, such as short-term antibiotics.