Overview
ServiceTrack is a complete Document Center and Task Management (CMMS) solution built with React and Vite. It addresses small service business operations by utilizing Google Sheets as a zero-cost, real-time backend data store, coupled with a synchronized client-side caching layer and instant client-side PDF receipt generation.
Problem & Approach
Small service centers and repair operations need an organized way to track customer work orders, equipment statuses, and receipts, but commercial CMMS software is cost-prohibitive and overly complex.
Coupled React with Google Sheets via secure API endpoints, creating an in-memory caching system that maintains data consistency while generating customer PDF receipts entirely client-side using jsPDF.
System Architecture
- Frontend UI
- React, Vite, and Tailwind CSS for rapid client rendering.
- PDF Generation
- jsPDF library running in the browser to compile transaction receipts.
- Data Layer
- Google Sheets REST API with synchronized caching to prevent rate-limit throttling.
Features & Deliverables
- 01Google Sheets Live SynchronizationImplemented
Uses Google Sheets as a real-time relational backend, eliminating hosting and database subscription costs.
- 02Synchronized Caching LayerImplemented
Intelligent in-memory cache layer preventing API rate limits while keeping task and customer records synchronized.
- 03Automated PDF Receipt GenerationImplemented
Instant client-side PDF generation via jsPDF with serial numbers, service items, and payment receipts.
- 04Task Lifecycle ManagementImplemented
Status tracking for incoming tasks (Pending, In Progress, Completed) with fast filtering and search.
Technical Challenges
ProblemGoogle Sheets API rate limits and network latency on repeated data fetches.
Resolution:Engineered a local caching layer that stores fetched records and only invalidates specific row indices upon confirmed create, update, or delete actions.
ProblemProducing consistent, high-fidelity PDF documents across varying device screen sizes.
Resolution:Implemented fixed-coordinate layout generation in jsPDF, calculating exact millimetric offsets for tables, headers, and signature lines.
Contributions & Takeaways
My Contributions
- Conceived, designed, and developed the entire application from ground up.
- Engineered the Google Sheets integration and custom caching logic.
- Designed and implemented the jsPDF template layout and printing pipeline.
- Deployed and maintained the live production application on Vercel.
Key Learnings
- Google Sheets can serve as an effective serverless database for low-concurrency operational workflows when paired with caching.
- Client-side PDF generation reduces server load and delivers immediate feedback to users.
Interested in discussing this project or working together?
Get in touch