giant-website
I want you to make me a website for real estate selling houses and building
Comments (0)
Sign in to leave a comment
Project Tasks16
Implement Properties API
As a user I want to use backend API for browsing, filtering, and viewing property listings so that real data is served from the database. Implement FastAPI endpoints: GET /properties (list with filters: location, price_min, price_max, rooms, type), GET /properties/{id} (detail), POST /properties (admin only), PUT /properties/{id} (admin only), DELETE /properties/{id} (admin only). Use MySQL with Alembic migrations. Return prices in OMR.
Implement Bookings API
As a user I want to use backend API for creating and managing consultation bookings so that appointments are stored and retrievable. Implement FastAPI endpoints: POST /bookings (create consultation booking with name, phone, date, message, property_id), GET /bookings (admin: all bookings; registered user: own bookings), PUT /bookings/{id} (admin manage status), DELETE /bookings/{id} (admin cancel). Integrate with third-party calendar API for scheduling in GST timezone.
Implement Theme and Structure
As a user I want to see the website with the correct color palette and layout structure so that it matches the Almamari Estates brand. Implement the global theme using design tokens: Background #0A3D2F, Surface #FFFFFF, Text #333333, Accent #D4AF37, Muted #E5E5E5. Set up global CSS variables, font families (Inter), and base layout components (Navbar, Footer shell). Remove any scaffold pages not required by the user flows (welcome page, AI assistant page, settings page if not in flow). This task must be completed before any page-specific implementation.
Build Listings Page
As a user I want to browse and filter property listings so that I can find properties that match my criteria. Implement the Listings page with a responsive grid of property cards (image, type badge, title, location, price in OMR, bed/bath/sqm icons, View Details CTA). Include filter controls for location, price range, rooms, and property type. Navigates from Home page, links to Property detail page. Supports both Guest and Registered User flows.
Build Property Detail Page
As a user I want to view full details of a property so that I can make an informed decision before booking a consultation. Implement the Property detail page with high-quality image gallery, property description, specifications (bed/bath/sqm), price in OMR, location map embed, Save Favorite button (for registered users), and Book Consultation CTA. Navigates from Listings page, links to Booking page.
Build Booking Page
As a user I want to book a consultation online so that I can schedule time with an Almamari Estates expert. Implement the Booking page with a consultation form (Name, Phone, Preferred Date via calendar picker, Message, Submit). Integrate with third-party calendar API. Show confirmation on success. Navigates from Property detail page and Home CTA. Links back to Dashboard for registered users to manage bookings.
Implement Admin Dashboard Analytics
As an admin I want to use backend API for viewing analytics so that I can track user activity and property performance. Implement FastAPI endpoint GET /admin/analytics returning: total listings, total bookings, bookings by status, most viewed properties, and user registration counts. Display in the Dashboard admin view with charts/stats cards.
Implement Favorites API
As a registered user I want to use backend API for saving and retrieving favorite properties so that I can revisit preferred listings. Implement FastAPI endpoints: POST /favorites (save property), GET /favorites (list user's saved properties), DELETE /favorites/{property_id} (remove from favorites). Requires authenticated user token.
Integrate AI Consultation Assistant
As a user I want to use an AI-powered assistant during consultation booking so that I get helpful, friendly responses about properties and scheduling. Integrate GPT for conversational responses in the Booking page flow. Implement a FastAPI endpoint POST /ai/consult that accepts user query and property context, returns AI-generated response. Display as a chat widget on the Booking page.
Build Login Page
As a user I want to sign in to my account so that I can access registered user features such as saving favorites and managing bookings. Implement the Login page with email/password form, gold accent CTA button, deep green background consistent with the theme. Should link to the Dashboard page on success and back to Home. Follows the Admin and Registered User flows from the user flow diagrams.
Build Home Page
As a user I want to land on a visually stunning Home page so that I can explore the interactive map of Oman and featured properties. Implement the Home page based on the existing JSX design (v2). Sections include: NavBar (sticky, semi-transparent deep green, gold border, hamburger on mobile), HeroMarquee (full-viewport hero with headline, CTA buttons, auto-scrolling property marquee), InteractiveMapOman (3D map with gold markers, sidebar panel), FeaturedListings (3-column property card grid), SearchFilterBar (inline filter bar), WhyAlmamari (trust section with icon grid and animated counters), HowItWorks (3-step process), Testimonials (carousel), ConsultationCTA (full-width CTA with inline form), Footer (4-column layout). Navigates to Listings page and Booking page.
Connect Frontend to Properties API
As a user I want the Listings and Property Detail pages to display real data from the backend so that I see actual Almamari Estates listings. Wire up the Listings page filter controls and property card grid to GET /properties API. Wire up the Property Detail page to GET /properties/{id}. Handle loading states, error states, and empty states. Implement pagination or infinite scroll for listings.
Build Dashboard Page
As a registered user or admin I want to access my dashboard so that I can manage bookings and view analytics. Implement the Dashboard page with two views: (1) Registered User view showing their saved properties and upcoming/past consultation bookings with management options; (2) Admin view showing analytics (user activity, property performance), links to add/edit/delete listings, and manage all consultation bookings. Navigates from Login page. Admin flow: Dashboard -> Listings (Add/Edit/Delete) and Bookings management.
Implement Mobile Responsive Design
As a user on a mobile device I want all pages to be fully responsive so that I have a great experience on any screen size. Audit and fix all pages (Home, Listings, Property, Booking, Dashboard, Login) for mobile responsiveness: hamburger nav drawer, stacked grids, touch-friendly tap targets (min 44x44px), fluid typography, bottom sheet map sidebar on mobile, swipeable testimonial carousel. Test on common mobile breakpoints (375px, 414px, 768px).
Connect Frontend to Favorites API
As a registered user I want the Save Favorite button on Property Detail page to persist my favorites so that I can access them from my Dashboard. Wire up Save/Remove Favorite button to POST /favorites and DELETE /favorites/{id}. Display saved favorites list in the Dashboard. Show visual feedback (gold heart icon toggle) on the Property Detail page.
Connect Frontend to Bookings API
As a user I want the Booking page form to submit to the backend and the Dashboard to display my bookings so that consultation scheduling is fully functional. Wire up Booking page form to POST /bookings. Wire up Dashboard bookings section to GET /bookings. Show confirmation message after successful booking. Handle API errors gracefully.
No comments yet. Be the first!