giant-hostel

malli swari

Build a production-ready full-stack Hostel Leave Request & Approval Management System. Tech Stack: Frontend: - ReactJS - Vite - Tailwind CSS - shadcn/ui - Lucide React Icons - React Router DOM - Axios - React Hook Form + Zod validation Backend: - Node.js - Express.js - SQLite - JWT Authentication - bcrypt password hashing Main Goal: Create a centralized hostel leave management portal where students can submit leave requests, wardens can review and approve/reject requests, and admins can monitor hostel activity and leave analytics. Application Requirements: ==================================== AUTHENTICATION & AUTHORIZATION ==================================== Implement secure authentication system with: - Register - Login - Logout - JWT token authentication - Role-based protected routes - Roles: - Student - Warden - Admin Features: - Store JWT securely - Password hashing using bcrypt - Session persistence - Unauthorized route protection - Role-based sidebar navigation ==================================== UI / DESIGN REQUIREMENTS ==================================== Create a premium modern SaaS dashboard UI inspired by: - Linear - Notion - Clerk Dashboard Design Requirements: - Fully responsive - Clean spacing - Soft shadows - Rounded cards - Professional typography - Modern tables - Status badges - Loading skeletons - Empty states - Error states - Toast notifications - Confirmation dialogs - Mobile responsive sidebar - Dark/light theme support Use: - Tailwind CSS - shadcn/ui components - Lucide icons ==================================== DATABASE TABLES ==================================== Create SQLite database with proper relationships. Tables: 1. users 2. hostels 3. leave_requests 4. review_comments 5. leave_history Add: - timestamps - foreign keys - indexes where needed ==================================== STUDENT FEATURES ==================================== Student Dashboard: - Overview cards - Leave statistics - Recent leave requests - Leave status tracking Student can: - Register/Login - Submit leave request - Edit leave request until review begins - Cancel leave request - View leave history - View approval/rejection comments - Track leave timeline Leave Request Form Fields: - Student name - Roll number - Hostel block - Leave reason - From date - To date - Parent contact number - Destination address - Emergency contact Validation: - Required fields - Invalid date ranges - Duplicate leave requests - Invalid phone numbers - Leave duration limit - Missing emergency contact ==================================== WARDEN FEATURES ==================================== Warden Dashboard: - Assigned requests - Pending approvals - Approval statistics Warden can: - View assigned leave requests - Search/filter requests - Add review comments - Approve/reject requests - Change request status Statuses: - Pending - In Review - Approved - Rejected - Cancelled Features: - Student leave history - Review timeline - Bulk filters - Pagination ==================================== ADMIN FEATURES ==================================== Admin Dashboard: - Total leave requests - Approved leaves - Rejected leaves - Pending requests - Hostel-wise leave percentage - Student leave frequency - Occupancy analytics Add charts using Recharts: - Leave trends - Approval ratio - Hostel occupancy - Monthly analytics Admin Features: - Search and filters - Date range filters - Hostel filters - Warden filters - Student filters - CSV export - View all activity ==================================== API REQUIREMENTS ==================================== Create clean modular Express APIs. Endpoints: POST /api/auth/register POST /api/auth/login POST /api/leaves GET /api/leaves GET /api/leaves/:id PUT /api/leaves/:id DELETE /api/leaves/:id POST /api/leaves/:id/comments GET /api/leaves/:id/comments GET /api/dashboard/summary Requirements: - Proper HTTP status codes - Validation middleware - Centralized error handling - Pagination support - Filtering support - Secure APIs ==================================== FOLDER STRUCTURE ==================================== Frontend Structure: src/ ├── components/ ├── pages/ ├── layouts/ ├── routes/ ├── hooks/ ├── services/ ├── context/ ├── utils/ ├── constants/ └── assets/ Backend Structure: server/ ├── controllers/ ├── routes/ ├── middleware/ ├── validators/ ├── services/ ├── db/ ├── config/ ├── utils/ └── app.js ==================================== EXTRA FEATURES ==================================== Add: - PDF leave approval slip generation - CSV export - Parent notification email template UI - Activity logs - Review timeline - Search and pagination - Protected routes - Reusable components - Confirmation modals - Status chips - Analytics cards ==================================== CODE QUALITY ==================================== Requirements: - Clean architecture - Reusable components - No hardcoded data - Maintainable code - Production-ready structure - Environment variables - Comments where needed ==================================== DEPLOYMENT ==================================== Prepare for deployment: Frontend: - Vercel Backend: - Render Include: - README.md - Setup instructions - Environment variables guide - API documentation - Demo credentials - Seed data ==================================== FINAL OUTPUT EXPECTATION ==================================== Generate: - Full frontend code - Full backend code - SQLite schema - API integration - Responsive UI - Authentication flow - Dashboard analytics - Working CRUD operations - Production-ready structure Ensure: - No placeholder pages - No console errors - Fully functional flows - Professional UI - Real-world SaaS quality

