Skip to content
Submitted 4 months ago

Frontend quiz app built with REACT | VITE | JS - MikDra1

react, styled-components, vite, react-router
P
MikDra1•7,450
@MikDra1
A solution to the Frontend Quiz app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

💻 Hello 👋 Frontend Mentor Community,

This is my solution for the Frontend quiz app.

  • You should be able to:

  • Select a quiz subject

  • Select a single answer from each question from a choice of four

  • See if they have made a correct or incorrect choice when they submit an answer

  • Move on to the next question after seeing the question result

  • See a completed state with the score after the final question

  • Play again to choose another subject

  • View the optimal layout for the interface depending on their device's screen size

  • See hover and focus states for all interactive elements on the page

  • Navigate the entire app only using their keyboard

  • Change the app's theme between light and dark

Additionally:

  • Your preferred theme will be saved so next time you visit my website you will get the right one.

  • Each category has different primary color so you can differentiate them.

🛠️ Built with:

  1. HTML ✨
  2. CSS 🎨
  3. JavaScript 🧾
  4. React ⚛️
  5. Vite.js 💡
  6. Context API 🛒
  7. Styled-Components 💅
  8. React-Router 📡

  • Fully responsive design crafted with a desktop-first approach 💻

  • Enjoyed every moment coding this! 😎

  • Feedback is always welcome—let’s grow together! 🌱

  • Completed 15 out of 28 Intermediate Challenges so far—keeping up the momentum! 🔥

  • Completed 2 out of 12 Intermediate Premium Challenges 🔥

  • 👨‍💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.

  • As I am developing in my journey with React I'm really looking forward to hearing your thoughts and suggestions! 💡

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Hector Ramirez•450
    @hectorlil48

    Hey,

    I think you did a great job on your quiz app! It’s responsive, and everything works as expected.

    I was a little confused about how you styled it—did you do your own CSS? I really like that you used different colors for each topic, but for the HTML topic, the orange makes it a bit hard to tell if I got an answer wrong since it looks close to red.

    One thing I added to my own quiz app was local storage to save progress, so users don’t get sent back to the start menu if they refresh. I noticed you’re using useState, which works great, but it resets when the page reloads. Just something to consider if you ever want to add persistence!

    Overall, I learned a lot just by reading your code. What was your thought process when tackling a challenge like this? Keep up the great work!

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord