fiery-application

byMudit Gupta

Build a responsive full-stack web application called "Smart Hostel Booking Platform". Target users: - College students - Working professionals - Hostel owners Core features: USER SIDE: - User signup/login - Search hostels by city/location - Filter by price, boys/girls/co-ed, AC/non-AC, Wi-Fi, food - Hostel listing page with cards - Hostel details page with images, facilities, pricing - Room availability checker - Book now form - Booking confirmation page - User dashboard showing booking history ADMIN SIDE: - Admin login - Add/edit/delete hostels - Add room details and availability - View and manage bookings - Manage users DATABASE TABLES: Users: - id - name - email - phone - password Hostels: - id - hostel_name - location - monthly_price - facilities - images - owner_contact Rooms: - id - hostel_id - room_type - capacity - available_beds - room_price Bookings: - id - user_id - hostel_id - room_id - checkin_date - booking_status - payment_status TECH: Frontend: React Backend: Node.js or Django Database: MySQL Responsive modern UI for students. Create demo sample data.

LandingAdminLoginLoginSignup
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

Fiery-Application System Requirements Document

1. Introduction

The "Fiery-Application" is a full-stack web application designed to serve as a "Smart Hostel Booking Platform." This platform is tailored to meet the needs of college students, working professionals, and hostel owners by providing a seamless and efficient booking experience.

2. System Overview

The Fiery-Application is a responsive web application that allows users to search and book hostels based on various criteria. It includes features for both users and administrators, ensuring a comprehensive management system for hostel bookings. The application integrates a map for visual search, enhancing the user experience by allowing geographical location searches.

3. Functional Requirements

Page 2 of 5

User Side

  • As a User, I should be able to sign up and log in.
  • As a User, I should be able to search hostels by city/location with an integrated map for visual search.
  • As a User, I should be able to filter hostels by price, boys/girls/co-ed, AC/non-AC, Wi-Fi, and food.
  • As a User, I should be able to view a hostel listing page with cards.
  • As a User, I should be able to view hostel details with images, facilities, and pricing.
  • As a User, I should be able to check room availability.
  • As a User, I should be able to fill out a "Book Now" form.
  • As a User, I should be able to see a booking confirmation page.
  • As a User, I should be able to access a dashboard showing my booking history.

Admin Side

  • As an Admin, I should be able to log in.
  • As an Admin, I should be able to add, edit, and delete hostels.
  • As an Admin, I should be able to add room details and availability.
  • As an Admin, I should be able to view and manage bookings.
  • As an Admin, I should be able to manage users.

4. User Personas

  • College Student: Primarily looking for affordable and convenient accommodation options near their college.
  • Working Professional: Seeking comfortable and well-facilitated hostels for long-term stays.
  • Hostel Owner: Interested in listing and managing their hostel properties efficiently.
Page 3 of 5

5. Visuals Colors and Theme

  • primary: #1A73E8 (Deep Blue)
  • primary_light: #E8F0FE (Light Blue)
  • secondary: #FF6F61 (Coral)
  • accent: #FFD700 (Gold)
  • highlight: #FFA500 (Orange)
  • bg: #F5F5F5 (Light Grey)
  • surface: rgba(255, 255, 255, 0.9) (White)
  • text: #333333 (Dark Grey)
  • text_muted: #777777 (Medium Grey)
  • border: rgba(200, 200, 200, 0.5) (Light Grey)

6. Signature Design Concept

The homepage of the Fiery-Application will feature an interactive 3D map using @react-three/fiber and @react-three/drei. Users can explore hostel locations by navigating a virtual cityscape. Hostels will appear as clickable 3D buildings, and selecting one will zoom in to reveal detailed information. This immersive experience will allow users to visually explore and select hostels based on their geographical preferences. The map will be interactive, allowing users to rotate, zoom, and click on hostels for more information.

Page 4 of 5

7. Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model. Layers of the cityscape will move at different speeds as users scroll, creating a sense of depth. Hostels will animate into view with smooth transitions, and hover effects will highlight interactive elements. This approach will provide a visually rich first impression, ideal for engaging users in the booking process.

8. Non-Functional Requirements

  • The application must be responsive and accessible on all devices.
  • The system should handle up to 10,000 concurrent users.
  • Page load times should not exceed 3 seconds.
  • Data security and user privacy must be ensured.

9. Tech Stack

  • Frontend: React
  • Backend: Node.js or Django
  • Database: MySQL
  • Map Integration: @react-three/fiber, @react-three/drei

10. Assumptions and Constraints

  • The application will initially support English language only.
  • The map integration will require a stable internet connection for optimal performance.
  • The admin panel will have a single login access for simplicity.
Page 5 of 5

11. Glossary

  • Hostel: A budget-friendly accommodation option.
  • Booking: The process of reserving a room in a hostel.
  • Admin: The individual responsible for managing the hostel listings and bookings.

This document outlines the system requirements for the Fiery-Application, ensuring a robust and user-friendly platform for hostel bookings.

Landing design preview
Landing: View 3D Map
Signup: Create Account
Login: Sign In
Search: Find Hostels
Search: Apply Filters
Listings: Browse Cards
HostelDetail: View Facilities
HostelDetail: Check Availability
Booking: Fill Form
Confirmation: View Booking
Dashboard: View History