Mind Palace

🚀 Inspiration

The idea for Mind Palace came from a simple question: What if studying felt like playing a story-based game? As a student myself, I realized that traditional learning platforms can sometimes feel dry or repetitive. I wanted to build something that not only helps students revise but makes them feel like they’re on a quest. Inspired by escape rooms and memory palaces, I imagined a palace where each room unlocks with the power of knowledge.

🛠️ What I Built

I created a fully responsive web-based quiz game using React and Tailwind CSS. The app features:

🏰 20 unique rooms with questions from Math, History, Science, Grammar, and Tech.
🧙‍♂️ A floating animated character as a learning companion.
🎉 Confetti celebration at the end to make success rewarding.
💡 Keyboard shortcut features for accessibility.
📱 Clean UI inspired by modern landing page designs.
🧩 Game logic to progress based on correct answers only.

📚 What I Learned

How to structure state management cleanly in React for multi-step progress.
How to use animation libraries and SVG assets to make the user experience engaging.
How to manage accessibility while keeping a fun design.
How to make learning more emotionally rewarding through gamification.

⚙️ How I Built It

The project stack includes:

React for the UI and component structure
Tailwind CSS for styling and responsiveness
React Confetti for animation effects
useState and useEffect hooks for quiz logic

Each question is stored as a JSON object and loaded dynamically. Once a user selects the correct answer, the app progresses them to the next room using conditional rendering.

const handleAnswer = (selected) => {
  if (selected === questions[currentQuestion].answer) {
    setScore(score + 1);
    setCurrentQuestion(currentQuestion + 1);
  }
};

⚠️ Challenges Faced

Keeping users engaged: It was tough to balance education and fun. I overcame this by adding a floating character and celebration effects.
Designing mobile-first: Ensuring the experience felt natural on both desktop and mobile required a lot of tweaking with Tailwind breakpoints.
Game logic bugs: I initially had issues with state resetting at the final level. This was resolved by isolating final screen rendering in a dedicated component.

✨ Math Integration Example

To include subjects like math, I structured question objects with LaTeX support:

{
  "question": "What is the derivative of $x^2$?",
  "options": ["2x", "x", "x^2", "1"],
  "answer": "2x"
}

This allows math expressions to be rendered cleanly using libraries like LaTeX.

🎯 Outcome

In the end, Mind Palace became more than just a quiz game — it’s a journey that helps students feel rewarded for learning. It reflects my passion for using code and design to inspire curiosity.

Built with ❤️ by Nitin Yadav during the Student Learning Hackathon.