How to Build a Quiz App using React (for Beginners)

In this video, we are gonna be building a Quiz app in React.js.
We are gonna add features like input answers and multiple-choice questions, questions with timers, tracking scores, fetching questions from external API, saving results, and creating a leaderboard. All of that and much more!
This workshop is ideal for beginners or someone who just started learning React.js. So together we can build your first app, and you will have a chance to improve your skills by building this simple but very useful app!
Mock API: 644982a3e7eb3378ca4ba471.mock...
Final app: sloba-react-quiz-app.netlify.app
🧿 I discussed:
✔️ How to build a Quiz App using React
✔️ How to add a timer to the Quiz app
✔️ How to add MCQ and input questions to Quiz
✔️ How to fetch questions for a Quiz from API
✔️ How to create a score leaderboard for a Quiz
✔️ How to build and deploy the Quiz app
0:00 Intro
0:53 Project setup
7:35 Building Quiz component
57:25 Building and deploying the Quiz app
58:30 Project refactoring
1:04:00 Building Quiz timer
1:29:48 Adding input question type
1:39:12 Fixing the timer issue
1:42:32 Fetching Quiz questions from API
1:47:25 Building Quiz Leaderboard
2:14:04 Outro
************************************************************
👉 Patreon:
✔️ / codewithsloba
👉 Become a better developer with 2 minutes a day:
✔️codewithsloba.com
👉 Linkedin:
✔️ / slobodan-gajic
👉 Instagram:
✔️ / codewithsloba

[@oketimilehin8526]

This tutorial was awesome.
Great work.

[@CodewithSloba]

Thank you 🙏

[@pengx9000]

Just a quick point: babel is actually a JS transpiler instead of compiler (i.e transpile the lastets version of JS to the compatible JS version, usually ES5 ). But thanks for the effort and sharing this video, though!

[@CodewithSloba]

I love it 😍 great point

[@ahmednaseem5161]

Thanks for sharing 😊😊

[@CodewithSloba]

It’s my pleasure

[@JanasOdyssey]

Bro really awesome explanation bro

[@CodewithSloba]

Thanks I appreciate it!

[@lilNuki]

Nice tutorial for learning code. Fixing the timer issue part would have been nice to see on screen what is going on.

[@CodewithSloba]

Yes sorry for that issue. It was just matter of changing the css animation to 0.1s, and changing the counter increase by 100 instead of 1000 ms. Then you can remove timeout from onTimeUp function

[@whoisshida]

Great guide thank you! is it possible to have a tutorial on how to also test the code?

[@CodewithSloba]

Yes I'll add that one

[@rishiraj2548]

🙏👍

[@CodewithSloba]

thanks

[@user-pj8ve1re6k]

im following along exactly and still getting different outcomes. why at 23:20 does your page say 167 at the top? mine does not and doesnt show 1/5 after you make more changes. can you explain what parts of your code would display the 167? thank you

[@CodewithSloba]

Can you compare the final code?

[@user-pj8ve1re6k]

@@CodewithSloba your final code does not work

[@user-pj8ve1re6k]

you have errors in spelling in your final code and random semi colons where they shouldnt be

[@CodewithSloba]

thanks I'll check

[@vimal__dubey6646]

it has an issue.
If I selects a correct option and does not click next then it will be considered as wrong answer.

[@CodewithSloba]

That's actually how I wanted it to behave. Next is like a submit button. But obviously you can change it

[@vimal__dubey6646]

@@CodewithSloba what if I selects the correct option in last second and couldn't press next, it will be marked incorrect.
I don't think it's a good feature of a quiz platform 😕 🤔.
I request you to correct me if I am wrong.

[@CodewithSloba]

@@vimal__dubey6646 To me you're just too late. You can increase time limit. It can go both ways

[@antonkrajnak5359]

i had a problem when i filled input and click next, then i can click next on every questionwithout selected answer. I just needed to change disabled={}. This works for me in anyone else have a same problem:
disabled={(type === "FIB" && !inputAnswer) || (type !== "FIB" && answerIndex === null)}

[@CodewithSloba]

Awesome solution

[@houssem25000]

is the project on github ?

[@CodewithSloba]

yes, check description

[@ohou]

Very great. Thank you!
With timer bug, how about call clearTimeout on onTimeUp?

[@CodewithSloba]

You can try that as well

[@KineticMusik]

The source code would be helpful

[@CodewithSloba]

You have it on my patreon

[@samvelpetrosyan494]

Can you share the codes?

[@CodewithSloba]

Code is available on my patreon

[@ihabhadjerci5238]

I found a bug in your 3D apple store tutorials please respond to my comment there

[@CodewithSloba]

hey what's the bug

[@Faisal-qd1jc]

your way of writing css ... is just painful.

[@p.y.thangam7332]

Source code would be helpful

[@CodewithSloba]

there is on patreon, why it's painful?

[@Faisal-qd1jc]

@@CodewithSloba I'm not interested in the source code. Also, I'm not interested in supporting you. It's just bad CSS. That's it.

[@CodewithSloba]

@@Faisal-qd1jcok I appreciate your feedback

[@oath5926]

@@Faisal-qd1jc Can you explain why the CSS is bad?