terra-service

byhello bye

HouseHero is a modern service-booking web application that connects customers with skilled taskers (service providers). Users can browse services, book jobs, manage their bookings, and update their profiles. The platform supports two roles: Customer and Tasker, each with their own dashboard and experience. The design should be modern, minimal, and clean, using Tailwind CSS, soft shadows, rounded cards, and a professional color palette (primary: orange, secondary: gray/white). 🧩 Pages & Features 1️⃣ Landing Page (Home) Purpose: Introduce the platform and attract users. Sections: πŸ” Navbar Logo (TaskLink) Links: Home, Services, Login, Register 🎯 Hero Section Headline: β€œFind Trusted Services Near You” Subtext explaining platform CTA buttons: Browse Services, Become a Tasker πŸ›  Services Preview Cards showing categories (Plumbing, Cleaning, Electrical, etc.) ⭐ How It Works Step 1: Choose service Step 2: Book a tasker Step 3: Get it done πŸ‘‡ Footer Contact info, social links 2️⃣ Login Page Purpose: Authenticate users. Components: Email input Password input Login button Link to Register page Behavior: On success β†’ redirect based on role: Customer β†’ Customer Dashboard Tasker β†’ Tasker Dashboard 3️⃣ Register Page Purpose: Create new account. Fields: Full Name Email Password Phone Role (Customer / Tasker) Behavior: Store user in backend Redirect to login 4️⃣ Services Page Purpose: Display available services. UI: Grid of service cards Each card includes: Service name Icon/image β€œBook Now” button Behavior: Clicking a service β†’ opens Booking Page 5️⃣ Booking Page Purpose: Create a job booking. Fields: Title Description Address City Scheduled Date Selected Service (auto-filled) Tasker (optional or auto-assigned) Behavior: Sends POST request to backend (/api/Job) On success: βœ… Redirect to Customer Dashboard 6️⃣ Customer Dashboard Purpose: Allow customers to manage bookings and profile. Sections: πŸ” Navbar Title: Customer Dashboard Logout button πŸ‘€ Profile Section Profile image Name, email, phone Edit Profile button (opens modal) πŸ“Š Stats Cards Total Bookings Total Spent (optional) πŸ“… My Bookings Section List of jobs (dynamic) Each booking card shows: Title Tasker Name Service Name Status (Assigned, Completed, etc.) Scheduled Date Description Empty State: β€œNo bookings yet” message if no jobs exist 7️⃣ Edit Profile Modal Purpose: Update user info. Fields: Full Name Email Phone Profile Image Upload Behavior: Sends PUT request to /api/User/{id} Optional image upload Updates UI instantly 8️⃣ Tasker Dashboard Purpose: Allow taskers to manage assigned jobs. Sections: Profile info Assigned jobs list Each job shows: Customer Name Service Name Description Date Status Actions: Accept / Update Status 🎨 Design Requirements Use Tailwind CSS Clean card-based layout Rounded corners (rounded-xl, rounded-2xl) Shadows (shadow-md, shadow-lg) Responsive (mobile-first) Colors: Primary: Orange (text-orange-500) Secondary: Gray / White Smooth hover effects and transitions βš™οΈ Backend Integration API Base URL: https://localhost:7011/api Endpoints: /User β†’ user management /Job β†’ booking system /Service β†’ services list πŸ” User Flow User registers or logs in Browses services Books a service Gets redirected to dashboard Sees booking under β€œMy Bookings” Can edit profile

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 4

Terra-Service System Requirements Document

Introduction

This document outlines the system requirements for the Terra-Service project, a modern service-booking web application designed to connect customers with skilled taskers. The platform provides a seamless experience for users to browse services, book jobs, manage their bookings, and update their profiles.

System Overview

Terra-Service is designed to facilitate easy and efficient service booking by connecting customers with taskers. The platform supports two primary roles: Customer and Tasker, each with their own dashboard and user experience. The system is built with a focus on usability, aesthetics, and a modern, minimal design using Tailwind CSS.

Functional Requirements

  • As a Customer, I should be able to view a grid of available services on the Services Page.
  • As a Customer, I should be able to fill out a form on the Booking Page to create a job.
  • As a Customer, I should be redirected to the Customer Dashboard after booking a service.
  • As a Customer, I should be able to view my bookings dynamically on the Customer Dashboard.
  • As a Customer, I should see styled cards with status badges for each booking on the Dashboard.
Page 2 of 4

User Personas

  • Customer: A user looking to book services such as plumbing, cleaning, or electrical work. They can browse services, book jobs, and manage their bookings.
  • Tasker: A service provider offering skills in various categories. They can manage assigned jobs and update job statuses.

Visuals Colors and Theme

  • primary: #FF6F00 (a vibrant orange for brand identity)
  • primary_light: #FFA040 (a lighter orange for hover states)
  • secondary: #4A4A4A (a neutral gray for text and secondary elements)
  • accent: #00BFA5 (a teal color for CTAs and active states)
  • highlight: #FFD600 (a bright yellow for notifications and highlights)
  • bg: #F5F5F5 (a light gray for the page background)
  • surface: rgba(255, 255, 255, 0.9) (a white with slight transparency for cards)
  • text: #212121 (a dark gray for primary text)
  • text_muted: #757575 (a softer gray for secondary text)
  • border: rgba(0, 0, 0, 0.1) (a subtle black for borders)

Signature Design Concept

Interactive Service Galaxy: The homepage will feature an interactive galaxy map where each star represents a service category. Users can click on a star to zoom in and view detailed service options. As users hover over stars, connections between related services will highlight, creating a dynamic and engaging experience. This concept will use @react-three/fiber for 3D rendering and gsap for smooth animations and transitions.

Page 3 of 4

Interaction Model & Motion Direction

  • Interaction Model: Parallax
    • The landing page will utilize a parallax effect, creating a layered depth as users scroll. Decorative elements like stars and service icons will move at different speeds, enhancing the storytelling aspect of the platform.
  • Motion Direction: Animated
    • Moderate scroll-triggered reveals and hover transitions will be used throughout the platform to maintain a polished and engaging user experience.

Non-Functional Requirements

  • The system must be responsive and accessible on various devices, including desktops, tablets, and smartphones.
  • The platform should support high availability and handle concurrent user sessions efficiently.
  • Data security and user privacy must be ensured through encryption and secure authentication mechanisms.

Tech Stack

  • Frontend: React for Web
  • Backend: Python with FastAPI
  • Database: MySQL or MariaDB, using Alembic for migrations
  • Local Orchestration: Docker, Docker Compose
  • Server-side Orchestration: Kubernetes
Page 4 of 4

Assumptions and Constraints

  • The application will be deployed in a region where the primary language is English.
  • The system will operate in the Jordanian timezone.
  • The platform will initially support payment in Jordanian Dinar (JOD).

Glossary

  • Customer: A user who books services on the platform.
  • Tasker: A service provider offering their skills through the platform.
  • Booking: The process of scheduling a service with a tasker.
  • Dashboard: A user interface that provides an overview of bookings and profile management.

This document serves as a comprehensive guide for the development and design of the Terra-Service platform, ensuring a cohesive and user-friendly experience for all users.

Landing design preview
Landing: View Hero
Landing: Browse Services
Login: Sign In
Register: Create Account
Dashboard: View Bookings
Services: Browse Grid
Services: Select Service
Booking: Fill Form
Dashboard: View Stats
Profile: Edit Profile