Time Well Spent (TWS) is a Progressive Web Application (PWA) that gives users a new and immersive way to track their income. The app combines stunning 3D visuals, real-time data, and intuitive tools that make managing work hours and earnings easier than ever. Whether you're paid hourly, on salary, or by commission — TWS turns your workday into a live, visual experience. Watch animated coins fall in real time as you earn. See exactly where your money is going. Customize everything to fit your style.
Frontend Backend / Data Infrastructure Tooling
───────────── ────────────────── ──────────────── ───────────
Vue 3.5 Supabase (PostgreSQL) Netlify Vite v5
Pinia Supabase Auth GitHub ESLint
Three.js Supabase Realtime Netlify Functions Prettier
CSS3 / Flexbox Supabase Storage Service Worker API
OpenAI API RLS Policies Web App Manifest
Many income-tracking tools are either too complex, locked behind paywalls, or built for accountants — not workers. The goal of Time Well Spent was to build something that a shift worker, freelancer, or salaried employee could glance at during their day and feel genuinely rewarded for their time.
The concept started with a simple question: What if your phone showed you exactly how much money you were making — right now, in real time? That question drove every design and technical decision.
The project was completed across two semesters (CST-451 and CST-452) using an iterative development process:
- Research & Architecture (CST-451) — Selected the tech stack (Vue 3, Supabase, Three.js), designed the database schema, and produced the UML diagrams and system architecture
- Backend Implementation — Set up Supabase tables, RLS policies, and authentication; built all data access layers in Pinia stores
- Frontend Development — Built the component library in Vue 3, implemented responsive layouts, wired up Supabase realtime subscriptions
- Core Features — Implemented the live earnings clock, Three.js coin animation, time tracker, and jobs setup
- Customization & AI — Added the theme color picker and OpenAI-powered theme generator via Netlify serverless functions
- PWA & Deployment — Configured the Service Worker, Web App Manifest, offline queue, and deployed to Netlify with GitHub CI/CD
Project Requirements Summary
| Requirement | Status | Notes |
|---|---|---|
| PWA with offline support | ✅ Met | Service Worker + Web App Manifest via Vite |
| Relational cloud database | ✅ Met | Supabase (PostgreSQL) with full CRUD |
| 3D data visualization | ✅ Met | Three.js coin rain on dashboard |
| Customizable UI with persistent preferences | ✅ Met | Vue + Pinia + Supabase storage |
| Cross-platform compatibility | ✅ Met | Responsive, tested on Chrome/Safari/Firefox/Edge |
| AI-powered theme generation | ✅ Met | OpenAI API via Netlify serverless functions |
| Source control + CI/CD deployment | ✅ Met | GitHub + Netlify auto-deploy |
| Secure authentication | ✅ Met | Supabase Auth (bcrypt) + RLS policies |