System Requirements Document (SRD) for sunny-rooms

1. Introduction

The sunny-rooms project aims to create a vibrant, user-friendly website for Welkom Inn, located at the Corner of Stateway & Tempest Roads, Welkom, Free State, South Africa. The website will showcase the hotel’s modernized rooms, conference facilities, outdoor pool, and on-site dining while providing an integrated booking system for direct reservations and redirection to Booking.com. The design will emphasize a colorful and welcoming aesthetic to reflect the hotel’s personality and hospitality.

2. System Overview

The sunny-rooms website will serve as a digital gateway for Welkom Inn, targeting both leisure travelers and corporate clients. The system will provide:

• A visually appealing, mobile-friendly interface.
• A seamless booking experience with options for direct reservations and redirection to Booking.com.
• Detailed pages for rooms, facilities, and contact information.
• A vibrant, colorful design that reflects the hotel’s welcoming atmosphere.
• Integration of modern web technologies to ensure fast loading times and smooth navigation.

The website will cater to users in South Africa and beyond, with a focus on local currency (ZAR) and timezone (SAST).

3. Functional Requirements

• As a User, I should be able to view a homepage showcasing the hotel’s features, including modernized rooms, conference facilities, outdoor pool, and on-site dining.
• As a User, I should be able to browse detailed information about the available rooms, including amenities, photos, and pricing.
• As a User, I should be able to explore the hotel’s facilities, such as the conference rooms, pool, and dining options.
• As a User, I should be able to make a direct booking through the website.
• As a User, I should be able to redirect to the Booking.com page for reservations.
• As a User, I should be able to view the hotel’s contact information, including phone number, email, and location on a map.
• As an Admin, I should be able to manage room availability and pricing through a backend system.
• As an Admin, I should be able to update the website content, including room details, photos, and facility descriptions.

4. User Personas

4.1 Leisure Traveler

• Description: Individuals or families looking for a comfortable stay in Welkom.
• Goals: Explore room options, view amenities, and book a stay.
• Pain Points: Difficulty finding clear information or booking options.

4.2 Corporate Client

• Description: Business professionals or organizations seeking conference facilities or group bookings.
• Goals: Learn about conference facilities, book meeting spaces, and arrange accommodations for teams.
• Pain Points: Lack of streamlined booking for corporate needs.

4.3 Admin

• Description: Hotel staff responsible for managing bookings, room availability, and website content.
• Goals: Easily update room details, pricing, and availability.
• Pain Points: Complicated backend systems or lack of flexibility in updating content.

5. Visuals Colors and Theme

Color Palette

• primary: #FF6F61 (Warm Coral) – Represents hospitality and warmth.
• primary_light: #FFA08C (Soft Peach) – A lighter tint for hover states and secondary UI.
• secondary: #4A90E2 (Bright Sky Blue) – Reflects the outdoor pool and fresh ambiance.
• accent: #FFD700 (Vibrant Gold) – Adds a pop of vibrancy for CTAs and active states.
• highlight: #FFB400 (Amber) – Used for hover effects and notifications.
• bg: #F7F7F7 (Light Gray) – A neutral background for readability.
• surface: rgba(255, 255, 255, 0.9) – A semi-transparent white for cards and panels.
• text: #333333 (Dark Gray) – Primary text color for headings and body text.
• text_muted: #777777 (Muted Gray) – Secondary text for labels and timestamps.
• border: rgba(0, 0, 0, 0.1) – Subtle border color for dividing elements.

6. Signature Design Concept

Floating Room Showcase with Interactive Booking

The homepage will feature an interactive 3D carousel of floating room cards that users can swipe or drag to explore. Each card will represent a room type (e.g., Standard, Deluxe, Suite) with a photo, brief description, and price. Hovering over a card will expand it slightly, revealing more details and a “Book Now” button.

• Animation: Smooth transitions using framer-motion for card expansion and hover effects.
• Interaction: Users can click on a card to open a detailed room page or drag the carousel to browse other options.
• Background: A dynamic watercolor animation that subtly shifts colors (warm coral to sky blue) based on the time of day, created using gsap.
• Micro-interactions: Buttons and CTAs will have spring physics for a playful, engaging feel.

This concept will make the website visually striking and highly interactive, leaving a lasting impression on visitors.

7. Interaction Model & Motion Direction

Landing Page Interaction Model: Parallax

The landing page will use a parallax interaction model, creating a sense of depth and immersion. Layers such as the watercolor background, floating room cards, and decorative elements (e.g., poolside icons, dining illustrations) will move at different speeds as the user scrolls.

• Internal Pages: Static interaction model for clarity and ease of use.
• Distinctive Section Mechanics:
  • Rooms Section: Interactive 3D carousel.
  • Facilities Section: Scroll-triggered reveals with icons and descriptions.
  • Contact Section: Map with hoverable pins for location details.

8. Non-Functional Requirements

• The website must load within 3 seconds on a standard 4G connection.
• The design must be responsive and optimized for mobile, tablet, and desktop devices.
• The booking system must support secure payment processing.
• The backend must allow easy content updates without requiring technical expertise.
• The website must comply with South African data protection regulations (POPIA).

9. Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL with Alembic for migrations
• AI Tools: Not applicable for this project
• Orchestration: Docker and docker-compose for local development

10. Assumptions and Constraints

• The website will primarily target users in South Africa, with pricing displayed in ZAR.
• The Booking.com redirection will not require API integration; it will use direct links.
• The project will adhere to a 3-month development timeline.

11. Glossary

• POPIA: Protection of Personal Information Act, a South African data protection law.
• CTA: Call-to-Action, a button or link encouraging user interaction.
• Parallax: A design technique where background elements move slower than foreground elements, creating depth.