Servify

Servify is a full-stack service booking platform built with the MERN stack that bridges the gap between professional service providers and customers. Whether you need a plumber, electrician, cleaner, or any other professional service, Servify provides a seamless experience for browsing, comparing, and booking services.

The platform features robust role-based access control, real-time booking management, secure authentication with Google OAuth, and an intuitive interface for both service providers and customers.

Key Features

For Customers

• Smart Search & Filtering - Find services by keyword, category, price range, and custom sorting options
• Seamless Booking - Book services for specific dates and times with automatic conflict detection
• Personal Dashboard - Track all your bookings with real-time status updates (Pending, Confirmed, Completed)
• Reviews & Ratings - Rate and review services after completion to help other users
• Profile Management - Update personal details, bio, and preferences

For Service Providers

• Service Management - Create, update, and delete service listings with detailed descriptions and images
• Booking Control - Accept or reject incoming booking requests with full autonomy
• Business Dashboard - View earnings, manage active services, and track your schedule
• Conflict Prevention - Automatic detection of scheduling conflicts to prevent double bookings
• Role-Based Access - Specialized provider tools with secure access control

Security & Authentication

• JWT Authentication - Secure token-based auth with HttpOnly cookies for enhanced security
• Google OAuth 2.0 - One-click login and registration using Google accounts
• Email Verification - Account verification via email using Nodemailer
• Password Security - Bcrypt hashing for password protection
• Payment Ready - Architecture ready for payment gateway integration
• Password Hashing: Bcrypt with salt rounds for secure password storage

• HttpOnly Cookies: Refresh tokens stored in HttpOnly cookies to prevent XSS
• CORS Protection: Configured CORS to allow only trusted origins
• Input Validation: Zod schemas validate all user inputs
• Helmet.js: Implemented to set secure HTTP headers and protect against common web vulnerabilities.
• Rate Limiting: Custom API and Authentication rate limiters to prevent brute-force attacks and API abuse.
• MongoDB Injection Prevention: Utilizes express-mongo-sanitize to filter prohibited characters.

---

Tech Stack

Frontend (Client)

Technology	Purpose
React 19	UI framework with Vite build tool
Tailwind CSS 4	Utility-first styling framework
React Query	Server state management and data fetching
React Router DOM v7	Client-side routing
React Hook Form	Form handling and validation
Zod	Schema validation
Lucide React	Modern icon library

Backend (Server)

Technology	Purpose
Node.js	JavaScript runtime environment
Express.js	Web application framework
MongoDB	NoSQL database
Mongoose	MongoDB object modeling
JWT	JSON Web Tokens for authentication
Google Auth Library	Google OAuth integration
Cloudinary	Cloud-based image storage and management
Nodemailer	Email sending service
Bcrypt	Password hashing

---

Getting Started

Follow these steps to set up Servify locally.

Prerequisites

Ensure you have the following installed:

• Node.js (v18 or higher)
• MongoDB (Local installation or MongoDB Atlas account)
• Cloudinary Account (for image storage)
• Google Cloud Console Project (for OAuth)

1. Clone the Repository

git clone https://github.com/darxh/Servify.git
cd Servify

2. Backend Setup

Navigate to the server directory and install dependencies:

cd Server
npm install

Create a .env file in the Server folder with the following configuration:

# Server Configuration
PORT=8080
MONGO_URI=your_mongodb_connection_string
CLIENT_URL=http://localhost:5173

# JWT Configuration
JWT_ACCESS_SECRET=your_super_secret_access_key
JWT_REFRESH_SECRET=your_super_secret_refresh_key
JWT_ACCESS_EXPIRE=15m
JWT_REFRESH_EXPIRE=7d

# Cloudinary (Image Uploads)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Email Service (Nodemailer)
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_email_app_password

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

Start the backend server:

npm run dev

The server will run on http://localhost:8080

3. Frontend Setup

Open a new terminal, navigate to the client directory, and install dependencies:

cd Client
npm install

Create a .env file in the Client folder:

VITE_API_URL=http://localhost:8080/api/v1
VITE_GOOGLE_CLIENT_ID=your_google_client_id

Start the frontend development server:

npm run dev

The client will run on http://localhost:5173

4. Access the Application

Open your browser and navigate to:

• Frontend: http://localhost:5173
• Backend API: http://localhost:8080/api/v1

---

Project Structure

Servify/
├── Client/                       # React Frontend (Vite)
│   ├── public/                   # Static assets
│   ├── src/
│   │   ├── context/              # Global state management (AuthContext)
│   │   ├── features/             # Feature-based UI components
│   │   │   ├── auth/             # Forms and OAuth buttons
│   │   │   ├── bookings/         # Booking modals and logic
│   │   │   ├── home/             # Landing page sections (Hero, Categories, etc.)
│   │   │   ├── reviews/          # Review modals
│   │   │   └── services/         # Search & filtering components
│   │   ├── hooks/                # Custom data fetching hooks (React Query)
│   │   ├── layouts/              # UI Layouts (AuthLayout, MainLayout, Dashboard/Sidebar)
│   │   ├── lib/                  # Third-party configurations (Axios instance)
│   │   ├── pages/                # Application routes
│   │   │   ├── auth/             # LoginPage, RegisterPage
│   │   │   ├── dashboard/        # Provider/User Dashboard, Settings, Create/Edit Services
│   │   │   ├── home/             # HomePage
│   │   │   └── services/         # ServicesPage, ServiceDetailsPage
│   │   ├── utils/                # Helper functions (formatCurrency)
│   │   ├── main.jsx              # React application entry point
│   │   └── router.jsx            # Application routing (React Router)
│   ├── index.html                # HTML entry point
│   └── vite.config.js            # Vite configuration
│
└── Server/                       # Node.js & Express Backend
    ├── config/                   # Database (db.js) & Cloudinary configurations
    ├── controllers/              # Business logic handling
    │   ├── authController.js     
    │   ├── bookingController.js  
    │   ├── categoryController.js 
    │   ├── reviewController.js   
    │   └── serviceController.js  
    ├── middleware/               # Custom Express middlewares (authMiddleware.js)
    ├── models/                   # Mongoose Database Schemas
    │   ├── bookingModel.js
    │   ├── categoryModel.js
    │   ├── reviewModel.js
    │   ├── serviceModel.js
    │   └── userModel.js
    ├── routes/                   # API route definitions
    ├── utils/                    # Helper functions (emailTemplates, generateToken, sendEmail)
    ├── seed.js                   # Database seeding script
    └── server.js                 # Backend entry point

Contributing

Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated!

How to Contribute

1. Fork the Project

   git fork https://github.com/darxh/Servify.git

2. Create your Feature Branch

   git checkout -b feature/AmazingFeature

3. Commit your Changes

   git commit -m 'Add some AmazingFeature'

4. Push to the Branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

Contribution Guidelines

• Follow the existing code style and conventions
• Write clear commit messages
• Add tests for new features
• Update documentation as needed
• Ensure all tests pass before submitting PR

---

Roadmap

• Payment Integration - Stripe/PayPal integration for secure payments
• Real-time Chat - Socket.io for provider-customer communication
• Push Notifications - Real-time booking updates
• Advanced Analytics - Provider dashboard with earnings analytics
• Mobile App - React Native version
• Multi-language Support - i18n internationalization
• Service Packages - Bundle multiple services at discounted rates
• Loyalty Program - Rewards system for frequent users

---