CoinCubs

A classroom economy that leads to the foundations of financial literacy

Comment

CoinCubs - The Complete Financial Ecosystem for UK Primary Education

About the Project

CoinCubs is a unified school infrastructure application designed to solve the chronic problem of teacher administrative overload while simultaneously closing the financial literacy knowledge gap among pupils aged 7-12.

The platform goes far beyond a typical classroom economy. It replaces fragmented administrative systems (for behaviour, payments, and communication) with a single, cohesive tool. The core innovation is the integration of zero-preparation financial education directly into the mandatory administrative workflow.

  • Systemic Replacement: CoinCubs handles the daily Class Register, teacher behaviour management, and centralises the school's communication and payment infrastructure via the Parent Portal.
  • Collaborative Economics: A unique 70/30 split ensures 70% of rewards contribute to a shared class fund, compelling pupils to learn about community contribution and collective decision-making, which are crucial functional life skills.

What Inspired This Project

My background is in education, and my Master's thesis examined financial literacy, revealing that pupils feel profoundly unprepared for the financial realities of adulthood. This is an acute equity issue, as the necessary knowledge is often inaccessible for many families across the socio-economic spectrum.

The challenge was not only what to teach but how to deliver it, given the crisis of teacher overload. Current token economies fail because they focus on competition, not the collaborative financial decisions we make as adults.

I realised students need foundational knowledge about:

  • Budgeting and expenditure balancing (via the Bank and Shop).
  • Collective resources and civic contribution (via the 70/30 split).
  • The importance of delayed gratification and saving.

CoinCubs is the direct intervention, using technology to deliver this vital education without imposing any additional planning burden on teaching staff.

How I Built It

My development approach was rooted in user-centric design, focusing first on classroom reality and reliability:

  1. Teacher Experience (Low-Friction UX): Prioritised the Quick Award System to work flawlessly on a teacher's mobile device, allowing awards in under 5 seconds while managing a busy class.
  2. Systemic Integration: Built the Parent Portal from the ground up to handle key school infrastructure tasks—specifically, digital form signing and payment processing for school trips and lunches—to prove its viability as a complete system replacement.
  3. Security and Privacy: Used Supabase with Row Level Security (RLS) to guarantee GDPR-aware data protection, ensuring individual pupil balances remain strictly private to eliminate stigma.
  4. Real-Time Performance: Implemented TanStack Query to manage state, enabling optimistic UI updates and real-time synchronisation between the teacher's tablet/laptop and the full-screen Class Display.

Challenges I Faced

  1. Achieving Sub-5-Second Workflow: Solved by creating a mobile-first interface with presets, minimised UI friction, and using optimistic updates before server confirmation.
  2. Designing for Multiple Stakeholders: Handled via custom role-based routing and dedicated interfaces for Teacher, Parent, and Display views, each with distinct security constraints.
  3. Maintaining Privacy While Teaching Collaboration: Solved by making personal pupil balances entirely private, while the shared Class Fund is publicly displayed, driving collaboration without comparison.
  4. Projector Optimisation: Solved by using high-contrast colour schemes, viewport units for responsive typography, and dedicated full-screen rendering for clear visibility from the back of the classroom.

What I Learned

Educational Insights

  • Financial literacy must be experiential: The Bank and Shop system proves that learning happens when pupils make real decisions about shared resources.
  • Privacy is paramount for equity: The privacy-first design enables participation from pupils of all backgrounds without embarrassment, proving the necessity of this approach.
  • Technology must serve teacher workflow: If a tool doesn't eliminate a task (like planning or taking the register), it won't be used. CoinCubs’ success relies on system replacement.

Technical Learnings

  • Security Must Be Database-Level: Implementing RLS in Supabase was critical, ensuring robust, database-level security and GDPR compliance beyond simple front-end checks.
  • Real-Time UX is Essential: Using TanStack Query was necessary to handle the complex, real-time synchronisation across multiple user roles (teacher mobile -> class display -> parent portal) effectively.

Built With

Languages & Frameworks

  • TypeScript / React: Type-safe, component-based UI development.
  • Vite: Fast development server and optimised production builds.

Data, Security & State Management

  • Supabase (PostgreSQL): Database, authentication (Google OAuth), and real-time features.
  • Row Level Security (RLS): For robust, GDPR-aware data protection.
  • TanStack Query (React Query): Server-state management, caching, and optimistic updates.

Styling & UX

  • Tailwind CSS: Utility-first styling for efficient responsive design.
  • Mobile-First Architecture: With dedicated focus on 44x44px minimum touch targets.
  • Projection-Optimised Rendering: Custom CSS and viewport units for the Class Display.

CoinCubs is a **real-world solution to a real-world problem, built by an education professional. By creating a collaborative financial ecosystem, we are building financially literate, civically responsible, and successful futures for every pupil in the UK.

Built With

  • claude
  • css-grid
  • eslint
  • flexbox
  • google-oauth
  • localstorage
  • lucide-react
  • nested-routing
  • netlify
  • postgresql
  • programmatic-navigation
  • radix-ui
  • react
  • react-context
  • react-hooks
  • react-router
  • row-level-security-(rls)
  • supabase
  • tailwind-css
  • tanstack-query
  • typescript
  • vite
Share this project:

Updates