Comments (0)

No comments yet. Be the first!

Page 1 of 4

giant-hostel System Requirements Document

Introduction

The "giant-hostel" project aims to develop a comprehensive Hostel Leave Request & Approval Management System. This system will streamline the process of submitting, reviewing, and approving leave requests within a hostel environment, ensuring efficient communication and management among students, wardens, and administrators.

System Overview

The giant-hostel system is designed to centralize hostel leave management, providing a seamless experience for students to submit leave requests, wardens to review and approve or reject these requests, and admins to monitor overall hostel activity and leave analytics. The system will be built using a modern tech stack, ensuring a responsive, secure, and user-friendly interface.

Functional Requirements

As a Student, I should be able to register, login, and submit leave requests.
As a Student, I should be able to edit or cancel my leave request until it is reviewed.
As a Student, I should be able to view my leave history and track the status of my requests.
As a Warden, I should be able to view, search, and filter assigned leave requests.
As a Warden, I should be able to approve or reject leave requests and add review comments.
As an Admin, I should be able to monitor leave requests, view analytics, and export data.
As an Admin, I should be able to filter requests by date, hostel, warden, and student.

Page 2 of 4

User Personas

Student: A hostel resident who submits leave requests.
Warden: A hostel authority responsible for reviewing and approving leave requests.
Admin: A system administrator who oversees hostel activities and analytics.

Visuals Colors and Theme

primary: #2A9D8F (Teal)
primary_light: #A8DADC (Light Teal)
secondary: #E76F51 (Coral)
accent: #F4A261 (Sandy Orange)
highlight: #E9C46A (Golden Yellow)
bg: #F1FAEE (Off White)
surface: rgba(233, 233, 233, 0.8)
text: #264653 (Dark Slate)
text_muted: #6D6875 (Muted Purple)
border: rgba(38, 70, 83, 0.2)

Signature Design Concept

The homepage of the giant-hostel system will feature an interactive 3D model of a hostel building. Users can navigate through different floors and rooms by clicking on them, which will reveal specific functionalities like submitting a leave request or viewing analytics. This immersive experience will be powered by @react-three/fiber and @react-three/drei, providing a unique and engaging way to interact with the system. Hovering over different sections will highlight them with subtle animations, and clicking will smoothly transition the user to the relevant page or feature.

Page 3 of 4

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll. This will be complemented by animated transitions and hover effects to enhance user engagement. Internal pages, such as dashboards and forms, will follow a "static" model to prioritize clarity and ease of use.

Non-Functional Requirements

The system must ensure data security and privacy, particularly for student information.
The application should be highly responsive and accessible on both desktop and mobile devices.
The system should support high availability and handle concurrent user sessions efficiently.

Tech Stack

Frontend: ReactJS, Vite, Tailwind CSS, shadcn/ui, Lucide React Icons, React Router DOM, Axios, React Hook Form + Zod validation
Backend: Node.js, Express.js, SQLite, JWT Authentication, bcrypt password hashing

Assumptions and Constraints

The system will be deployed on Vercel for the frontend and Render for the backend.
SQLite will be used as the database, with a focus on maintaining data integrity and relationships.
The application will adhere to modern web standards and best practices for security and performance.

Page 4 of 4

Glossary

JWT: JSON Web Token, used for secure authentication.
CRUD: Create, Read, Update, Delete operations.
SaaS: Software as a Service, a software distribution model.
API: Application Programming Interface, a set of protocols for building software applications.

This document outlines the comprehensive plan for developing the giant-hostel system, ensuring a robust, user-friendly, and efficient solution for hostel leave management.