MERN Stack Complete Quiz Application - Full Course

MERN Stack Complete Quiz Application - Full Course
In this course, you will be able to make a complete quiz application with MongoDB, React, Express.js and Node.js. You are going to learn how to create this amazing app and store all the data in the database using react front end.
You will learn all the necessary details of the MERN stack app in this project. Currently, MERN is one of the most promising frameworks out there. So let's make Quiz Application with MERN Stack.
If you want to learn next.js from the beginning here is the link:
NextAuth Course - Complete Authentication with Credentials, Google & GitHub
• NextAuth Course - Comp...
Complete CRUD Operation With Next.js & MongoDB - For Beginners
• Complete CRUD Operatio...
Next.js Complete Course For Beginners
• Learn Complete Next.js...
Tailwind CSS Complete Course
• Tailwind Complete Cour...
How to Make Blog Website with Next.js & Tailwind CSS - For Beginners
• How to Make Blog Websi...
Javascript Complete Course
• Learn Complete JavaScr...
You can Follow Along with me using the below Git Repository.
Use "git branch --list" to see all branches.
📂 Source Project
Client: github.com/akashyap2013/Quiz_...
Server: github.com/akashyap2013/Quiz_...
⏱️ Timestamps ⏱️
00:00:00 - Introduction
00:02:20 - Routes
00:11:46 - Main Component
00:18:06 - Quiz Component
00:21:31 - Questions
00:28:40 - Data.json
00:34:11 - Result Component
00:43:25 - Redux
00:52:58 - Reducers
00:59:50 - Dispatch
01:11:08 - Store Values
01:16:51 - Move Next Question
01:29:38 - Push Result Array
01:35:24 - Selected Radio Option
01:40:34 - Result Array
01:46:53 - Update Selected Option
01:56:42 - Quiz Answers
02:00:57 - User Points Count
02:16:50 - Authorize User
02:22:22 - Backend
02:32:05 - Endpoints
02:41:19 - Controllers
02:52:33 - MongoDB
03:00:41 - Models
03:07:48 - Controller Response
03:17:43 - Result Model
03:24:55 - Consume API
03:29:51 - Store User Result
03:42:13 - Finishing App
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
Subscribe To
/ @dailytuition
Join this channel to get access to the perks:
/ @dailytuition
👉 Support Me on Patreon 😊:
/ dailytuition
🚀 Udemy Courses:
www.udemy.com/user/akshay-kas...
🎅 Playlist :
Complete MERN Series
• Getting Started with M...
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
🛠️ Tools I use:
🟠 My Theme: • Finally, I am Back! St...
🟠 Font Family: fonts.google.com/specimen/Rub...
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
👉 Follow us:
🟠 / akki.2013
More Videos:
💡 Complete Node Course
• Complete Node & Expres...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 React Complete Tutorial
• Complete React 16.8 Cr...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Mobile Shopee E-Commerce Website Course - PHP & MySQL
• Complete Mobile Shopee...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete Portfolio Website with Bootstrap - HTML/CSS
• Complete Portfolio Web...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Create a Shopping Cart Using PHP and Mysql
• Create Shopping Cart U...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Advanced Tic Tac Toe With HTML, CSS & JavaScript - For Beginners [2022]
• Advanced Tic Tac Toe W...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Complete CRUD Operation with PHP MySql Database
• Complete CRUD Operatio...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Birthday Remainder Application with React - For Beginners
• Birthday Remainder App...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💡 Bootstrap Grid System The Complete Guide - In Action
• Asp.net Registration F...
Like this video If you find anything useful. Share with your friends that is all for now I will see you In the next one.
Thank You...! 🙏
⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑⋐⋑
Tags: #react #mernstack #tutorial

[@princedikko2472]

WOW, i cant believe it, men you are the only one on the entire social media Whom make tutorial on a complex QUIZ APPLICATION with radios, men thank you somuch for this video, you GOOD

[@prashantdasar32]

sir no developer has explained this much easy and fluent like anyone can understand thank you sir

[@cevdet-gt3uu]

I am looking forward sir :)

[@nikako1889]

would like to see projects with typescript

[@jamjam3337]

Thank you!👏

[@hit1222]

