🎮 Full Stack Quiz Web Application

Developed a full stack web-based quiz application that allows users to participate in interactive quizzes featuring multiple-choice questions and typed answer responses. Implemented dynamic question rendering, answer validation logic, and score calculation mechanisms to support real-time quiz interaction. Designed a responsive user interface for smooth navigation between quiz sections and integrated backend functionality to manage quiz data and user responses. This project enhanced practical understanding of client–server architecture, REST-based communication, and database-driven application workflows.

Prerequisites

• Node.js (v16 or newer recommended)
• npm (comes with Node.js)
• cloudflared installed globally

---

1. Install Dependencies

Backend

cd server
npm install

Frontend

cd ../client
npm install

---

2. Start the Backend

The backend runs on port 3001 by default.

cd server
node index.js

---

3. Start the Frontend (Vite Dev Server)

The frontend runs on port 5173 by default.

cd client
npm run dev

---

4. Expose the Frontend with Cloudflare Tunnel

In a new terminal, run:

cloudflared tunnel --url http://localhost:5173/ protocol --http2

• This will provide a public URL (e.g., https://your-tunnel-id.trycloudflare.com) that you can share for external access.

---

5. Configure Vite for Cloudflare Tunnel

To allow access via the Cloudflare URL and ensure socket.io works:

1. Edit client/vite.config.js

Add or update the server section as follows:

export default defineConfig({
  plugins: [react()],
  server: {
    allowedHosts: [
      'your-tunnel-id.trycloudflare.com' // Replace with your actual tunnel URL
    ],
    proxy: {
      '/socket.io': {
        target: 'http://localhost:3001', // Backend port
        ws: true,
        changeOrigin: true,
      }
    }
  }
})

• Replace 'your-tunnel-id.trycloudflare.com' with the actual hostname from your cloudflared output.
• Save the file and restart the Vite dev server (npm run dev).

---

6. Accessing the App

• Open the Cloudflare tunnel URL in your browser (on your phone or any device).
• The frontend will proxy all /socket.io requests to your local backend, so multiplayer and real-time features will work externally.

---

Troubleshooting

• If you see certificate errors, make sure you are not using a hardcoded backend URL in the frontend.
• If you get 500 errors, ensure both frontend and backend are running, and the proxy target port matches your backend.
• Always restart the Vite dev server after editing vite.config.js.

---

Enjoy your GameQuiz app!