This is a web application to create groups following a user approval process.
http:https://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="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/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 Vue using Vite.
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: '/',
css: {
// enable preprocessor support
preprocessorOptions: {
scss: {
// optional: add additional options for sass, like additional data
additionalData: `@import "../assets/scss/main.scss";`,
},
},
},
server: {
port: 8080,
},
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.js', // Entry point of your Vue app
},
},
},
})
Front-end testing has been performed using Vitest and other dependencies like happy-dom.
npm install -D vitest
npm i happy-dom
The vitest configuration file.
import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
test: {
testMatch: ['**/*.test.js'],
files: 'src/**/*.test.js',
extensions: ['js', 'vue'],
}
});
-
User Registration
-
Users can create groups and assign other users as moderators in the process flow.
-
Audit log system is available to log important events in the system work-flow.
-
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.