This is a quiz app which is based on the popular game quiz show called who wants to become a Millionaire (WWTBAM). The back-end of the application is created using Python and Django. The front-end of the application is built using React, Javascript and Tailwind CSS framework.
http://localhost:8000/api-docs/
The API docs can be viewed using the above link. Swagger is used to generate API docs under the hood using a package called 'drf_spectacular'.
-
Create a new virtual environment and install packages specified in the requirements.txt file.
-
Hook in your database of choice, make necessary database changes in the settings.py file inside the project folder. Obviously, some familiarity with Django folder structures is required for this. By default this project uses MySQL as database.
-
Make migrations when you're done with the database settings and migrate.
-
Run python manage.py runserver, and the application should be running on port 8000 by default.
-
Make sure Node and npm is installed on your system.
-
Install the packages using
npm i
- Run in the development mode
npm run dev
- The project uses Vite as the bundler instead of web-pack. Configure Tailwind CSS and Headless UI which are used to power UI components used in this application like sidebar for mobile view, modals and more.
I had to add static/assets.. to the build index.html generated by VITE.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quiz App - WWTBAM</title>
<script type="module" crossorigin src="static/assets/index-2hhwCVwV.js"></script>
<link rel="stylesheet" crossorigin href="static/assets/index-WC5UIqtt.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
Modifications in the config file for React using Vite.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: 'static',
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
},
},
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
build: {
outDir: '../static/dist', // Output directory relative to Django's static directory
manifest: true, // Generate a manifest.json file for Django
assetsDir: 'static/assets',
emptyOutDir: true, // Clean the output directory before building
rollupOptions: {
input: {
main: './src/main.jsx', // Entry point of your React app
},
},
},
})
-
User Registration
-
Users can view quizes and attend those quizes and view scores.
-
Admin Panel is available from where admin users can add questions and quizes which can be attended by normal users of the portal.
-
Security: The application implements authentication and authorization mechanisms to ensure secure access to user data and prevent unauthorized actions.
-
Responsive Design: The application is designed to be responsive and accessible on different devices, including desktops, tablets, and mobile phones.