thank you so much for this amazing tutorial app I hope if you do a video about redux toolkit to explain more customized hooks great work

[@TuanNguyen-xf5cw]

great video Its help me very much, thanks so much guy

[@noelanthonydiaz]

badly needing this kinds of tutorial

[@shreyas.sihasane]

Thanks 👍

[@studyplanet4656]

Sir you are doing a great job . If possible make a tutorial on how to protect routes in next js , how to handle access token which is stored in memory or in auth context in next js . Also if possible make tutorial on role based Authorization in Next js .

[@SATYAPRAKASHSINGH-ps5eu]

Such a good content ❤

[@dilshodbaxtiyorov4739]

Thank you very mutch

[@darshanchandan7597]

Why console.log is always used inside useEffect() hook ? Can we not write directly console.log() in react file ?

[@imPriyankCoder]

lookin forward to this bhai. Thank you. Could you do one tutorial how to upload image using mutler in node js please like crud operations

[@gilogilala8475]

Please include mutler in this course

[@valeriesalbum8981]

Hi! can you show us how to deploy this app to site like netlify or AWS?? Thank you so much

[@lighthouse1608]

Love your works sir ❤️ Please can you create the one where by admin can add questions

[@ganeshkukreja511]

Hey where you able to find complete code it is showing me only master branch when i am using git branch how can i switch if no other branch is present

[@rayramadita3018]

If I want to implement login function with email and password, how to do this? Should I change code in 02:16:53 ?

[@sumtingwongwe2low]

are you using rtk query in this demo?

[@allaguiamira8866]

i m going to start by saying that this was very helpfull tutorial , thank you for that and i would be so gratefull if you tell me what react snippet are you using for autocomplete

[@samriddhishukla6386]

rfc i guess

[@meetahaldar2083]

Sir, your video is great and your way of teaching too.. , but don't you think before stating to code you first need to explain the flow of project?? that how should we stat coding what will be the logic behind? rather than just rush into coding and start the project...

[@mprashantha1]

Very well explained tutorial covering all aspect of MERN stack. One clarification if you could answer: On the client side for the redux store update, startExamAction and resetAllAction reducers are dispatched directly. But, moveNextAction and movePrevAction are dispatched through MoveNextQuestion and MovePrevQuestion asynchronously. Given that MoveNextQuestion and MovePrevQuestion doesn't do any asynchronous calls, can we call moveNextAction and movePrevAction the same way as startExamAction and resetAllAction reducers?

[@DailyTuition]

yes we can do that as well.

[@behappy00018]

If you deployed it then can you share me this project live link .

[@ankushladani496]

Thank you sir....

[@DailyTuition]

Most welcome

[@ganeshkukreja511]

Hey ankush where you are able to download the code or clone the repository if yes please tell me how you did it ?

[@arafatanjan95]

When I select one option for single question it effects all other questions and selects the same option for them.What could be the solution?

[@emmanuelchimnadindu9267]

you didnt add the timer or countdown funtionality

[@hansikamadhukar4576]

What do we do when insertMany is not taking any callback

[@shubhamk1111]

Hello, Where is the css? can you please guide me

[@aishwaryakurdekar9629]

Wen i give the command git init its giving me error How to solve this?

[@krishbhat8873]

is it possible to add more questions or change the question, after the project is completely made?

[@DailyTuition]

yes. it is possible to add more question after project is completed. You just have to add question in the database question list.

[@chaitanya4600]

@@DailyTuition Truly a High quality video. Can we expect more of such fullstack web/mobile apps in future?

[@MugenNiFukuzatsuna]

I did everything as specified, but when I go to the page after adding the routes I get Uncaught runtime errors "dispatcher is null". Anyone know what the issue is?

[@sunnydevlikar]

Did you get the solution? I am getting the same error !!

[@MugenNiFukuzatsuna]

@@sunnydevlikar I believe it was a version mismatch between the packages

[@sunnydevlikar]

@@MugenNiFukuzatsuna oh, so how did you solve that ? Did you have to download something?

[@ayushgarg1500]

When i go to the quiz page ,its showing the prev and next button but not the questions.instead of the question its showing cannot read properties of undefined (reading questions)

[@ayushgarg1500]

