sweet-website

byAditya Navale

Build a complete, modern prop firm comparison website similar to PropFirmMatch, designed for forex, futures, and crypto traders. IMPORTANT GOAL: The website must be beginner-friendly, easy to edit after deployment, and structured cleanly. I want to be able to change buttons, add firms, edit data, and update design easily without confusion. TECH STACK: * Use simple HTML, CSS, and JavaScript (preferred for simplicity) OR React (only if clean and simple) * Use Firebase (Firestore + Authentication) for database and login * Must be ready for deployment on Vercel * Avoid unnecessary complexity CORE FEATURES: 1. Prop Firm Listings: * Show firms in a responsive card layout * Each card includes: * Name * Price * Profit split * Max drawdown * “Buy Now” button (affiliate link, opens in new tab) 2. Search & Filters: * Live search bar * Filters: * Drawdown * Profit split * Price (optional) 3. Category Tabs (VERY IMPORTANT): * Add 3 main tabs at the top: * FOREX * FUTURES * CRYPTO (with “NEW” badge) * Tabs must be horizontally aligned and mobile responsive * Active tab should have glow or underline effect * Switching tabs must dynamically filter firms by category 4. Data Structure: * Each prop firm must have a category (forex, futures, crypto) * Only show firms based on selected tab 5. Compare System: * Allow users to select multiple firms * Show selected firms in a comparison table 6. Admin Panel: * Add new firms * Edit existing firms * Delete firms (optional) * Add/edit affiliate links easily 7. Review System: * Users can post reviews * Display reviews under firms 8. Authentication: * Simple login/signup with email/password * Use Firebase Authentication 9. Affiliate System: * Each firm must have a clickable affiliate link * Button opens link in a new tab EASY EDIT SYSTEM (VERY IMPORTANT): * Store all firm data in a simple JSON array OR Firebase collection * Clearly comment the code: * “EDIT HERE: Add new firms” * “EDIT HERE: Change button text” * “EDIT HERE: Change colors” * “EDIT HERE: Affiliate links” * Keep code clean and beginner-friendly * Avoid complex patterns DESIGN (PREMIUM FINTECH STYLE): * Dark background (#0f172a or #0b1220) * Primary color: blue (#2563eb) * Secondary color: lighter blue (#3b82f6) * Card background: #1e293b * Text: white (#ffffff) and gray (#94a3b8) UI STYLE: * Modern card-based layout * Glassmorphism effect (blur + transparency) * Soft shadows and subtle borders * Smooth hover effects (scale + glow) * Blue gradient buttons (#2563eb → #3b82f6) * Optional subtle purple/pink glow for highlights HEADER & NAVIGATION: * Clean top navigation * Include tabs (FOREX, FUTURES, CRYPTO) * Mobile responsive and smooth transitions SEARCH & FILTER UI: * Dark input fields * Blue focus border * Clean and minimal layout MOBILE OPTIMIZATION: * Fully responsive (mobile-first) * Tabs scrollable or properly spaced * Clean layout on small screens PERFORMANCE: * Fast loading * Lightweight code * No unnecessary libraries EXTRA FEATURES (if possible): * SEO-friendly structure (separate pages or dynamic routing) * Simple click tracking for affiliate links * Clean folder structure OUTPUT REQUIREMENTS: * Provide complete working code * Ensure no errors * Add clear comments for editing FINAL GOAL: Create a fully functional, scalable prop firm comparison platform that looks like a modern startup-level product, but is simple enough for a beginner to edit, manage, and scale easily.