Posts

Showing posts with the label PWA

RxInteract

Introduction Across many PWA projects that I have worked on (such as RxLookup , RxAlbum , RxPed , and RxQuote ), I began to recognise an unsettling pattern. While modern AI-assisted vibe coding allows you to set up the app architecture within a few days, the hardest part remains the source data that acts as the foundation and soul of the app. Even the thought of building a drug interaction database from scratch and trying to make it comprehensive felt overwhelming. Gathering and verifying thousands of individual interaction pairs would take immense effort, and in the end, it would still be nowhere near complete. Because of this, while vibe coding RxInteract , our initial plan was to outsource publicly available reference data, and one potential candidate was DDInter . However, the downloadable data only provided interaction severity scores - it lacked clinical details, underlying mechanisms, and actionable management steps. Knowing a severity number without knowing what to do with th...

RxTrade

Introduction Stock trading is often simplified into the mantra "buy low, sell high". However, in practical trading, hidden friction costs - brokerage commissions, clearing fees, and stamp duties - frequently erode realized returns, especially for active traders. High trading frequency does not guarantee investment success; discipline and precise cost accounting matter far more. While standard brokerages and mainstream portfolio trackers provide rudimentary trade logging, they almost universally fail to account for real-world nuances: non-refundable IPO application fees, partial share balloting, dividend scrip reinvestments, and the distortion of Yield on Cost (YoC) during position trimming. To bridge these gaps, RxTrade was designed as an offline-first stock trading journal and portfolio tracking engine with transparent, mathematically rigorous cost-basis accounting. Foundation and Evolution from RxBudget Rather than reinventing foundational infrastructure, RxTrade leverag...

RxDict

Introduction Even before starting my "vibe coding" journey, I worked extensively with database generation in MDict ( .mdx ) format. MDict , created by Rayman Zhang, made it feasible to convert custom spreadsheets into readily searchable, offline dictionary apps. I initially assumed .mdx was an open standard. However, because its compression algorithms and encryption technologies were proprietary and undocumented initially, third-party dictionary engines (such as GoldenDict ) had to reverse-engineer the .mdx format. To make matters worse, the .mdx format suffered from severe version backward-incompatibility. As MDict evolved across versions (from v1.0 to v2.0 and v3.0), fundamental changes were introduced to header structures, block compression algorithms (e.g., LZO vs. zlib/zip), keyword index layouts, and encryption key derivations. Older dictionary readers frequently failed to open newer .mdx files, while newer tools struggled to parse legacy dictionaries without spec...

RxHTML

Introduction While I am not a professional developer, I learned the basics of HTML - the foundational markup language used to structure web content, define image alt text, and embed media. Although I consider myself a "vibe coder" who relies on AI tools to build software, I frequently format HTML content for my database project, RxLookup . My go-to tool used to be HTML Cleaner , which offered a smooth workflow. However, because the site became heavily cluttered with sponsored links and promotional text, I decided to build a clean, custom alternative for my own use. Features RxHTML is built as a Progressive Web App (PWA) featuring side-by-side synchronized Visual (WYSIWYG) and HTML Source Code editors. Security: Built as a client-side Single Page Application (SPA), it integrates DOMPurify sanitization to prevent Cross-Site Scripting (XSS) and DOM-based code injection attacks. Visual (WYSIWYG) Editor: Offers a comprehensive suite of formatting tools: Heading styles with ...

RxZip

