SmartFix - Complete Service Management Platform

A comprehensive MERN stack application for managing repair services with real-time updates, notifications, and advanced analytics.

🚀 Features

Admin Dashboard (React.js)

• User Management: Complete CRUD operations with role-based access control
• Job Management: Create, assign, track, and manage repair jobs with drag & drop interface
• Dispute Resolution: Handle customer disputes with comment system and escalation
• Real-time Notifications: WebSocket-powered live updates and Firebase Cloud Messaging
• Advanced Analytics: Interactive charts and reports with export functionality
• File Upload System: Secure file handling for avatars, job attachments, and dispute evidence

Landing Page (Next.js)

• Multilingual Support: English and Urdu translations
• Responsive Design: Mobile-first approach with modern UI
• SEO Optimized: Meta tags, structured data, and performance optimization
• Interactive Demo: Live preview integration with admin dashboard

Backend API (Node.js + Express.js)

• RESTful APIs: Complete CRUD operations for all entities
• JWT Authentication: Secure token-based authentication with refresh tokens
• Role-Based Access Control: Admin, Support, Technician, and Viewer roles
• Two-Factor Authentication: TOTP-based 2FA with backup codes
• Real-time Communication: Socket.IO for live updates
• File Upload: Multer-based secure file handling
• Rate Limiting: Protection against abuse and DDoS attacks
• Security Middleware: Helmet, CORS, and input validation

🛠 Tech Stack

Frontend

• React.js 18 - Admin dashboard with hooks and context API
• Next.js 14 - Landing page with SSR and TypeScript
• Tailwind CSS - Utility-first CSS framework
• Chart.js - Interactive charts and analytics
• Socket.IO Client - Real-time communication

Backend

• Node.js - Runtime environment
• Express.js - Web application framework
• MongoDB - NoSQL database with Mongoose ODM
• Socket.IO - Real-time bidirectional communication
• JWT - JSON Web Tokens for authentication
• Multer - File upload middleware
• Speakeasy - Two-factor authentication
• QRCode - QR code generation for 2FA setup

Security & DevOps

• Helmet - Security headers
• Rate Limiting - API protection
• CORS - Cross-origin resource sharing
• bcrypt - Password hashing
• Input Validation - Data sanitization
• File Type Validation - Secure file uploads

📋 Prerequisites

• Node.js 18+ and npm
• MongoDB 5.0+
• Git

🚀 Quick Start

1. Clone Repository

git clone <repository-url>
cd smartfix

2. Backend Setup

cd server
npm install
cp .env.example .env
# Configure environment variables in .env
npm run dev

3. Frontend Setup (Admin Dashboard)

cd ..
npm install
npm start

4. Landing Page Setup

cd landing
npm install
npm run dev

🔧 Environment Configuration

Backend (.env)

# Server Configuration
PORT=4000
NODE_ENV=development
FRONTEND_ORIGIN=http://localhost:3000

# Database
MONGODB_URI=mongodb://localhost:27017/smartfix

# JWT Configuration
JWT_SECRET=your_jwt_secret_key_here
JWT_EXPIRES_IN=24h
JWT_REFRESH_SECRET=your_refresh_secret_key_here
JWT_REFRESH_EXPIRES_IN=7d

# Firebase Configuration (Optional)
FIREBASE_PROJECT_ID=your_firebase_project_id
FIREBASE_PRIVATE_KEY=your_firebase_private_key
FIREBASE_CLIENT_EMAIL=your_firebase_client_email

Frontend (.env.local)

REACT_APP_API_URL=http://localhost:4000/api
REACT_APP_SOCKET_URL=http://localhost:4000
REACT_APP_FIREBASE_VAPID_KEY=your_firebase_vapid_key

Landing Page (.env.local)

NEXT_PUBLIC_ADMIN_ORIGIN=http://localhost:3000

📚 API Documentation

Authentication Endpoints

• POST /api/auth/login - User login
• POST /api/auth/register - User registration
• POST /api/auth/refresh - Refresh JWT token
• GET /api/auth/me - Get current user profile
• PUT /api/auth/me - Update user profile
• POST /api/auth/logout - User logout

Two-Factor Authentication

• POST /api/auth/2fa/setup - Initialize 2FA setup
• POST /api/auth/2fa/enable - Enable 2FA after verification
• POST /api/auth/2fa/disable - Disable 2FA
• POST /api/auth/2fa/verify - Verify 2FA token
• GET /api/auth/2fa/status - Get 2FA status

User Management

