Designing the experience
Defining the flows, organizing the information, and designing the interfaces for phone as well as desktop. Making the town and Moni useful landmarks within the application.
Product design · Web development
Cindy Robinson
Designer & developer of MoniTown
Cindy Robinson designs and develops MoniTown, a budgeting application that turns expenses, goals and a budget's progress into an interactive town.
- JavaScript
- Web interfaces
- Product design
MoniTown
Designing a budget
you can see
MoniTown's challenge is to make a budget easier to understand. Spending categories become buildings, and savings goals take the form of chests. Recorded expenses and the user's decisions have a visible translation in the town.
This work connects web development, data visualization, user experience, animation and light gamification. The town has to stay readable on a phone, and its interactions have to help people understand the numbers without making them feel guilty.
Local-first operation lets you start without an account. Online syncing only starts with an account, which the user chooses whether or not to create: that autonomy is also part of the product's design.
Her role
From idea to product
Cindy Robinson originated the design and development of MoniTown. As the project's lead developer, she connects product decisions to their technical implementation, then to their validation.
Developing the logic
Building expense tracking, budgets, pay cycles, due dates and savings goals. Connecting this data to the interactions and to the buildings' growth.
Integrating and maintaining
Integrating the graphic elements, optional authentication and Supabase syncing. Evolving the PWA, testing changes, fixing issues and following up on deployments.
The project's foundation
Tech stack
Cindy works mainly with JavaScript and web technologies. MoniTown's foundation combines interactive interfaces, local data and syncing services. Each technology fills a specific role.
Core technologies
Interfaces & application
JavaScript · React · HTML · CSS · Vite
React structures the application and its contexts. The town's interface also uses dedicated JavaScript modules. The public site is HTML/CSS, with a JavaScript demo.
Core technologies
Data & authentication
Supabase · PostgreSQL · IndexedDB
Supabase Auth handles optional accounts. PostgreSQL and its access rules power syncing. IndexedDB keeps the budget on the device, with additional storage in localStorage.
Core technologies
Town & interactions
Canvas 2D · SVG · JavaScript · CSS
A custom engine draws the isometric town in Canvas 2D. The six Moni characters also use Canvas 2D, embedded in web components; icons use SVG. JavaScript drives the animations while accounting for the application's visibility.
Technologies in use
Server functions
TypeScript · Deno · SQL
TypeScript is used in Supabase Edge Functions, notably for local-budget migration and account deletion. SQL defines the tables, access policies and data functions.
Technologies in use
Install & offline
PWA · Workbox · vite-plugin-pwa
The manifest, service worker and cache enable installation and offline operation after a first load. The local budget and syncing have distinct responsibilities.
Development tools
Quality & shipping
Node.js · npm · Oxlint · GitHub Actions · Vercel
Automated tests use Node.js; Oxlint checks the code. GitHub Actions runs checks before merging, and Vercel hosts the public site and the application.
An exploration with Three.js also exists in a graphics-preparation tool. It's separate from the Canvas 2D engine used in the application.
Languages, in context
Languages & technologies
- JavaScript & JSX
- Budget logic, React components, application state, user interactions, drawing and animating the town.
- HTML & CSS
- Page structure, layout, screen adaptation, interface accessibility and visual animations.
- SQL & PL/pgSQL
- PostgreSQL structure, migrations, access rules and functions used to manage and sync data.
- TypeScript
- Supabase server functions run with Deno. The current frontend is mainly written in JavaScript, not TypeScript.
AI & development
Building with today's tools
Cindy also uses artificial intelligence tools as creative and development assistants. They help her explore solutions, prototype, generate code approaches, analyze bugs, refactor and document.
These tools are part of her working environment, alongside her code editor, libraries and documentation. They speed up certain tasks; their output still has to be understood, adapted to the project and checked.
Cindy remains responsible for the product decisions, the architecture, the technical choices, the integration, the testing and the final validation. MoniTown's design and development are led by her, with these tools in support.
A project that evolves
What comes next
These priorities extend the work already under way on the application. The directions considered are still being evaluated and are neither available features nor a delivery timeline.
Current
An installable web foundation
- A PWA with a manifest, service worker and cache.
- Local budget and optional syncing.
- A Canvas 2D town and an animated Moni.
- Animations pause based on context and visibility.
Experimental
Graphics preparation
A Three.js tool explores rendering an island into images, outside the application. Its existence documents a graphical direction; it doesn't signal replacing the current town engine.
Under consideration
Smoothness & mobile
- Lightening the initial load and assets.
- Looking into on-demand loading and splitting the JavaScript.
- Strengthening caching and resilience on slow connections.
- Optimizing the town and enriching Moni on smartphones.
- Exploring an installable distribution beyond the current PWA, with no native technology decided yet.
From code to use
See the project in action
Exploring MoniTown lets you find these design choices in a real application.
Technical overview last updated on .