Um site de cubo magico com 4 separações, F2L, OLL, PLL e ZBLL, e que tenham varios algoritimos (editaveis) assim como as imagens (editaveis) e...
Generated Prompt
## APPLICATION OVERVIEW The project is a web application focused on providing users with a comprehensive resource for solving Rubik's Cube algorithms. It will feature sections dedicated to F2L, OLL, PLL, and ZBLL, allowing users to view and edit various algorithms and images. Additionally, the application will include an interactive 3D cube model that users can manipulate to visualize different cases. ## CORE FEATURES 1. **Algorithm Management**: Users can view, add, edit, and delete algorithms for each section (F2L, OLL, PLL, ZBLL). 2. **Image Uploads**: Users can upload and edit images related to each algorithm, enhancing visual understanding. 3. **Interactive 3D Cube**: A 3D representation of the Rubik's Cube that users can rotate and manipulate to visualize algorithms in action. 4. **Search and Filter**: Users can easily search for specific algorithms or filter them based on difficulty or type. 5. **Responsive Design**: The application will provide a seamless experience across various devices, ensuring accessibility for all users. ## 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 will feature a header with navigation, a central content area showcasing the algorithms, and a sidebar for additional tools and filters. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux or Context API (depending on complexity) ## IMPLEMENTATION STEPS 1. **Set up the project**: Initialize a new React project with TypeScript, install Tailwind CSS, and set up shadcn/ui for UI components. 2. **Create the layout structure**: Implement a header, sidebar, and main content area using Tailwind CSS for responsive design. 3. **Build the algorithm management feature**: Create components for displaying, adding, editing, and deleting algorithms. Use local state or Redux for state management. 4. **Implement image uploads**: Create an upload component that allows users to manage images associated with algorithms. 5. **Develop the interactive 3D cube**: Use a 3D library (like Three.js) to create a manipulatable cube that reflects the current algorithm state. 6. **Add search and filter functionality**: Implement search inputs and filter options to help users navigate the algorithms easily. 7. **Test the application**: Ensure all features work seamlessly across devices and fix any bugs. ## USER EXPERIENCE Users will start on a clean landing page with easy navigation to the main sections (F2L, OLL, PLL, ZBLL). They can click on any algorithm to see its details, edit it, or manipulate the 3D cube for better understanding. The search and filter functionalities will allow users to find algorithms quickly. The overall experience will be intuitive and responsive, making it easy for users of all levels to engage with the content.
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!
