create-project-management-tool

A Quasar-based project management application template with Django backend integration.

Features

• 🚀 Quasar Framework (Vue 3) - Modern, fast, and responsive UI
• 📊 Project Management Dashboard - Comprehensive project tracking
• 🎯 Milestone Tracking - Track project milestones and deadlines
• 🔄 Django REST API Integration - Ready to connect with Django backend
• 💅 Modern UI Components - Beautiful Quasar components out of the box
• 📱 Responsive Design - Works seamlessly on all devices
• 🗑️ Deleted Projects Management - Soft delete with recovery option
• 🔍 Search & Filter - Advanced project search capabilities

Quick Start

Create a new project management application:

npm create project-management-tool my-app
cd my-app
npm install
npm run dev

Or with npx:

npx create-project-management-tool my-app

Or with yarn:

yarn create project-management-tool my-app

What's Included

Components

• ProjectCard - Display project cards with key information
• ProjectDetail - Detailed project view with all information
• ProjectEdit - Edit project details and settings
• MilestoneManager - Manage project milestones
• MilestoneItem - Individual milestone component
• ProjectsTopBar - Navigation and search bar
• DeletedProjectCard - Display and restore deleted projects

Pages

• IndexPage - Main dashboard with project listing
• DeletedProjectsPage - View and manage deleted projects

Features

• Pre-configured Quasar setup with Vite
• Axios for API communication
• Pinia for state management
• Vue Router for navigation
• ESLint and Prettier configuration
• Composables for reusable logic (useProjectSearch, useDeletedProjects)

Backend Setup

This frontend is designed to work with a Django REST API backend. The expected API endpoints include:

• GET /api/projects/ - List all projects
• POST /api/projects/ - Create a project
• GET /api/projects/:id/ - Get project details
• PUT /api/projects/:id/ - Update a project
• DELETE /api/projects/:id/ - Delete a project
• GET /api/projects/deleted/ - List deleted projects
• POST /api/projects/:id/restore/ - Restore deleted project

Check the Django backend setup in the project-dashboard workspace for complete backend implementation.

Available Scripts

After creating your project, you can run:

npm run dev

Starts the development server with hot-reload at http://localhost:9000

npm run build

Builds the app for production to the dist folder

npm run lint

Runs ESLint to check for code quality issues

npm run format

Formats code with Prettier

Project Structure

my-app/
├── public/            # Static assets
├── src/
│   ├── assets/       # Images, fonts, etc.
│   ├── boot/         # Boot files (axios setup)
│   ├── components/   # Vue components
│   ├── composables/  # Reusable composition functions
│   ├── css/          # Global styles
│   ├── layouts/      # Layout components
│   ├── pages/        # Page components
│   ├── router/       # Vue Router configuration
│   └── stores/       # Pinia stores
├── index.html        # Entry HTML file
├── quasar.config.js  # Quasar configuration
└── package.json      # Dependencies and scripts

Configuration

API Base URL

Update the Axios base URL in src/boot/axios.js:

const api = axios.create({
  baseURL: 'http://your-api-url.com/api',
})

Quasar Configuration

Customize Quasar settings in quasar.config.js:

• Build options
• Dev server configuration
• Quasar plugins
• And more...

See Configuring quasar.config.js for details.

Publishing Your Own Version

If you want to create your own template based on this:

1. Fork this repository
2. Modify the template files in the template/ directory
3. Update package.json with your repository URL
4. Publish to npm:

npm login
npm publish

License

MIT © Chris Fakiolas

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please open an issue on GitHub.