# unknown > Main Content ├── Breadcrumbs ├── Content Area └── Sidebar (filters/ads) - Author: Mohamed Alsalman - Repository: Bahrain-AI/MarketPlace-Website - Version: 20260209195557 - Stars: 0 - Forks: 0 - Last Updated: 2026-02-09 - Source: https://github.com/Bahrain-AI/MarketPlace-Website - Web: https://mule.run/skillshub/@@Bahrain-AI/MarketPlace-Website~unknown:20260209195557 --- # https://www.dubizzle.com.bh/en/ Clone - Marketplace Website Builder ## Purpose Build a pixel-perfect clone of the https://www.dubizzle.com.bh/en/ classifieds marketplace with custom color palette, featuring modern UI/UX, responsive design, and core marketplace functionality. ## Tech Stack - **Frontend**: React 18 + TypeScript + Vite - **Styling**: Tailwind CSS 3.4+ with custom color palette - **Routing**: React Router v6 - **State Management**: Zustand (lightweight, simple) - **Forms**: React Hook Form + Zod validation - **Icons**: Lucide React - **Image Handling**: React Image Gallery - **Date/Time**: date-fns - **API Client**: Axios (for future backend integration) ## Color Palette Replace https://www.dubizzle.com.bh/en/'s red/orange with custom brand colors: - **Primary**: `#6366F1` (Indigo) - Main brand color - **Secondary**: `#8B5CF6` (Purple) - Accents - **Success**: `#10B981` (Green) - Success states - **Warning**: `#F59E0B` (Amber) - Warnings - **Danger**: `#EF4444` (Red) - Errors - **Dark**: `#1F2937` (Gray 800) - Text/backgrounds - **Light**: `#F9FAFB` (Gray 50) - Backgrounds ## Core Features to Implement ### 1. Homepage - **Hero Section**: Search bar with category dropdown and location selector - **Category Grid**: 13+ main categories (Motors, Properties, Jobs, Electronics, etc.) - **Featured Listings**: Carousel/grid of promoted items - **Quick Stats**: Number of ads, categories - **Location Selector**: City/area dropdown - **Responsive Navigation**: Mobile hamburger menu ### 2. Category Pages - **Breadcrumb Navigation** - **Filter Sidebar**: - Price range slider - Condition (New/Used) - Location filter - Date posted - Category-specific filters - **Listing Grid/List View Toggle** - **Sort Options**: Newest, Price (low-high, high-low), Featured - **Pagination** ### 3. Listing Cards - **Image Thumbnail** with badge (Featured/Urgent) - **Title** (truncated) - **Price** with currency - **Location** and date posted - **Favorite Heart Icon** - **Quick View** hover state ### 4. Individual Listing Page - **Image Gallery** (main image + thumbnails) - **Title and Price** - **Seller Info Card**: Name, member since, verification badge - **Description** with "Read More" expand - **Specifications Grid** (category-dependent) - **Location Map** placeholder - **Contact Seller** button (opens chat modal) - **Share Buttons** - **Report Listing** link - **Related Listings** section ### 5. Post Ad Flow - **Multi-step Form**: - Step 1: Select category - Step 2: Upload images (drag-drop, max 8) - Step 3: Fill details (title, description, price, condition) - Step 4: Location and contact info - Step 5: Review and publish - **Image Upload** with preview and delete - **Form Validation** with error messages - **Draft Saving** (localStorage) ### 6. User Pages - **Login/Register Modal** - **My Account Dashboard**: - My Ads (active, pending, expired) - Favorites - Messages - Settings - **Edit/Delete Ad** functionality ### 7. Search - **Global Search Bar** in header - **Auto-suggestions** as user types - **Search Results Page** with filters - **Recent Searches** (localStorage) ### 8. Additional Pages - **About Us** - **Contact Us** with form - **Terms of Use** - **Privacy Policy** - **FAQ** ## Design Requirements ### Layout Structure ``` Header (sticky) ├── Logo ├── Location Selector ├── Search Bar ├── Navigation (Categories, Post Ad) └── User Menu (Login/Profile/Messages) Main Content ├── Breadcrumbs ├── Content Area └── Sidebar (filters/ads) Footer ├── Company Links ├── Categories ├── Support └── Social Media ``` ### Responsive Breakpoints - Mobile: < 640px (single column, hamburger menu) - Tablet: 640px - 1024px (2 columns) - Desktop: > 1024px (3-4 columns) ### Key UI Patterns - **Cards**: Rounded corners (8px), shadow on hover - **Buttons**: Primary (filled), Secondary (outline), Ghost - **Inputs**: Border focus states with primary color - **Modals**: Backdrop blur, centered, smooth transitions - **Toasts**: Top-right position for notifications - **Loading States**: Skeleton screens for lists ## Mock Data Structure ### Listing Object ```typescript interface Listing { id: string; title: string; description: string; price: number; currency: string; condition: 'new' | 'used'; category: Category; subcategory: string; images: string[]; location: { city: string; area: string; coordinates?: [number, number]; }; seller: { id: string; name: string; memberSince: Date; verified: boolean; avatar?: string; }; specs: Record; featured: boolean; urgent: boolean; views: number; createdAt: Date; updatedAt: Date; } ``` ### Category Structure ```typescript interface Category { id: string; name: string; slug: string; icon: string; subcategories: Subcategory[]; } ``` ## Implementation Guidelines ### File Structure ``` src/ ├── components/ │ ├── common/ # Reusable components │ │ ├── Button.tsx │ │ ├── Card.tsx │ │ ├── Input.tsx │ │ ├── Modal.tsx │ │ └── ... │ ├── layout/ │ │ ├── Header.tsx │ │ ├── Footer.tsx │ │ ├── Sidebar.tsx │ │ └── Navigation.tsx │ ├── listing/ │ │ ├── ListingCard.tsx │ │ ├── ListingGrid.tsx │ │ ├── ListingDetails.tsx │ │ ├── ImageGallery.tsx │ │ └── ... │ ├── search/ │ │ ├── SearchBar.tsx │ │ ├── FilterSidebar.tsx │ │ └── ... │ └── forms/ │ ├── PostAdForm.tsx │ ├── LoginForm.tsx │ └── ... ├── pages/ │ ├── Home.tsx │ ├── CategoryPage.tsx │ ├── ListingPage.tsx │ ├── PostAd.tsx │ ├── MyAccount.tsx │ └── ... ├── hooks/ # Custom React hooks ├── store/ # Zustand stores ├── utils/ # Helper functions ├── data/ # Mock data ├── types/ # TypeScript definitions └── styles/ # Global styles ``` ### Best Practices 1. **Component Reusability**: Create generic components (Button, Card, Input) used throughout 2. **TypeScript**: Strict typing for all props and data structures 3. **Accessibility**: ARIA labels, keyboard navigation, semantic HTML 4. **Performance**: - Lazy load images - Route-based code splitting - Memoize expensive calculations - Virtual scrolling for long lists 5. **Mobile-First**: Design mobile layout first, then enhance for desktop 6. **SEO**: Semantic HTML, meta tags, structured data 7. **State Management**: Use Zustand for global state (user, favorites, cart) 8. **Error Handling**: User-friendly error messages, fallback UI ## Phase 1: Foundation (Start Here) 1. Initialize Vite + React + TypeScript project 2. Setup Tailwind with custom color palette 3. Create base layout (Header, Footer, Container) 4. Implement routing structure 5. Build common components library 6. Setup mock data structure ## Phase 2: Core Pages 1. Homepage with category grid 2. Category listing page with filters 3. Individual listing detail page 4. Search functionality ## Phase 3: User Features 1. Post Ad multi-step form 2. User authentication UI 3. My Account dashboard 4. Favorites system ## Phase 4: Polish 1. Animations and transitions 2. Loading states and skeletons 3. Error boundaries 4. Mobile optimization 5. Accessibility audit ## Notes - Start with static mock data, prepare for future API integration - Use Tailwind's JIT mode for optimal bundle size - Implement dark mode toggle (optional) - Add locale/language switcher placeholders - Consider adding Framer Motion for smooth animations - Use React Suspense for lazy loading - Implement proper form validation with clear error messages ## Success Criteria - Pixel-perfect match to https://www.dubizzle.com.bh/en/ layout and spacing - All interactions feel smooth (< 100ms response) - Mobile responsive on all screen sizes - Accessible (WCAG AA compliant) - Clean, maintainable code - Fast load times (< 2s initial load)