🎓 Building an AI-Powered Quiz App with React Native: Introducing Imo Quiz

🚀 Introduction

Education is changing, and our approach to learning and testing our knowledge should change too. As a passionate developer in the UK, I wanted to merge my passion for clean user experiences with meaningful functionality to create something exciting: Imo Quiz. This AI-assisted React Native quiz app not only tests your knowledge but also adapts to your learning style. The term "imo" is a Yoruba word that means "knowledge."

In this post, I’ll walk you through how I built Imo Quiz: a smart educational app that adjusts question difficulty based on your performance, offers real-time AI-style feedback, and stores your scores using Firebase.

---

🪄 Tech Stack

• React Native (TypeScript) — for building cross-platform UI

• Expo Go — for seamless testing on iOS and Android

• Firebase (Firestore) — to store user scores and usernames

• Open Trivia DB API — for real quiz questions with difficulty levels

• AsyncStorage — for temporary session management (future use)

---

🔧 Features

• ✨ Adaptive difficulty logic: Easy → Medium → Hard, based on correct streaks

• 🤖 AI assistant gives tips and contextual guidance

• 🎉 Smooth UI with gradient backgrounds and animations

• 📊 Real-time score storage with Firebase

• ✉️ No sign-up required; just enter your username and go!

---

📁 Project Structure

imo-quiz-app/
  ├── assets/
  ├── src/
  │   ├── api/
  │   ├── components/
  │   ├── constants/
  │   │   └── tips.ts
  │   ├── screens/
  │   ├── types/
  └── App.tsx, app.json, etc.

---

🪡 Adaptive Difficulty Logic

We track the user's correct streak and update difficulty accordingly:

if (correctStreak >= 3) setDifficulty('hard');
else if (correctStreak === 0) setDifficulty('easy');
else setDifficulty('medium');

Then we fetch new questions with:

https://opentdb.com/api.php?amount=10&difficulty=${difficulty}&type=multiple

This ensures that the app is neither too easy nor too hard for any user.

---

🧑‍💻 Firebase Integration

Each user's best score is stored by username. We check if they’ve played before:

const docSnap = await getDoc(scoreRef);
if (docSnap.exists() && score > docSnap.data().score) {
  await setDoc(scoreRef, { score });
}

This makes it easy to display personal bests and leaderboard logic (coming soon).

---

🚀 AI Assistant Tips

All assistant text is stored in a reusable tips.ts file:

export const tips = {
  welcome: "Welcome, [username]! Ready to test your brain?",
  start: "Click an option to begin. Let's go!",
  correct: "Nice one! You're on a roll.",
  wrong: "Oops! That was tough. Try the next one.",
  result: "Well done! Want to try again?",
};

Then we inject them throughout the UI:

<Text>{tips.welcome.replace('[username]', username)}</Text>

---

🎨 Home Screen Design

• Animated AI assistant icon (in assets/assistant.png)

• ImageBackground with a semi-transparent overlay

• Clean input and big, bold call-to-action button

<ImageBackground source={require('../../assets/assistant.png')}>
  <Text>Welcome to Imo Quiz</Text>
  <Text>{tips.welcome.replace('[username]', username)}</Text>
</ImageBackground>

---

🚮 Challenges Faced

• TypeScript prop typing with React Navigation

• Firebase async logic and preventing score overwrite

• Adaptive difficulty UI flow

• Making the app look polished but still fast

---

📆 What's Next?

• Add leaderboard view

• Add Firebase Auth for secure sign-in

• Add voice-over or text-to-speech assistant

• Track question-level performance

• Add category filters

---

🚑 Try It Yourself!

• 🔗 GitHub Repository

---

📖 Conclusion

Imo Quiz helped me sharpen my skills in React Native, adaptive logic, and user-centric design. More importantly, it gave me the chance to build something fun, personal, and educational.

Would love your feedback — or even collaboration if you're working on something similar!

Thanks for reading! 🙏