Fully functional Roblox-inspired website simulator using HTML, CSS, JavaScript and a backend where necessary.
Generated Prompt
```markdown ## APPLICATION OVERVIEW The project is a web application designed as a fan-made simulator of the Roblox website. It allows users to search for real Roblox player accounts using permitted public APIs, displaying their usernames, display names, avatars, and public profile information. The application will have a polished dark interface inspired by Roblox, while maintaining a minimalist design. ## CORE FEATURES 1. **User Search Functionality**: Integrate Roblox's public APIs to search for real Roblox accounts. Users can enter usernames to retrieve information. 2. **Profile Display**: Display the retrieved information including username, display name, avatar image, and public profile details in a user-friendly format. 3. **Partial Username Search**: Support searches with partial usernames and return multiple results when applicable. 4. **Error Handling**: Implement robust error handling for API requests to ensure a smooth user experience. 5. **Fan-Made Branding**: Clearly label the application as a fan-made simulator to avoid confusion with the official Roblox platform. ## 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 main layout consists of a header with navigation, a central search bar, a results section displaying user profiles in cards, and a footer with additional information. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui for consistent and reusable components - **State Management**: Use React's built-in context API or a state management library like Zustand if necessary. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and add required dependencies for Tailwind CSS and shadcn/ui. 2. **Create Layout Components**: Build header, footer, and main content components including a search bar and results display. 3. **Integrate Roblox API**: Implement API calls to fetch user data based on input from the search bar. 4. **Display User Data**: Create a card component to display user profile information and handle multiple search results with dynamic rendering. 5. **Implement Error Handling**: Add user-friendly error messages for API failures and invalid inputs. 6. **Style the Application**: Apply Tailwind CSS classes to achieve the minimalist design and ensure responsive behavior across devices. 7. **Testing**: Test the application for usability and functionality, ensuring all features work as expected. ## USER EXPERIENCE Users will be greeted with a clean and intuitive interface. They can easily search for Roblox usernames via a prominent search bar. Upon entering a username, the application will display relevant information in an organized manner. The design will prioritize user experience with a focus on simplicity and ease of navigation, while ensuring that any errors are handled gracefully to maintain engagement. ```
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!
