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