Every developer remembers their first big project — the one that challenged them, kept them awake at night, and eventually made them a better problem solver. For me, that project was Snapz Quiz Print, a full-fledged MERN stack application that turned out to be much more than just another web app.
Project Vision & Goals
The vision was clear and ambitious:
- 📊 Extract and process quiz data from Moodle's complex database
- 🎯 Enable users to create, filter, and print customized quizzes
- 💰 Integrate seamless selling through WooCommerce platform
- 🎨 Replicate authentic 90's Windows-style user interface
What looked simple on paper quickly became a deep dive into database structures, custom APIs, and design translation.
The Moodle Challenge: Untangling Complex Data
The client had been using Moodle for years, storing quizzes in the form of books → chapters → questions, spread across academic years like 2017, 2018, 2019, and beyond.
But here's the catch: Moodle doesn't store quizzes in a straightforward way. It keeps track of drafts, deleted questions, and multiple copies — leading to hundreds of duplicates.
There was no direct way to pull clean data in the desired format.
Solution
After months of research into Moodle's database schema, I designed recursive queries to build a clean index. Then I connected my Node.js backend remotely to Moodle's database, extracted structured data, and prepared it for the app.
This laid the foundation for a seamless quiz experience.
Building the Frontend: Print, Filter, and Solutions
On the frontend, I designed features that allowed users to:
- Create quizzes with selected topics and years
- Filter by year, difficulty, or subject
- Print quizzes in one click
- Export solutions and answers separately
The UI had to be functional and fast, but there was another unique twist.
The 90's Windows App Design Challenge
The client came with a very unusual request:
"I want the web app to look exactly like my old 90's Windows desktop software."
At first, it felt like a step backward in design. But this was their brand identity, and my job was to deliver pixel perfection.
Using React.js and CSS, I carefully recreated the retro Windows look — sharp buttons, old-school dropdowns, and a nostalgic layout — but implemented with modern web technologies.
It was one of the most fun (and tricky) design challenges I've faced.
Selling Quizzes: WooCommerce Integration
The next big hurdle was monetization. The client wanted to sell quiz access through WooCommerce. That meant:
- ✅ Purchases would be handled in WooCommerce
- ✅ Authentication had to happen via WooCommerce
- ✅ React app needed to recognize WooCommerce users seamlessly
Since there was no out-of-the-box solution, I wrote custom APIs in WooCommerce to handle authentication. Then, I integrated this flow into the React app login system.
Result
Users could buy a quiz package in WooCommerce, log in through the React app, and instantly access what they purchased.
Tech Stack in Action
Here's what powered Snapz Quiz Print:
- Frontend: React.js (with a retro-inspired UI)
- Backend: Node.js & Express
- Database: MongoDB + remote connection to Moodle's DB
- Auth & Sales: WooCommerce custom APIs
- Other Tools: Recursive queries, filtering logic, and quiz printing utilities
Key Takeaways & Lessons Learned
This project wasn't just about coding — it was about problem-solving:
- ✅ Learned to untangle and query a complex Moodle database
- ✅ Built a quiz creation & printing tool from scratch
- ✅ Recreated a 90's Windows-style design for the web
- ✅ Integrated WooCommerce authentication into a React app
- ✅ Delivered a scalable MERN stack application ready for real users
Final Thoughts
Snapz Quiz Print was more than just my first MERN project. It taught me the value of patience, research, and adaptability. From writing recursive queries to integrating with WooCommerce and even reproducing a 90's UI, the journey was equal parts challenging and rewarding.
And that's what I love about being a Full-Stack Developer — turning complex problems into simple, usable solutions.