Household Services Application - V2

A multi-user platform for comprehensive home services, connecting customers with verified service professionals.

Features

• Multi-user system with different roles (Admin, Customer, Professional)
• Customers can request services and provide ratings
• Professionals can accept service requests in their area
• Admins can manage users and services
• Secure session-based authentication with Flask-Security
• Role-Based Access Control (RBAC) for fine-grained permissions
• Backend jobs for notifications and reports.
• Data visualization using Charts.js
• Optimized performance with caching.

Development Approach

1. Created comprehensive ER diagram to design database schema and relationships

2. Implemented database models using SQLAlchemy based on the ER design

3. Set up Flask application with blueprint-based routing structure

4. Integrated Flask-Security for session-based authentication and RBAC

5. Developed Vue.js frontend with Vite, creating role-specific dashboards

6. Implemented admin, professional, and customer specific routes and UI

7. Set up Redis and Celery for background tasks and scheduled jobs

8. Added Flask-Caching for API performance optimization

Folder Structure

├── backend/
│   ├── app.py            # Flask application entry point
│   ├── cache.py          # Redis cache configuration
│   ├── celery_app.py     # Celery configuration
│   ├── models.py         # Database models
│   ├── populate_db.py    # Database seeding script
│   ├── run.sh            # Development server script
│   ├── utils.py          # Helper utilities
│   ├── templates/        # Email templates
│   └── routes/
│       ├── admin.py        # Admin routes
│       ├── auth.py         # Authentication routes
│       ├── common.py       # Shared routes
│       ├── customer.py     # Customer routes
│       ├── debug.py        # Development routes
│       └── professional.py # Professional routes
│
└── frontend/
    ├── src/
    │   ├── assets/         # CSS
    │   ├── components/     # Reusable Vue components
    │   ├── views/
    │   │   ├── admin/       # Admin dashboard
    │   │   ├── customer/    # Customer dashboard
    │   │   ├── professional/ # Professional dashboard
    │   │   └── public/      # Public pages and authentication
    │   ├── App.vue         # Root component
    │   ├── main.js         # Application entry point
    │   ├── router.js       # Vue router configuration
    │   ├── store.js        # State management
    │   └── utils.js        # Helper utilities
    └── index.html          # HTML entry point

API Routes

Authentication

• POST /api/auth/login - User login with email/password
• GET /api/auth/logout - User logout
• POST /api/auth/register-customer - Register new customer
• POST /api/auth/register-professional - Register new professional

Customer

• GET /api/customer/service-requests/<status> - Get customer's requests by status
• POST /api/customer/create-request/<id> - Create new service request
• POST /api/customer/close-request/<id> - Close request with rating/remarks
• GET /api/customer/cancel-request/<id> - Cancel service request
• GET /api/customer/profile - Get customer profile
• POST /api/customer/edit-profile - Update customer profile

Professional

• GET /api/professional/service-requests/<status> - Get requests by status/location
• GET /api/professional/accept-request/<id> - Accept service request
• GET /api/professional/cancel-accepted-request/<id> - Cancel accepted request
• GET /api/professional/profile - Get professional profile
• POST /api/professional/edit-profile - Update professional profile

Admin

• GET /api/admin/customers - Get all customers
• GET /api/admin/professionals - Get all professionals
• GET /api/admin/service-requests - Get all service requests
• GET /api/admin/export-service-requests - Export requests to CSV
• GET /api/admin/block-user/<id> - Block user
• GET /api/admin/unblock-user/<id> - Unblock user
• GET /api/admin/approve-professional/<id> - Approve professional
• GET /api/admin/disapprove-professional/<id> - Reject professional
• POST /api/admin/create-service - Create new service
• PUT /api/admin/edit-service/<id> - Update service
• DELETE /api/admin/delete-service/<id> - Delete service

Common

• GET /api/common/services - Get all services

Debug

• GET /api/debug/whoami - Get current user info
• GET /api/debug/test-cache - Test Redis cache
• GET /api/debug/test-celery - Test Celery tasks
• GET /api/debug/populate - Reset and populate database

Tech Stack

• Backend: Flask, Flask-SQLAlchemy, Flask-Security-Too, Flask-Mail, Flask-Caching, Flask-CORS, Pandas
• Frontend: Vue.js, Charts.js, Bootstrap
• Build Tool: Vite
• Database: SQLite
• Caching & Jobs: Redis, Celery

Setup

Prerequisites Installation

# Install Redis
sudo apt install redis

# Install MailHog
# Note: This is for AMD64 systems. For other architectures, download appropriate binary from:
# https://github.com/mailhog/MailHog/releases/v1.0.1
wget https://github.com/mailhog/MailHog/releases/download/v1.0.1/MailHog_linux_amd64 -O MailHog
chmod +x MailHog
sudo mv MailHog /usr/local/bin/

Backend Setup

# Clone repo
git clone https://github.com/vidhatrihr/mad2-project.git
cd mad2-project

# Setup virtual environment
python3 -m venv venv
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Change to backend directory
cd backend

# Start Redis Server (new terminal)
redis-server --port 6380

# Start the Flask application (new terminal)
./run.sh

# Start Celery worker (new terminal)
celery -A celery_app.celery worker --loglevel=info

# Start Celery beat for scheduled tasks (new terminal)
celery -A celery_app.celery beat --loglevel=info

# Start Mailhog for email testing (new terminal)
MailHog

Frontend Setup

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at:

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000
• Mailhog Web UI: http://localhost:8025
• Redis Server: redis://localhost:6380 (for internal use)