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.

LandingAdmin PanelLogin
Landing

Comments (0)

No comments yet. Be the first!

Architecture

No Services Diagrams Yet

Architecture diagrams will be automatically generated when the Project Manager creates tasks for your project.

Landing design preview
Landing: View Homepage
Login: Sign In
Admin Panel: View Dashboard
Admin Panel: Add New Firm
Admin Panel: Edit Firm
Admin Panel: Delete Firm
Admin Panel: Manage Links