Web Dev Project
Vocablaze - A gamified journey for language lovers
Overview
The goal of Vocablaze is to build a web platform for language learning where users create personalised vocabulary sets, track progress, and play interactive games.
Scope covered UI/UX design, implementation across the stack, and validating how gamification keeps learners engaged.
Problem
Most language apps focus on rigid lesson paths. We wanted to give learners creative control while keeping the experience fun.
The product also needed a secure payment gateway and robust auth flows to support premium content.
Tech Stack
Features
Language games like Flashcards, Matching Tiles, and Hangman keep vocabulary practice engaging.
Progress tracking dashboards help learners monitor improvements over time.
Customizable themes let users tailor the interface to their preferences.
Material sharing allows teachers and learners to distribute custom decks easily.
Import tools support bulk uploading vocabulary from external files.
Premium tiers unlock advanced analytics and additional game modes powered by Stripe.
Process
Definition
Plan
Design
Develop
Deployment
Final Site
Learnings
Implemented advanced auth flows with password resets and 2FA, gaining confidence with secure user journeys.
Integrated Stripe end-to-end, from subscription management to webhook handling.
Levelled up backend skills by tuning Prisma queries and optimising server-side logic.
Deepened my understanding of Next.js features like server actions and on-demand revalidation.
Challenges
Working solo meant owning design, development, and QA without backup.
Learning Stripe from scratch took time to ensure payments stayed secure.
Email-based password resets and 2FA added complexity to the auth layer.
Balancing scope with tight personal deadlines demanded strong prioritisation.
