From Confusion to Confidence — Building My Quiz Web App with React

As part of my React learning journey at Payilagam, this Quiz Web App project was guided by Vijaya Ragavan sir.
This project helped me understand how real React applications work practically instead of only learning concepts theoretically.

What started as a simple quiz application slowly became one of the most exciting and confidence-building projects in my learning journey

Live Project Link

👉 Try My Quiz Web App Here:
[https://react-projects-rjy7.vercel.app/]

The Idea Behind the Project

While learning React, I didn’t want to just watch tutorials and memorize syntax.

I wanted to build something interactive where I could actually apply:

• React Hooks
• Routing
• State Management
• Dynamic Rendering
• User Interaction

That’s when I started building this Quiz Web App

The application flow is simple and user-friendly:

✅ User enters their name
✅ Quiz starts
✅ Questions appear one by one
✅ User selects answers
✅ Final score gets displayed
✅ User can restart the quiz again

Even though the concept sounds simple, building it taught me many important frontend development concepts.

React Concepts I Used

This single project helped me work with several important React concepts like:

• useState
• useEffect
• useContext
• useRef
• useNavigate
• BrowserRouter
• Routing & Navigation
• Protected Routes
• JSON Data Handling
• Conditional Rendering
• Event Handling
• Dynamic UI Rendering

Instead of learning these concepts separately,
this project helped me understand how everything connects together inside a real application.

Setting Up Routing Using BrowserRouter

The first thing I worked on was setting up routing for the application.

I used:

• BrowserRouter
• Routes
• Route
• Navigate

to create separate pages for:

• User Page
• Quiz Page
• Result Page

<BrowserRouter>
  <Routes>
    <Route path='/' element={<User />} />
    <Route path='/quiz' element={<Quiz />} />
    <Route path='/result' element={<Result />} />
  </Routes>
</BrowserRouter>

This made the application feel like a real website instead of a single static page.

When page navigation started working smoothly without reloading the browser, it honestly felt amazing

Designing the User Page

The User page is where the quiz experience begins.

I created a simple and clean interface with:

• Input field
• Start Quiz button
• Auto-focus functionality
• Name formatting logic

One small feature I liked was automatically focusing the input box using useRef and useEffect.

useEffect(() => {
  userRef.current.focus()
}, [])

This may look like a small thing,
but it improves user experience and gives a professional feel to the application.

Name Formatting Logic

I also added logic to automatically format the entered user name properly.

Example:

❌ vIjAy rAgAvAn
✅ Vijay Ragavan

const formatted = e.target.value
  .split(" ")
  .map(word =>
    word.charAt(0).toUpperCase() +
    word.slice(1).toLowerCase()
  )
  .join(" ")

While writing this logic, I understood how JavaScript string methods can be used effectively inside React applications.

Understanding useState Through Real Application Logic

This project helped me understand the actual purpose of useState.

I used states for:

• Current question
• Selected option
• User score
• User name
• Route access permission

const [crntQz, setCrntQz] = useState(0)
const [optChosen, setOptChosen] = useState("")

Whenever the state changes,
React automatically updates the UI.

That real-time re-rendering experience made React much easier to understand for me.

useContext — The Most Important Concept in This Project

Among all the hooks I used,
useContext became the most important one in this project.

Instead of passing props manually through multiple components,
I created a global context:

export const QuizData = createContext()

Using this context, I shared:

• User name
• Score
• Permission state

across all pages easily.

This made the code:
✅ Cleaner
✅ Easier to manage
✅ More organized

Before this project, useContext felt confusing.
But implementing it practically made the concept much clearer.

Protected Route Logic

One feature that made the application feel more realistic was route protection.

I didn’t want users to directly access the /quiz page without entering their name first.

So I added this condition:

<Route
  path='/quiz'
  element={
    userPer ? <Quiz /> : <Navigate to="/" />
  }
/>

If the user tries to open the quiz page directly,
they are automatically redirected back to the home page.

This feature gave the project a more professional feel.

Building the Main Quiz Logic

This was the core part of the project.

I implemented:

• Question navigation
• Option selection
• Next button functionality
• Finish button logic
• Score calculation
• Dynamic rendering

Questions were stored inside a JSON file:

import questions from "../assets/questions.json"

This helped me understand how applications handle external structured data.

Dynamic Rendering Using map()

Instead of manually creating option buttons,
I dynamically rendered them using .map().

["A", "B", "C", "D"].map((opt, index) => (
  <button key={index}>
    {questions[crntQz][`option${opt}`]}
  </button>
))

This was one of the moments where React’s power became very clear to me.

The code became shorter, cleaner, and easier to maintain.

Score Calculation Logic

The application checks whether the selected answer matches the correct answer.

if(optChosen == questions[crntQz].answer ){
   setScore((prev)=>prev+1)
}

Each correct answer increases the score.

Simple logic…
but implementing it successfully gave me a lot of confidence as a beginner developer.

Result Page

After completing the quiz,
users are redirected to the Result page.

The page displays:

• User name
• Final score
• Restart button

<h2>{name}, Your Score is {score} / 5 </h2>

I also added a “Start Quiz Again” button to improve interaction and make the app reusable.

Challenges I Faced

Building this project was exciting,
but there were definitely challenging moments too.

Some issues I faced:

• State update confusion
• Route navigation problems
• Score calculation bugs
• Option reset issues
• Context-related mistakes
• Conditional rendering confusion

Sometimes a very small bug took a long time to solve

But those debugging moments improved my logic-building and problem-solving skills a lot.

What This Project Taught Me

This project taught me much more than just React syntax.

It helped me understand:

• How React applications are structured
• How hooks work practically
• How components communicate
• How state controls UI updates
• How routing improves user experience
• How frontend logic is built step by step

Most importantly,
it taught me that real learning happens while building projects.

Final Thoughts

This Quiz Web App may be a beginner-level project,
but for me, it represents a huge learning milestone.

This was the project where:

• React started making sense
• Hooks became easier to understand
• My coding confidence started growing

And honestly…

Seeing my own application work successfully from start to finish felt incredibly satisfying

If you’re also learning React or web development,
don’t wait until you feel “perfect.”

Start building.
Experiment.
Debug.
Improve.

Because every project teaches something new