https://github.com/apfirebolt/group-management-in-vue-and-django
A Web Application created in Vue and Django to manage Groups
https://github.com/apfirebolt/group-management-in-vue-and-django
django django-rest-framework group-management rest-api tailwindcss test-driven-development vue3
Last synced: 3 months ago
JSON representation
A Web Application created in Vue and Django to manage Groups
- Host: GitHub
- URL: https://github.com/apfirebolt/group-management-in-vue-and-django
- Owner: Apfirebolt
- License: mit
- Created: 2024-02-22T14:03:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-03T18:32:04.000Z (about 1 year ago)
- Last Synced: 2025-01-21T00:49:52.194Z (5 months ago)
- Topics: django, django-rest-framework, group-management, rest-api, tailwindcss, test-driven-development, vue3
- Language: Vue
- Homepage:
- Size: 610 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Group Management Application in Vue and Django
This is a web application to create groups following a user approval process.
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'.
## Getting Started - Backend (Python and Django)
* 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.
## Getting Started - Frontend (Vue, Tailwind, Headless UI and Javascript)
* 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.
## Built With
* [Python Django](https://www.djangoproject.com/)
* [Django Rest Framework](https://www.django-rest-framework.org/)
* [Swagger Docs](https://swagger.io/)
* [Tailwind CSS](https://tailwindcss.com/)
## Vue and Django integration
I had to add static/assets.. to the build index.html generated by VITE.
```
Quiz App - WWTBAM
```
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
},
},
},
})
```
## Testing
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'],
}
});
```
## Features
- 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.