Coding a Quiz App in ReactJS - React Resume Projects

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 ก.ย. 2024
  • In this video I will be showing you guys how to build a quiz app in React using Hooks and the Context API. This quiz app can serve as a nice beginner to intermediate react project which can improve your resume.
    Project Repo: github.com/mac...
    Best Tech Resume Template: papermoontech....
    Use code: PEDRO for 20% off ^
    -
    🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
    💻 PedroTech Discord: / discord
    -
    Social
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    Website: machadopedro.com
    Twitter: / pedrotech_
    Linkedin: / machadop1407
    Instagram: / _pedro.machado_
    Github: github.com/mac...
    Email: machadop1407@gmail.com
    Tags:
    - ReactJS Projects
    - Context API
    - ReactJS Tutorial
    - ReactJS and MySQL
    - NodeJS Tutorial
    - API Tutorial

ความคิดเห็น • 87

  • @ekansh03
    @ekansh03 2 ปีที่แล้ว +17

    I honestly say I have attended quite a few project sessions on react from youtubers like DevEd, Sonny Sangha, Clever Programmer but the level of understanding I have got from this channel is unmatched. Please Keep creating these project videos and thanks for the knowledge.

  • @shivamsingh-dt1tc
    @shivamsingh-dt1tc 2 ปีที่แล้ว +2

    Bro your explanation is excellent I tried every TH-cam channel but you are unique buddy.your way of explaining concept is literally best yr.

  • @khandoor7228
    @khandoor7228 3 ปีที่แล้ว +9

    Pedro I love this types of videos! You either learn something new or practice what you already know, win-win. Would love to see more!

    • @PedroTechnologies
      @PedroTechnologies  3 ปีที่แล้ว +2

      Thank you! Really appreciate it! I swear I believe this project is an awesome project to get your react skills in shape!

  • @ronananderson
    @ronananderson 3 ปีที่แล้ว +2

    Really nice Pedro. Very clear instructions. I keep coming back to your tutorials.

    • @PedroTechnologies
      @PedroTechnologies  3 ปีที่แล้ว

      Thank you! Really appreciate the support! I am happy to hear you are liking my tutorials!

    • @ronananderson
      @ronananderson 3 ปีที่แล้ว

      @@PedroTechnologies
      I'm adapting it to fullstack to upload new questions ,use authentication and maybe even add a score board. Its a brilliant project and actually fun :)

  • @MrMarkoS9910
    @MrMarkoS9910 2 ปีที่แล้ว +2

    Quality content! This helped me in making my own version of a React Quiz app for a faculty course! Much love, take care!

  • @alveek
    @alveek 3 ปีที่แล้ว +4

    Finally Context API explained well and easy. Now I feel less dumb. Thank you!

  • @sruthir1236
    @sruthir1236 9 หลายเดือนก่อน +1

    It's a very standard project for beginners.Thank you.✨

  • @xdragonflame6563
    @xdragonflame6563 3 ปีที่แล้ว +3

    Thanks for this awesome tutorial. It helps beginners like me get some hands on experience with a project. Cheers!

    • @PedroTechnologies
      @PedroTechnologies  3 ปีที่แล้ว

      Glad it was helpful! I love this project because it is awesome for beginners!

  • @pegihr
    @pegihr 3 ปีที่แล้ว +1

    Super simple app. But still find new things to learn. As always, thank you for the video.

  • @nemzyxt
    @nemzyxt ปีที่แล้ว

    Thanks a lot man, I'm now more familiar with the Context API and React hooks thanks to you, and the project

  • @nigahiga3731
    @nigahiga3731 ปีที่แล้ว +3

    Personal notes:
    10:00 useContext (or earlier than that time)
    13:33 MainMenu
    25:36 Questions logic (and some time before that)
    28:25 optionChosen
    32:14 setting score global state
    38:54 finish quiz, last question stuff

  • @k303k
    @k303k ปีที่แล้ว

    Very great tutorial Pedro! I really like the way you simplified the logic .It is really helpful tutorial.Thank you so much

  • @Gwennadia
    @Gwennadia 3 ปีที่แล้ว +1

    great video as usual, many thanks. I've made the exercice following the video, and it works :)

  • @TzKet4m
    @TzKet4m 3 ปีที่แล้ว

    Great tut mate, you're great at explaining the concepts in the app. Big ups

  • @Sanyat100
    @Sanyat100 3 ปีที่แล้ว +1

    Easily the most well explained video

  • @ThColinPereira
    @ThColinPereira 3 ปีที่แล้ว +1

    This is sick! Thanks Pedroski

  • @neev4n
    @neev4n 7 หลายเดือนก่อน

    amazing tutorial watched and implemented till the end, keep it up!

  • @ThColinPereira
    @ThColinPereira 3 ปีที่แล้ว +1

    I'd love to see more videos like this!

  • @dnjosh10
    @dnjosh10 ปีที่แล้ว +1

    Hi boss, good morning from Nigeria I actually want to seek help and suggestion.
    I was following this tutorial and things were getting better until createContext came into the picture.
    I'm using react version 18 and in video, there is Context used.
    My application crashes each time I uncomment and line that has to do with #useContext or #createContext.
    Help me please?
    Is there a new way to create context in version 18?

  • @dipenparmar2273
    @dipenparmar2273 3 ปีที่แล้ว

    Super straightforward. Great for beginners..

  • @kyawmying224
    @kyawmying224 8 หลายเดือนก่อน

    thank you for uploading youtube video to learn react.they are really awesome

  • @albinsanthosh8697
    @albinsanthosh8697 3 ปีที่แล้ว +1

    Thaks for a helping wonderful toutorial. Learned a lot 😍😍😍.

  • @mayankstylerock
    @mayankstylerock 2 ปีที่แล้ว

    Thanks Man. Love from "INDIA"

  • @aiswarya1939
    @aiswarya1939 ปีที่แล้ว

    Thanku so much...very simple and efficient tutorial to learn.

  • @HumairaFatima-wf9me
    @HumairaFatima-wf9me 8 หลายเดือนก่อน +1

    Great 👍 keep it up

  • @simone-oq4if
    @simone-oq4if ปีที่แล้ว

    good tutorial, i learned the context api , Thank u.

  • @arcadestudio2506
    @arcadestudio2506 3 ปีที่แล้ว +1

    this was awesome ;
    great hand of applause to you ;

  • @abhinav3325
    @abhinav3325 ปีที่แล้ว +2

    You're Just Awesome!

  • @aleksandrmatyka3118
    @aleksandrmatyka3118 3 ปีที่แล้ว +2

    Thanks for content man!

  • @dotricok17ct72
    @dotricok17ct72 7 หลายเดือนก่อน

    Thank you for sharing wonderful lesson!

  • @walterbranco8798
    @walterbranco8798 2 ปีที่แล้ว +1

    Valeu, Pedro!

  • @usmanmughal5916
    @usmanmughal5916 3 ปีที่แล้ว +2

    Excellent explanation. fab!!!

  • @piyushkulkarni3852
    @piyushkulkarni3852 5 หลายเดือนก่อน +1

    thank you so much

  • @Sanketjoice
    @Sanketjoice 7 หลายเดือนก่อน

    Underrated!

  • @abdullahahmadsiddiqui2653
    @abdullahahmadsiddiqui2653 6 หลายเดือนก่อน +1

    Need more projects sir ❤❤❤

  • @vijayendradev6236
    @vijayendradev6236 ปีที่แล้ว +2

    Great tutorial! the options are however hard coded, what if I am fetching the question and answer from a quiz API, it is easy to display the question, but how will I randomize the position of the correct answer for every question? Please let me know any hackerman in house!?

    • @olenayevtushok2014
      @olenayevtushok2014 ปีที่แล้ว

      Yep, I'm also struggling with this issue. I tried to use trivia API for questions, but It's difficult to beginner not to hard code the options😥

  • @prototype-nl9do
    @prototype-nl9do 3 ปีที่แล้ว +1

    Amazing Tutorial 👌🏻

  • @adazr5190
    @adazr5190 10 หลายเดือนก่อน

    very greet tutorial , thank you

  • @mKahraman1
    @mKahraman1 3 ปีที่แล้ว +2

    Thanks for the tutorial. What is your VScode theme?

  • @pranav288
    @pranav288 2 ปีที่แล้ว

    Can't thank you enough my guy. Please always keep making these

  • @mansilaad2062
    @mansilaad2062 3 ปีที่แล้ว +2

    Mysql +react+node +express.. Plz make some videos for interview preparation..

    • @PedroTechnologies
      @PedroTechnologies  3 ปีที่แล้ว +2

      I have some videos using that technologies, but I will definitely make more videos on it! I will make a video on interview preparation soon!

    • @mansilaad2062
      @mansilaad2062 3 ปีที่แล้ว

      @@PedroTechnologies thanks

  • @nehapatil8800
    @nehapatil8800 3 ปีที่แล้ว +2

    Thank you for this video 🙂
    I also made this app after watching your video. I wanted to make a change in it. How to change the background color of button after click the button?
    Please reply soon

    • @PedroTechnologies
      @PedroTechnologies  3 ปีที่แล้ว

      Make a state called backgroundColor and change its value. Then add some inline styling to the button and set the backgroundColor property to the backgroundColor state.

    • @nehapatil8800
      @nehapatil8800 3 ปีที่แล้ว

      @@PedroTechnologies Thank you 🙂

  • @MarisiverMJ
    @MarisiverMJ 3 ปีที่แล้ว +1

    Hola, me encantan tus videos, te encontre de casualidad y aqui me quedo. He visto que usas monokai, pero sabrias cual theme exactamente, no lo encuentro, y me he enamorado.

  • @user-gs2zp3dm1v
    @user-gs2zp3dm1v 2 ปีที่แล้ว

    Great tutorial. How to show the selected button in different color ?

  • @2010giant
    @2010giant 3 ปีที่แล้ว +2

    I have 95% of understanding this project but I can't code it myself without keep watching the video, do I need to be able to complete the whole myself before I get a junior React.js job?

    • @PedroTechnologies
      @PedroTechnologies  3 ปีที่แล้ว +6

      I understand what you mean, and don't get discouraged. I would say you do need to know this for a ReactJS Junior job. You can practice by building more projects, and watching more of my videos :) Keep up the hard work!

  • @dhwajsharma
    @dhwajsharma 3 ปีที่แล้ว +1

    How did you set that accent color to purple?

  • @MrEmil-cf8wo
    @MrEmil-cf8wo 3 ปีที่แล้ว +2

    Hello bro, i'm started watching your video on building clone youtube , did you end this project?Or will be next video more?I check the final part,and i think that there still need to something add. (sorry for my broken english, i'm from Crimea,and trying speak on him)

    • @PedroTechnologies
      @PedroTechnologies  3 ปีที่แล้ว

      Hey! I am extremely sorry about that! When I started that series my videos didn't get much views and I thought I could handle building a big project like that while being in school, but it ended up being to much work. I decided to end the series, sorry about that.

  • @henrykibocha5224
    @henrykibocha5224 3 ปีที่แล้ว

    Great tutorial Pedro, How would i go about adding a timer for the quiz. ? thanks

  • @taqikhan5418
    @taqikhan5418 3 ปีที่แล้ว +1

    my score is not working properly I have done 4 correct questions but score is 3/4. kindly help

  • @soumyasahoo2001
    @soumyasahoo2001 3 ปีที่แล้ว +2

    This tutorial is 🔥🔥
    Pls make a multiplayer quiz too

    • @PedroTechnologies
      @PedroTechnologies  3 ปีที่แล้ว

      Thank you! I plan on making a tutorial on multiplayer apps with react and socket.io! Stay tuned!

  • @rangabharath4253
    @rangabharath4253 3 ปีที่แล้ว +2

    Awesome

  • @exterminator_4781
    @exterminator_4781 2 ปีที่แล้ว +1

    What is the IDE that you are using?

  • @pouyazare90
    @pouyazare90 2 ปีที่แล้ว +1

    awesome great video

  • @patogordo7563
    @patogordo7563 3 ปีที่แล้ว +2

    great video.

  • @muhammadzohaib1837
    @muhammadzohaib1837 ปีที่แล้ว

    Uncaught TypeError: Cannot read properties of undefined (reading 'prompt') getting this error at 25:36 ? Anyone can help

  • @watchtube9429
    @watchtube9429 ปีที่แล้ว

    how can i map options choosed by the usrr?

  • @clipboardchannel99
    @clipboardchannel99 3 ปีที่แล้ว +2

    What's the theme called, looks cool

  • @mohammedkudmani2195
    @mohammedkudmani2195 3 ปีที่แล้ว

    i like the theme can anyone tell me the name? and nice video keep going :)

  • @tarundurbha5398
    @tarundurbha5398 ปีที่แล้ว +1

    super bro

    • @tarundurbha5398
      @tarundurbha5398 ปีที่แล้ว

      Don't stop making videos on react,just continue this.

  • @theinfinite82940
    @theinfinite82940 3 ปีที่แล้ว

    find a new things to learn brother, and realy i loved your teching style....