The Constraint That Shaped Everything
Compulingo was built by one person. Not a small team — one person. That single fact drove every architectural decision we made. The question was never "what's the most scalable stack?" or "what would a big tech company use?" It was: what lets a solo developer ship a complete, polished product fastest?
The answer was React on the frontend, Supabase as the backend, Vite for builds, Tailwind for styling, and Vercel for deployment. No custom API server. No containerised microservices. No infrastructure to maintain at 3am.
React: Components Map to Lessons
Compulingo has 10 different exercise types: multiple choice, predict the output, word bank, fill-in-the-blank, Parsons problems, drag-and-drop, code detective, bug fixing, connect-the-dots, and matching. Each exercise type is a self-contained React component with its own state, validation logic, and animations.
This is where React's component model genuinely shines. Each exercise component manages its own lifecycle — loading the question, tracking attempts, deducting hearts on wrong answers, awarding XP on completion, triggering confetti on perfect scores. The parent lesson component just sequences them. Clean separation, easy to test, easy to add new types.
We considered alternatives. Vue would have worked equally well. Svelte would have been lighter. But React's ecosystem meant that when we needed animation libraries (Motion), sound libraries (Howler), PDF generation (jsPDF), or internationalisation (i18next), the integration was always straightforward. The ecosystem tax is real, but so is the ecosystem benefit.
Supabase: A Backend Without Building a Backend
This was the decision with the highest leverage. Supabase gave us authentication, a PostgreSQL database, row-level security, and real-time subscriptions — out of the box, with a generous free tier.
What we didn't have to build:
- User registration, login, password reset, email verification — Supabase Auth handled all of it
- API endpoints for CRUD operations — Supabase's auto-generated API covered 90% of our data needs
- Database hosting, backups, scaling — managed PostgreSQL with automatic backups
- Row-level security — users can only read and write their own progress data, enforced at the database level
The alternative was building a custom Node.js or Python backend, writing authentication from scratch (or integrating Auth0/Firebase), designing REST endpoints, setting up a database, configuring CORS, writing migration scripts, and deploying it all separately. For a solo developer, that's weeks of work before the first lesson is even displayed.
Supabase collapsed all of that into configuration. We spent that saved time on what actually matters: exercise design, gamification logic, and user experience.
Tailwind: Speed Over Elegance
Tailwind is polarising. Some developers hate utility classes. We understand the criticism — it can look messy, it scatters styling across components, and it has a learning curve.
But for a solo developer moving fast, the benefits are overwhelming. No naming CSS classes. No specificity wars. No switching between files. Design tokens (colours, spacing, font sizes) are consistent by default. Responsive design is inline, not in a separate media query block you forget to update.
Compulingo's entire UI — lesson cards, exercise layouts, achievement badges, streak indicators, the hearts display, progress bars, mobile navigation — was styled with Tailwind. The speed advantage over writing custom CSS was easily 3x for UI work.
Vercel: Deploy on Git Push
The deployment story is simple: push to GitHub, Vercel builds and deploys globally. No CI/CD configuration. No Docker files. No server provisioning. The entire deployment pipeline was set up in under five minutes.
For a product like Compulingo where fast iteration matters — ship a fix, test with users, iterate — the ability to deploy in under a minute from a Git push is worth more than any infrastructure optimisation.
The Trade-offs (Honestly)
Supabase lock-in. Our data lives in Supabase's managed PostgreSQL. If we ever need to move, we can export and migrate — it's standard Postgres — but the auth integration, real-time subscriptions, and row-level security policies would need to be rebuilt. The practical risk is low because Supabase is open source and growing, but it's worth acknowledging.
No custom backend logic. Complex operations that don't fit neatly into database queries need workarounds. Our daily challenge algorithm, for example, runs entirely on the client side. The XP calculation logic lives in React, not on a server. This means a technically savvy user could theoretically manipulate their score. For an education platform, this risk is acceptable. For a financial app, it wouldn't be.
Client-side complexity. Without a backend to handle business logic, React components carry more weight. Some of our exercise components are 200+ lines because they handle validation, scoring, animation, sound, and state management. A backend could have absorbed some of that complexity. We chose speed of development over architectural purity.
When We Wouldn't Choose This Stack
- Heavy server-side processing: If the app needs to crunch data, generate reports, or run ML models, you need a real backend.
- Complex multi-user workflows: Approval chains, role-based access beyond basic auth, real-time collaboration on shared documents — Supabase's row-level security covers basics but complex permissions need custom logic.
- Strict compliance requirements: Medical, financial, or government projects where you need full control over data residency, encryption, and audit trails.
- High-throughput APIs: If your product is primarily an API that other systems consume, a dedicated backend (Go, Rust, Node) is the right choice.
The Bottom Line
Compulingo's stack — React, Vite, Tailwind, Supabase, Vercel, Stripe — is not the most sophisticated architecture we could have designed. It's the most effective one for a solo developer building a gamified education product.
The result is a live platform with 32 lessons, 10 exercise types, 42 achievement badges, daily challenges, subscription billing, multilingual support, and a PWA that works offline. Shipped by one person in months, not years.
Your stack should serve your product and your team. For us, simplicity won.