Build JeppeDevs – Premium Modding Platform Create a complete production-ready website called JeppeDevs.
Generated Prompt
```markdown ## APPLICATION OVERVIEW JeppeDevs is a premium modding platform designed to allow users to discover, download, and learn about high-quality game mods. This web application combines the professionalism of a software company with the functionality of a modern mod marketplace, providing a seamless experience for users seeking reliable gaming enhancements. ## CORE FEATURES 1. **User Authentication**: Secure login and admin authentication using Supabase, ensuring that only authorized personnel can manage content. 2. **Mod Browser**: A professional mod browser with real-time search, filtering options, and sorting features to help users find mods easily. 3. **Mod Details Page**: Every mod has its own dedicated page displaying comprehensive information, including installation guides, changelogs, and user reviews. 4. **Dynamic Content Management**: Admin dashboard for managing mods, news updates, and user messages, with a focus on user-friendly interfaces. 5. **Download Tracking**: Automatic increment of download counts for each mod, providing insights into popularity and usage. 6. **Guides and Documentation**: A dedicated section for user guides that includes step-by-step installation instructions, troubleshooting tips, and common errors. ## DESIGN SPECIFICATIONS - **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography - **Color Mode**: Light theme with dark text on light backgrounds - **Primary Color**: #1978E5 (accent for buttons, links, highlights) - **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements - **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs - **Layout**: The layout will feature a sticky top navigation bar, a full-screen hero section on the homepage, and organized sections for mods, downloads, guides, and updates, all designed with responsive design principles to ensure accessibility on various devices. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Not specifically required but can be implemented using React Context or Zustand if needed. ## IMPLEMENTATION STEPS 1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS for styling. 2. **Configure Supabase**: Set up Supabase for authentication, database management, and storage solutions; create necessary tables (Mods, News, ContactMessages, SiteStats). 3. **Design Layout**: Create the main layout structure using Tailwind CSS, ensuring responsiveness and adherence to the design specifications mentioned. 4. **Implement Authentication**: Set up secure authentication using Supabase Auth for both users and admins, ensuring protected routes for admin functionalities. 5. **Develop Core Features**: - Build the mod browser with search and filter functionalities. - Create dynamic mod detail pages that pull data from the Supabase database. - Implement the admin dashboard for managing mods and updates. 6. **Optimize Performance**: Focus on SEO optimization, fast loading times, and Lighthouse score improvements (aim for 95+). 7. **Testing**: Conduct thorough testing of all features to ensure functionality and security, particularly for user authentication and data management. 8. **Deployment**: Deploy the application on a suitable hosting platform, ensuring that Supabase services are properly integrated. ## USER EXPERIENCE Users will enjoy a clean and intuitive interface that allows them to navigate easily between different sections of the site. The mod browser will facilitate quick searches and filtering, while dynamic content ensures that users are always up-to-date with the latest mods and updates. The admin dashboard will provide seamless management capabilities for admins to keep the platform running smoothly. ```
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
