Hey everyone!

A few days ago, I worked on a fun project—a web-based quiz app built with React. The idea was simple: fetch quiz questions from an API, let users answer them, track their scores, and make the whole experience engaging.

But trust me, turning that simple idea into reality had its own challenges! So, in this blog, I’ll walk you through my process, the problems I faced, and what I learned along the way.

Tech Stack & Tools

Here’s what I used to build the app:
✔ React – For building the UI
✔ Fetch API – To get quiz questions dynamically
✔ CSS & Material-UI – For styling and a clean UI
✔ useState & useEffect – To manage state and handle API calls

Building the Quiz App – Step by Step

Step 1: Setting Up the Project

I started with a basic React setup:
npx create-react-app quiz-app
cd quiz-app
npm start

Then, I created the main components:
📌 Quiz.js – Handles the quiz logic
📌 Question.js – Displays each question
📌 Result.js – Shows the final score

Step 2: Fetching Quiz Questions

Instead of manually adding questions, I used the Open Trivia API to fetch them dynamically. Here’s how I did it:

const fetchQuestions = async () => {
const res = await fetch("https://opentdb.com/api.php?amount=10&type=multiple");
const data = await res.json();
return data.results;
};

I stored these questions in state so they could be used throughout the app.

Step 3: Handling User Answers & Score Calculation

I made sure that when a user selects an answer, it checks whether it’s correct and updates the score.

const handleAnswerClick = (selectedOption) => {
if (selectedOption === correctAnswer) {
setScore(score + 1);
}
nextQuestion();
};

Once all the questions are answered, the final score is displayed.

Adding a Fun Factor – Gamification!

I didn’t want this to be just another quiz app, so I added:
🔥 A Timer – To keep users on their toes
🎯 Instant Feedback – Right/wrong answers get highlighted
🏆 Leaderboard (Future Update?) – To add a competitive edge

Challenges & How I Solved Them

🚧 API was slow sometimes → Added a loading screen
🚧 State management was tricky → Used useState and useEffect smartly
🚧 UI looked too basic → Used Material-UI for better styling

Final Thoughts

Honestly, this project was a great learning experience! I got hands-on experience with:
✅ API integration
✅ React state management
✅ Making a UI more engaging

I’m thinking of adding more gamification features like streaks and badges next. What do you think? Let me know in the comments! 🚀

🔗 GitHub Repo: https://github.com/Kunalkumarxyz/quiz-app-react

Let’s connect! I’d love to hear your feedback. 😊

Author Of article : Kunal Kumar Read full article