Vamos a crear el MVP de un Catalogo Digital para servicios de streaming y software, y luego podremos expandir el sistema con pedidos en línea,...
Generated Prompt
```markdown ## APPLICATION OVERVIEW This project aims to develop a web application for a Digital Catalog that allows administrators to manage streaming and software services easily. Clients can view the catalog without signing in, ensuring a simple and organized experience for browsing various categories of services. ## CORE FEATURES 1. **Admin Login Screen**: A secure login interface for administrators to access the management panel with email and password authentication. 2. **Admin Panel**: A dashboard where admins can manage categories and items in the catalog, including adding, editing, and deleting entries. 3. **Category Management**: Admins can create and manage service categories (e.g., streaming, software) with options for descriptions and display order. 4. **Item Management**: Admins can add and edit items in the catalog, including details like service name, short description, price, category, image, and status (active/inactive). 5. **Public Catalog View**: Clients can access a visually appealing catalog of services, organized by categories, without needing to log in. 6. **Responsive Design**: The application is designed to be mobile-friendly, ensuring a seamless experience on all devices. ## 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 fixed header with the business name, a sidebar for navigation in the admin panel, and a clean grid display for the public catalog with categories and items in card format. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Not explicitly required but can use React Context or Redux if needed for managing global state. ## IMPLEMENTATION STEPS 1. **Set Up the React Project**: Initialize a new React project with TypeScript and install necessary dependencies (React Router, Tailwind CSS, etc.). 2. **Create the Login Component**: Design a simple login form for the admin with validation and redirect logic. 3. **Develop the Admin Panel**: Build the admin dashboard with components for category and item management (CRUD operations). 4. **Implement Category Management**: Create forms and tables for adding/editing categories and displaying the list of existing categories. 5. **Build Item Management**: Develop similar functionality for items in the catalog with appropriate fields and controls. 6. **Design the Public Catalog View**: Create the UI for the public-facing catalog, ensuring it displays items in an organized manner with responsive design. 7. **Add Routing**: Set up React Router for navigation between the login, admin panel, and public catalog pages. 8. **Test the Application**: Conduct thorough testing to ensure all features work correctly and the user experience is smooth across devices. ## USER EXPERIENCE Key user interactions include the admin logging in to access the management panel, where they can easily manage categories and items. Clients can navigate the public catalog through a simple interface with categories and product cards, ensuring an intuitive browsing experience. The application will focus on providing clear visual cues and responsive elements to enhance usability. ```
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!
