snowy-shaadi

byDenis Minj

Shaadi Mandap Booking Website is a full-stack web application that allows users to browse wedding venues, view photos, pricing, capacity, and amenities, and book a mandap for their event. The system includes an admin panel where administrators can add, edit, or remove mandaps and manage customer bookings. The website uses HTML, CSS, JavaScript, Node.js, Express.js, and MySQL to provide a responsive interface and secure booking management.

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

snowy-shaadi System Requirements Document

1. Introduction

The "snowy-shaadi" project is a full-stack web application designed to facilitate the booking of wedding venues, specifically mandaps. This platform allows users to browse available venues, view detailed information such as photos, pricing, capacity, and amenities, and book a mandap for their event. The system also includes an admin panel for managing mandap listings and customer bookings.

2. System Overview

The snowy-shaadi application is built using HTML, CSS, JavaScript, Node.js, Express.js, and MySQL. It provides a responsive user interface and secure booking management. The system is designed to handle both user interactions for booking and administrative tasks for managing venue listings and bookings.

2a. Source Content Inventory

  • Mandap Listings: Includes photos, pricing, capacity, and amenities.
  • Booking Management: Handles user bookings and confirmations.
  • Admin Panel: Allows administrators to add, edit, or remove mandap listings and manage customer bookings.
Page 2 of 5

3. Functional Requirements as Story Points

  • As a User, I should be able to browse available wedding venues.
  • As a User, I should be able to view photos of each mandap.
  • As a User, I should be able to see pricing, capacity, and amenities for each mandap.
  • As a User, I should be able to book a mandap for my event.
  • As an Admin, I should be able to add new mandap listings.
  • As an Admin, I should be able to edit existing mandap listings.
  • As an Admin, I should be able to remove mandap listings.
  • As an Admin, I should be able to manage customer bookings.
  • As a User, I should be able to check mandap availability.
  • As a User, I should be able to receive booking confirmation.

4. User Personas

  • User: Individuals looking to book a mandap for their wedding event.
  • Admin: Administrators responsible for managing mandap listings and customer bookings.

5. Core User Flows

  • User browses mandap listings -> views photos and details -> checks availability -> books mandap -> receives confirmation.
  • Admin logs into the admin panel -> adds/edits/removes mandap listings -> manages customer bookings.
Page 3 of 5

6. Visuals Colors and Theme

  • primary: #FF5733 (vibrant orange)
  • primary_light: #FF8F66 (lighter orange for hover states)
  • secondary: #C70039 (deep red for accents)
  • accent: #900C3F (emphasis color for CTAs)
  • highlight: #FFC300 (bright yellow for notifications)
  • bg: #F5F5F5 (light grey for background)
  • surface: #FFFFFF (white for cards/panels)
  • text: #333333 (dark grey for primary text)
  • text_muted: #777777 (muted grey for secondary text)
  • border: #DDDDDD (light grey for borders)

7. Signature Design Concept

The homepage of snowy-shaadi will feature an interactive mandap gallery. Users can scroll through a carousel of mandap images that animate into a 3D space using @react-three/fiber. Each mandap image will "pop out" as users hover over it, providing a brief description and a "Book Now" button. The background will subtly change colors to reflect different times of the day, enhancing the immersive experience.

Landing Hero Motion Brief

The landing page will feature a dynamic animation where mandap images gather around a central booking calendar. As users interact, the calendar visibly updates to show available dates, and a confirmation message appears when a booking is made. This animation will be created using motion/react for smooth transitions and interactions.

Page 4 of 5

8. Interaction Model & Motion Direction

  • Intended Interaction Model: Animated
  • The landing page will include moderate scroll-triggered reveals and hover transitions. Interactive elements will have spring physics for a polished user experience.

9. Non-Functional Requirements

  • The system must be responsive and accessible on various devices and screen sizes.
  • The application should ensure secure data handling and user privacy.
  • The system should support high availability and handle peak loads efficiently.

10. Tech Stack

  • Frontend: HTML, CSS, JavaScript
  • Backend: Node.js, Express.js
  • Database: MySQL

11. Assumptions and Constraints

  • The system will primarily serve users in India, considering local preferences and requirements.
  • The application will operate in the Indian Standard Time (IST) timezone.
  • The system must comply with local regulations regarding data protection and privacy.
Page 5 of 5

12. Glossary

  • Mandap: A temporary platform set up for a Hindu wedding ceremony.
  • Admin Panel: A backend interface for administrators to manage the application content and user interactions.
  • Booking Confirmation: A notification sent to users confirming their mandap booking.
Landing design preview
Login: Sign In
Admin Dashboard: View Overview
Mandap Listings: Add Listing
Mandap Listings: Edit Listing
Mandap Listings: Remove Listing
Bookings: View Bookings
Bookings: Manage Booking
Bookings: Confirm Booking
Landing design preview
Login: Sign In
Admin Dashboard: View Overview
Mandap Listings: Add Listing
Mandap Listings: Edit Listing
Mandap Listings: Remove Listing
Bookings: View Bookings
Bookings: Manage Booking
Bookings: Confirm Booking