Please help if anyone has solved the issue

[@gourabjitbiswas]

8:22 having problems with routes, Uncaught runtime errors, dispatcher is null. Can anyone please help me solve this?

[@Eswar.]

have you fixed it

[@gourabjitbiswas]

@@Eswar. I had fixed it. Now I forgot how. Maybe stackoverflow helped.

[@DarshanMandya]

cannot read property of undefined (reading 'map') please tell solution for this i have used quiz code which coded by you

[@rodrigoleon5592]

Hi, could you fix it? I have the same error :(

[@abdulhalim747]

Please give me demo link sir.

[@hello.devzzz]

I need help my quiz application after username is returning only this {}

[@thisisaniketup]

Can I as admin post my questions on this app?

[@Ibrahim-4333]

Hi i have being building this app but during fetching data from the back end objects are not valid react child error occurs and i could not finish it can you please help me figure it out

[@prashanthinikk1896]

Yes me too....someone pls help

[@ganeshkukreja511]

Hi, i am not able to find anything in the git repository can you tell me how to do it ?

[@DailyTuition]

To find different branches use - `git branch` To move and change branch use - `git checkout [branchName]

[@ganeshkukreja511]

@@DailyTuition I have tried that but it is not working what branch name should I put ? Steps ;- 1) git clone 2) git branch - it is showing me *master(only) Nothing else where should I go after this ? which branchnamd should i put in git checkout branchname

[@aadityakothari8982]

where is code of main.css and other page css

[@mirzamuhammed230]

Cannot access after username input

[@rawdha5778]

Waw, I want to know how long it took to answer every question. Can you help me

[@amankushwaha8180]

how to add start timer in this quiz app

[@popfamily4769]

sorry, can the number of questions be increased?

[@prashanthinikk1896]

I'm getting Objects are not valid as a React child error when fetching the questions from the backend. Also getting Axios error. Could u pls review and update it? Thanks

[@Vini-hd3ks]

did you find the solution ? i've got the same error . please inform

[@-Aiswarya]

I get cannot read properties of undefined (reading 'questions') error pls help to solve

[@cooltv9943]

you have to get rid of 's' and make only question

[@ManojKumar-oh1ib]

following error during render Error: Objects are not valid as a React child (found: [object Error]). If you meant to render a collection of children, use an array instead. how to solve this error

[@sarveshavhad3213]

Hey had you solved this error ? if yes then please share the code.

[@samueleke6577]

Source of error: In the Question component if statement with server error, The error occurs because you're trying to render an object of type Error as a React component child. React components can only render primitive types such as strings, numbers, and booleans or collections of React elements. To fix this error, you can convert the serverError object to a string before rendering it. One way to do this is to use the toString() method on the Error object.

[@Shreya-en7rn]

@@samueleke6577 Hey, can please share the precise code for the same? I'm still getting an error even after using toString() method.

[@as.if_0077]

@@samueleke6577 thank you!

[@as.if_0077]

@@Shreya-en7rn yes it fixed the error just use toString method then that start quiz button will start working

[@vishakhaparlikar8442]

How to make next button disabled if we don't select any option? Like it should not show the next question if we don't select any option for the current question. Anyone who knows the soln plz tell me

[@alphashortss]

make a state for clic and setclick, then initially fake it false, and when user click an answer make it true

[@chaitanyajujjavarapu3111]

Sir how to deploy this

[@DarshanMandya]

can question and options Shuffle please tell the logic and code

[@emmanuelchimnadindu9267]

moveNextAction: (state, action) => { let randomNum = Math.floor(Math.random() * 9) + 1; return { ...state, trace: state.trace + randomNum } }

[@mepravinjadhav]

why you didnt use vite sir

[@aishwaryakurdekar9629]

"Request failed with status code 404" I am getting this error while I try to run the frontend How to solve this?

[@ayushgarg1500]

Did u solve ur problem,I am getting the same error .

[@samadyasin2202]

if i want with checkbook, how can i will do??

[@user-qp1zy3un2u]

checkbox is for more than one option to check

[@DarshanMandya]

Objects are not valid as a React child (found: object with keys {message, name, code, config, request, response}). If you meant to render a collection of children, use an array instead. error please give solution

[@Shreya-en7rn]

Hey, did you got to know how to solve this error?

[@as.if_0077]

​@@Shreya-en7rn same problem here and i got to know that it worked by iterating through the array

[@dipankaryadav5598]

@@as.if_0077 How did you guys resolved it? Can you share that particular piece of code or tell where to update it

[@saurabhpanchal.]

yes, i also need solution for this

[@sauravu333]

i also got the same error, can anyone help me to solve it. i m depressed of that error😭

[@oscarortiz5794]

3:07:32

[@saurabhpanchal.]

Objects are not valid as a React child (found: object with keys {message, name, code, config, request, response}). If you meant to render a collection of children, use an array instead. error please give solution 😕

[@saurabhpanchal.]

Questions.js --> line 32 ---> "if(serverError) return {serverError.message || "Unknown Error"}" paste it without inverted commas ur error solved after using that 👍🏻👍🏻

[@hello.devzzz]

Thanks for the help I fixed it before I found this comment I wished I found this comment took me two days lol

[@sauravu333]

i m getting an error in thunder like this "Connection was forcibly closed by a peer." i don't know what is wrong can u help me

[@232_kingekiranprakash2]

Did you got the solution

[@amr6657]

you need install depency name "dotenv" in client if you use file ".env"

[@adilsaif2537]

sir,please muze app.css ka code dydejiy muze need h plz sir

[@DailyTuition]

git ka use karke tum app.css file ka code le sakte ho. To find different branches use - `git branch` To move and change branch use - `git checkout [branchName]

[@Vini-hd3ks]

sir, i got an error of : Uncaught runtime errors: ERROR Objects are not valid as a React child (found: object with keys {message, name, code, config, request, response}). If you meant to render a collection of children, use an array instead. By observing the comments on your yt video , i came to know that the error is in the Question.js file, which is : if(serverError) return {serverError || "Unknown Error"} then i tried to resolve this error by using ; if(serverError) return {serverError.message || "Unknown Error"} by this , i again get an error of : Request failed with status code 404 and if i do this instead... if (serverError) { return {serverError.toString() || "Unknown Error"}; } then i get an error of : Axios Error : Request failed with status code 404 i just can't understand what is the real problem... Please give the solution to this problem.. if anyone knows please inform.

[@DailyTuition]

You have an error in the question file. Please look at the line where this error occurs. Then try to solve it

[@ManviKumar-lc3vp]

code is giving way too many errors...

[@sipboyjohn3096]

Please can't it be shuffled

[@adilsaif2537]

Quiz app me app.css ka code plz sir

[@DailyTuition]

Check description

[@Aditya-lc5uk]

wrong link of the git repository :(

[@DailyTuition]

use git branches to download the complete code.

[@Aditya-lc5uk]

@@DailyTuition ok thanks

[@chaitanyareddy7429]

@@DailyTuition but it is like parts its confused

[@ganeshkukreja511]

@@Aditya-lc5uk Hi Aditya where you able to download the code ?

[@ganeshkukreja511]

Hi @@chaitanyareddy7429 where you able to download the code ? if yes please tell me how you did it

[@chaitanyareddy7429]

Complete Source code please?

[@ganeshkukreja511]

Hey where you able to find complete code it is showing me only master branch when i am using git branch how can i switch if no other branch is present

[@vikramaditya82]

how many have struggled with qestion

[@DailyTuition]

What is the error?

[@nirojbajracharya3051]

31:45

[@ganeshkukreja511]

where you able to find the complete code if yes please tell me the steps

[@nabinsaud4688]

Incomplete source code ??

[@DailyTuition]

if you are not following me then use git branch to list branches and move to the last branch to get finished code.

[@ganeshkukreja511]

Hey where you able to find complete code it is showing me only master branch when i am using git branch how can i switch if no other branch is present

[@rubulislam705]

you deleted the git source code

[@DailyTuition]

no. just move to the last git branch to get the code.

[@towsifaslam2115]

much more add. it's not suitable for learning.

[@reduxToolkit]

Unnecessarily complicating things lol

[@prashantdasar32]

You need to build websites like that only bro

[@ajinkyadivekar4683]

​@@prashantdasar32no he's right, it's unnecessarily complex