Website Overview & Scope

Sparsh Canopy required a dual-purpose digital solution: an attractive, high-converting public website for hotel guests, and a secure internal management system to handle day-to-day operations.

The platform was engineered using Next.js for blazing-fast Server-Side Rendering (SSR) and SEO, while the backend relies on a normalized MySQL database to handle complex relational data like room inventory, bookings, and employee records.

Scope & Features: The system includes a live room booking engine with date-range picking, and a comprehensive Admin Panel that features a complete HR module—tracking staff attendance, managing shifts, and automatically calculating monthly salaries.

Launch Date

2026

Project Duration

3 Weeks

Web Platform User Roles

HOTEL GUEST

Explores hotel rooms, checks date availability, views amenities, and makes direct bookings through the public website.

FRONT DESK MANAGER

Manages check-ins, check-outs, room statuses, and guest requests in real-time via the operational dashboard.

HR & ACCOUNTS ADMIN

Manages staff profiles, tracks daily attendance, calculates leaves, and processes automated monthly salary slips.

SUPER ADMIN

Has full access to the MySQL database, oversees all hotel branches (if any), and monitors total revenue and payroll reports.

How It Was Built (3-Week Full-Stack Sprint)

1

Week 1: UI/UX & Database Architecture

Designed the hotel website layout and structured a complex MySQL schema to handle both room bookings and HR/Payroll data simultaneously.

2

Week 2: Frontend Next.js & Booking Engine

Developed the guest-facing website using Tailwind CSS. Built the core booking logic, handling date overlaps, room types, and pricing availability.

3

Week 3: Staff Management & Salary Module

Engineered the internal ERP dashboard. Built Next.js API routes to log staff attendance, calculate daily wages, deduct leaves, and generate salary reports.

4

Final Launch: Testing & SSR Optimization

Optimized the Next.js frontend for SEO to drive organic hotel bookings. Executed rigorous testing on the payroll module before live deployment.

website

Web Interface Preview

Live Room Availability and Booking Engine

Automated Salary and Payroll Generation Module

Our Expertise

Web Technology Stack

Modern Next.js ERP Setup

Next.js & React

Tailwind CSS

Next.js API Routes

MySQL Database

JWT Auth & Security

Deep Dive: Hospitality & ERP Features

Live Room Booking Engine

Guests can select check-in/check-out dates, view real-time room availability, and book directly. The system automatically blocks dates in MySQL to prevent double-booking.

Staff Attendance Tracking

A dedicated HR module where managers can log daily staff attendance, track check-in/out times, and manage half-days or paid leaves directly from the dashboard.

Automated Salary Calculation (Payroll)

The ERP automatically calculates monthly wages based on the employee's base salary, present days, applied leaves, and generates exportable salary slips.

Dynamic Content Management

Hotel admins can easily add new room categories, update pricing dynamically for peak seasons, and change gallery images via the backend.

Impact & Business Results

Increased Direct Bookings

The Next.js SSR-optimized website improved Google rankings, leading to a 35% increase in commission-free direct bookings.

Hours Saved on Payroll

Automated attendance-to-salary calculations saved the HR department roughly 15 hours of manual Excel work every month.

Zero Booking Clashes

The strict MySQL transactional queries completely eliminated the issue of double-booked rooms during peak tourist seasons.

Centralized Operations

Brought guest-facing UI and internal staff management into a single, unified digital platform.

Key Takeaways

Building an ERP alongside the public website within Next.js creates an incredibly powerful, unified system without needing separate tech stacks.

Structuring a robust MySQL relational database is the most critical step when handling intertwined data like room inventory, bookings, and employee attendance.

Time & Effort Analysis

Breakdown of the full-stack hotel & ERP development

Total Project Hours

140

Delivered across a 3-week sprint

MySQL Schema & Setup 20 hrs · 14.2%

Next.js Guest Frontend 40 hrs · 28.5%

Booking Engine Logic 30 hrs · 21.4%

Admin ERP (Attendance & Salary) 40 hrs · 28.5%

SEO, Testing & Launch 10 hrs · 7.4%

3

Weeks Duration

100

Automated Payroll (%)

15

DB Tables Created

Challenges & Solutions

Problem: Handling room availability queries when multiple users try to book dates that partially overlap.

Solution

Wrote complex MySQL queries to check date intersections before confirming a booking, ensuring 100% accurate room inventory.

Problem: Calculating salaries dynamically based on half-days, unpaid leaves, and variable month lengths (28 vs 31 days).