• GET /api/users - List users with pagination and filters
• GET /api/users/:id - Get user by ID
• POST /api/users - Create new user (Admin only)
• PUT /api/users/:id - Update user
• DELETE /api/users/:id - Delete user (Admin only)
• POST /api/users/bulk-action - Bulk user operations

Job Management

• GET /api/jobs - List jobs with pagination and filters
• GET /api/jobs/:id - Get job by ID
• POST /api/jobs - Create new job
• PUT /api/jobs/:id - Update job
• DELETE /api/jobs/:id - Delete job
• PUT /api/jobs/:id/status - Update job status
• PUT /api/jobs/:id/assign - Assign technician to job

Dispute Management

• GET /api/disputes - List disputes
• GET /api/disputes/:id - Get dispute by ID
• POST /api/disputes - Create new dispute
• PUT /api/disputes/:id - Update dispute
• POST /api/disputes/:id/comments - Add comment to dispute
• PUT /api/disputes/:id/resolve - Resolve dispute

File Upload

• POST /api/upload/avatar - Upload user avatar
• POST /api/upload/job/:jobId - Upload job attachments
• POST /api/upload/dispute/:disputeId - Upload dispute attachments
• DELETE /api/upload/file/:type/:id/:filename - Delete file

Analytics

• GET /api/analytics/overview - Dashboard overview stats
• GET /api/analytics/trends - Trend data
• GET /api/analytics/performance - Performance metrics
• GET /api/analytics/export - Export analytics data

🔐 Security Features

Authentication & Authorization

• JWT-based authentication with refresh tokens
• Role-based access control (Admin, Support, Technician, Viewer)
• Account lockout after failed login attempts
• Password strength requirements
• Two-factor authentication with TOTP

Data Protection

• Password hashing with bcrypt (12 rounds)
• Input validation and sanitization
• SQL injection prevention
• XSS protection with Helmet
• CSRF protection
• Rate limiting on API endpoints

File Security

• File type validation
• File size limits
• Secure file storage
• Path traversal prevention
• Malware scanning (configurable)

🌐 Real-time Features

WebSocket Events

• authenticate - User authentication
• join-user-room - Join personal room
• join-admin-room - Join admin room
• update-job-status - Real-time job updates
• send-notification - Send notifications
• user-status-change - User online/offline status

Push Notifications

• Firebase Cloud Messaging integration
• Device token management
• Targeted notifications by user/role
• Notification history and read status

🧪 Testing

Backend Tests

cd server
npm test
npm run test:coverage

Frontend Tests

npm test
npm run test:coverage

E2E Tests

npm run test:e2e

🚀 Deployment

Production Build

# Backend
cd server
npm run build

# Frontend
cd ..
npm run build

# Landing Page
cd landing
npm run build

Docker Deployment

docker-compose up -d

Environment-specific Deployments

• Development: Local development with hot reload
• Staging: Pre-production testing environment
• Production: Optimized build with security hardening

📊 Performance Optimization

Backend

• Database indexing for optimal query performance
• Connection pooling for MongoDB
• Caching strategies for frequently accessed data
• Compression middleware for API responses
• Async/await patterns for non-blocking operations

Frontend

• Code splitting and lazy loading
• Image optimization and compression
• Bundle size optimization
• Service worker for offline functionality
• CDN integration for static assets

🔍 Monitoring & Logging

Application Monitoring

• Error tracking and reporting
• Performance metrics collection
• User activity analytics
• API response time monitoring
• Database query performance

Logging

• Structured logging with Winston
• Log rotation and archival
• Error log aggregation
• Audit trail for sensitive operations

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📬 Connect with Me

I'm always open to discussing new projects, creative ideas, or opportunities to be part of your visions.

Email: hanzlashahzadhanzlashahzad@gmail.com

LinkedIn: https://www.linkedin.com/in/hanzla-shahzad

GitHub: https://github.com/hanzlashahzad01/hanzlashahzad01

🎯 Roadmap

Phase 1 (Completed)

• ✅ Core CRUD operations
• ✅ Authentication system
• ✅ Real-time features
• ✅ File upload system
• ✅ Two-factor authentication

Phase 2 (Future)

• 📱 Mobile applications (React Native)
• 🔗 Third-party integrations (Payment gateways, Maps)
• 🤖 AI-powered job assignment
• 📈 Advanced analytics and reporting
• 🌍 Multi-tenant architecture

---

🚀 Project Status

SmartFix Admin is currently under active development.
Core dashboard structure and UI setup are completed.
Upcoming updates will include:

• Backend API integration
• Role-based authentication
• Service request management
• Analytics dashboard

This project is part of my continuous learning and real-world admin panel development practice.

SmartFix - Streamlining service management with modern technology.

Made by Hanzla Shahzad 🔥💙