Student Name
Ayesha
Student Description
My name is Ayesha. After completing my FSC (Pre-Engineering) I wanted to continue learning new and practical skills, so I applied for the NAVTTC training program. I was selected for the Full Stack Development course at Uptech Sol, where I learned a lot under the guidance of my instructor Sir Hassan. This course helped me build a strong foundation in both frontend and backend development, and it also boosted my confidence as a learner. Along with the course, we were also given an opportunity to do an internship, where we worked on a complete SaaS based project. My internship project was a Salon Management System, which allowed me to apply all my skills from UI design to database handling and backend development. Currently, I am pursuing BS Robotics and Intelligent Systems from NUML, and I am in my first semester. My journey from FSC to NAVTTC training and now university has shaped my interest in technology even more, and I’m excited to continue growing in this field.
Project Title
Salon Management System
Project Description
My project is titled “Salon Management System”, which is a complete SaaS-based application designed to help salon owners manage their business efficiently. In this system, a user first signs up as an Owner and creates an account. After registering, the owner can add and manage multiple salons under one platform. The application works on a role-based structure, giving the owner full control. The owner can create different roles such as Manager, Receptionist, or Staff and assign specific permissions to each role. This ensures that every user only has access to the features relevant to their job. With this system, salon operations become organized, secure, and easy to manage.
Project Structure
- Backend (salon backend): Handles API, database, and file uploads.
- Frontend (salon-management): Next.js pages, dashboards, and salon management UI.
Key Technologies
Backend
- Node.js, Express.js
- Sequelize ORM
- JWT, bcryptjs
- Multer (file uploads)
- MySQL
Frontend
- Next.js (React)
- Tailwind CSS
- Axios for API calls
Database
- MySQL
- MySQL Migrations
- seeders
Deployment
- Backend on port 8000
- frontend on 3000
- Railway ready
Backend Structure
- config: DB configs
- models: Sequelize models
- controllers: Business logic
- routes: API routes
- middleware: Auth permission checks
- migrations: DB schema
- seeders: Default data
- uploads: Images
- server.js: main entry
Frontend Structure
- src/app/: Pages and layouts
- src/components/: Reusable UI
- src/assets/: Static assets
- src/protectiveRoute/: JWT-based protection
- src/protectiveRoute/: JWT-based protection
- public/: Fonts, icons
Core Features
User Authentication & Authorization
- Owner registration with salon creation
- Staff/admin registration
- JWT-based login with role-based access control
- Password hashing and validation
- Role and permission management (owner, admin, staff)
- Protected routes and middleware for authorization
Salon Management
- Create and manage multiple salons per owner
- Salon profile with name, email, contact, type
- User-salon associations with roles
- Salon-specific data isolation
Service Management
- Create, read, update, delete services
- Service categories and subcategories
- Service details: name, description, price, duration, images
- Service status (active/inactive)
- Features array for additional service attributes
Appointment Booking
- Online appointment scheduling
- Customer details: name, phone, service, date, time, status
- Appointment status tracking (pending, completed, cancelled)
- Appointment analytics and reporting
Staff Scheduling
- Staff availability management
- Schedule creation with date, start/end times
- User-specific schedules
- Salon-based staff assignments
Inventory Management
- Product tracking: name, quantity, price
- Low stock alerts (implied)
- Salon-specific inventory
Dashboard & Analytics
- Appointment status pie chart
- Key metrics cards (total, completed, pending, cancelled appointments)
- Revenue tracking
Frontend Features
- Responsive landing page with hero section
- Service categories swiper
- About section with images
- Key features showcase (online booking, staff scheduling, customer management,
- inventory, reports, loyalty)
- User dashboard with salon selection
- Sidebar navigation with collapsible menu
- Protected routes for authenticated users
Technical Features
- Next.js 15 with React 19
- Express.js backend with Sequelize ORM
- MySQL/PostgreSQL database support
- File uploads with Multer
- CORS configuration
- Environment-based configuration
- Axios for API calls
- Framer Motion for animations
- Tailwind CSS for styling
- Chart.js/Recharts for data visualization
- Swiper for carousels
Database Entities
- Users (owners, staff, admins)
- Salons
- Services
- Categories
- Appointments
- Schedules
- Roles and Permissions
- Inventory
- User-Salon relationships
Database Schema
API Endpoints
- Auth: /auth/registeruser, /auth/loginuser, /auth/registerstaff,
- /auth/getstaff/:SalonId
- Salon: /salon/* (CRUD)
- Services: /services/services/:SalonId (CRUD)
- Categories: /category/* (CRUD)
- Schedules: /schedule/*
- Roles: /role/*
- Permissions: /permission/*
- Appointments/Inventory: /appointment, /inventory
Setup and Running
Backend
- npm install in salon backend/
- Configure .env
- Run migrations: npx sequelize-cli db:migrate
- Seed: npx sequelize-cli db:seed:all
- Start server: npm run dev
Frontend
- npm install in salon-management/
- Configure API URL in axiosInstance.js
- Start frontend: npm run dev
Testing
- Postman: test API with Authorization header
- Owner login: create salon/staff
Limitations and Future Improvements
- Appointments: full CRUD not implemented
- Validation: Joi/Zod
- Error handling: centralized logging
- Frontend: more responsive, error toasts
- Security: rate limiting, input sanitization
- Deployment: Heroku/Vercel with MySQL hosting
Visit Live Project
project.com