Introduction Years ago, when internet speeds were slow and disk storage was scarce, archiving and extracting files was standard practice - especially when transferring files or sending emails. The tool most of us were familiar with back then was WinRAR , which introduced the proprietary RAR format. Years later, 7-Zip challenged its dominance. Today, most operating systems and Android devices come equipped with built-in tools to handle standard ZIP files. However, gaps still remain - specifically when dealing with password-encrypted archives or proprietary formats like RAR. Due to privacy and security concerns, I frequently protect archived files with a passphrase. To avoid relying on heavy third-party software just to open or create these files, I built RxZip , a client-side Progressive Web App (PWA) . Features Built as a fully client-side PWA, RxZip handles archive creation and extraction 100% offline and privately, without uploading any data to a server. Native ZIP operations (both ...

RxKeep

Introduction While Google Keep is widely loved for its fast, minimalist workflow, relying on big-tech cloud services means storing your personal thoughts, schedules, and daily habits on remote servers. RxKeep was created as a privacy-focused alternative: delivering the familiar convenience of Google Keep and Google Calendar in a 100% offline, local-first application where your data never leaves your device. Key Features Google Keep-Style Note Taking & Organization Rapid note and interactive checklist creation. 12 Keep-inspired color palettes and note pinning. Note tagging, archiving, and a recoverable Trash system. Fast, unified search across notes, tags, calendar events, and trackers. Image Attachments & Fullscreen Lightbox Upload photos, diagrams, and screenshots (PNG, JPG, WebP, SVG, GIF) directly into notes. Stored locally offline as Base64 in IndexedDB with an interactive fullscreen Lightbox viewer. Calendar & Agenda Planning Switch between Month, Week, Day, and S...

RxPDF

Introduction For rudimentary tasks like converting images to PDFs or merging and splitting documents, many people have likely used  iLovePDF . Even though the platform's uploading process uses security standards like end-to-end encryption and automatic server deletion, it still raises privacy concerns when handling sensitive documents. To effectively address these concerns, I decided to create a fully client-side PDF utility tool: RxPDF . NOTE: The desktop version of iLovePDF does offer free offline features, which also resolves these privacy issues. Features RxPDF's core features are built using the existing dependencies pdf-lib and pdfjs-dist . View & Fill: Inspect documents and interactively fill and submit form fields in your PDF. Bookmark: Auto-import, create, edit, nest and organize document outlines and bookmarks. Merge: Combine multiple PDF documents and images (JPG, PNG, WebP) into a single PDF in any order. Split: Pull specific pages or page ranges from a PDF...

RxProfile

Introduction A friend recently shared a web project with me that allowed users to input data and export it as Word, PDF, and JSON files. Backing up, transferring, and restoring data via JSON files enables seamless data sharing without relying on complex, costly cloud databases like Firestore or setting up real-time sync infrastructure. Realizing that a local data store could be managed entirely via JSON files while providing clean document exports, I began exploring how to apply this architecture to healthcare. This inspired RxProfile : a PWA designed for healthcare professionals to generate patient medication profiles as PDFs while allowing them to back up patient data locally as JSON files (or sync them via personal cloud storage like Dropbox) for future access. Prototyping and Refactoring While using "vibe coding" to set up the core structure of RxProfile was relatively straightforward, new edge cases and requirements constantly emerged. For instance, I needed to expan...

RxLunar

Introduction Over the past few months, I kept asking myself: Is there a Progressive Web App (PWA) I could build that fulfills a personal need? The answer came from a memory a few years back. My mother asked if there was a simple lunar calendar app to quickly check when 初一 (the 1st day of the lunar month) or 十五 (the 15th day) falls. There were also times when our family wanted to check whether a specific date was auspicious for certain activities. While numerous traditional Chinese almanac (黄历) apps exist, most are heavily cluttered with intrusive ads. To solve this, I decided to build a clean, ad-free PWA: RxLunar . Lunar Calendar & Almanac Logic Much of the data in a traditional Chinese almanac relies on astronomical algorithms to compute solar terms, lunar phases, and daily auspiciousness (宜忌). Initially, implementing these calculations from scratch felt like a daunting task. Fortunately, I discovered the lunar-javascript npm package, which handles lunar date conversions and al...

RxQR

Introduction Out of the blue, my colleague asked me, “Do you know how to generate a QR code ?” Without hesitation, I replied that we could just Google "Free QR code generator" - there are plenty of free tools available online. However, she pointed out that many of those free QR codes either do not last long or have limitations on the number of scans. In fact, she once got caught off guard by this at an event. That immediately piqued my interest. A QR code, much like a barcode, should simply encode the information you provide into a visual pattern - and in theory, it should not expire. A quick search reveals that this is a common issue. Many of the so-called "free" QR code generators actually create dynamic QR codes, which do not directly encode your data. Instead, they encode a URL that redirects to the provider’s server - often used to display advertisements, track scans (including device type, location and timestamp) or restrict access behind paywalls. This pract...

Building an Offline-First Personal Budgeting PWA

Introduction A key element in financial planning is having a budgeting tool that allows you to track both daily and planned transactions. This provides a clear picture of your financial status and spending habits. However, most budgeting apps available on app stores either require a premium subscription or are bundled with intrusive advertisements. To address this gap, we will explore how to build a cost-efficient, offline-first personal budgeting app tailored for daily use. Preplanning the App Setup As with previous projects like a drug database PWA or a Blogger PWA , we will use Firebase Studio to scaffold the core structure of this budgeting app. To keep the app cost-effective while feature-rich, it should include: User authentication and login A transaction page with a form/dialog for adding entries and filtering capabilities Cloud syncing of income and expenses Charts for balance trends and summary statistics (e.g., today, this week, this month, this year, all time) Since we ar...

Building an Offline-First Blogger PWA Using Firebase Studio

Introduction Building on the success of creating a drug database app using Firebase Studio , I decided to take on a new challenge - developing an offline-first PWA for my existing blog. Truth be told, even with some prior experience, this new project introduced more complexities and considerations than the previous one, making it another rewarding yet demanding endeavour. Setting Up in Firebase Studio To quickly prototype a user interface, you can use the App Prototyping Agent in Firebase Studio , which supports natural language prompts for layout generation. The core framework of this Blogger PWA relies on the Blogger API v3 to fetch both blog posts and static pages from a specified Blogger blog, sync the content into IndexedDB and render it within the app. Technically, to use the Blogger API v3 to fetch the data, you do not have to be the owner of the blog. On the other hand, you need three key things: Blog ID This unique identifier is crucial for targeting the correct blog. If yo...

A Practical Roadmap to Building an Offline Drug Database with Firebase Studio

Introduction In my previous post on Firebase Studio , I discussed some of the limitations when coding an app powered by artificial intelligence . Despite those hurdles, the final outcome - the RxLookup Progressive Web App - stands as a noteworthy milestone and a successful achievement. In this post, I want to highlight a few key decision-making points and common pitfalls to watch out for if you are planning to build a drug database or dictionary app. Deploying as Progressive Web App Typically, an app can be deployed in several forms: as a web app or a native app (such as those available on the Google Play Store or Apple App Store). A rising trend in recent years is the Progressive Web App (PWA) . Technically, a PWA leverages standard web technologies, allowing a single codebase to run seamlessly across laptops, iPhones and Android devices with minimal platform-specific adjustments. Since it is deployed as a hosted website, it enables rapid and frequent updates - unlike traditional n...