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

🚀 Introduction

Education is changing, and our methods of learning and testing should 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-powered React Native quiz app not only tests your knowledge but also adapts to your learning style.

In Yoruba, "Imo" means "knowledge," reflecting the app's focus on enhancing learning through personalized quizzes.

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