Quiero que crees una web app llamada “FESG Value Platform – Early Access” (en español), con estilo enterprise minimalista y usando la...
Generated Prompt
```markdown ## APPLICATION OVERVIEW La "FESG Value Platform - Early Access" es una aplicación web diseñada para facilitar la gestión y evaluación de impacto ESG para empresas. Con un enfoque minimalista y profesional, la plataforma permite a los usuarios gestionar su caso único, desde la carga de documentación hasta la obtención de resultados, todo mientras se asegura una experiencia de usuario clara y efectiva. ## CORE FEATURES 1. **Autenticación Segura**: Integración de Supabase para gestionar el registro, inicio de sesión y recuperación de contraseña con autenticación por email y contraseña. 2. **Navegación Lateral Fija**: Una barra lateral que proporciona acceso constante a las secciones clave: Home, Inputs, Outputs, y Cuenta. 3. **Wizard de Inputs**: Un flujo de trabajo estructurado en 8 pasos que guía a los usuarios a través de la carga de información necesaria para la evaluación. 4. **Estados del Caso**: Visualización del progreso del caso único, con indicadores claros sobre el estado actual y el progreso de los inputs. 5. **Gestión de Documentación**: Capacidad de subir archivos y asignar tipos a cada documento, manteniendo un registro organizado de los uploads. 6. **Placeholder para Outputs**: Espacio reservado en la sección de outputs que informa a los usuarios que los resultados estarán disponibles al finalizar la evaluación. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalista - Diseño limpio y simple, con amplios espacios en blanco para una mayor claridad. La paleta de colores debe ser sobria, reflejando confianza y profesionalismo. - **Color Mode**: Tema claro con texto oscuro sobre fondos claros para mejorar la legibilidad. - **Layout**: - Barra lateral izquierda fija con iconos y texto para navegación. - Barra superior que muestra el nombre de la empresa, estado del caso y un indicador de guardado. - **Typography**: Tipografía moderna y legible, utilizando un tamaño de fuente adecuado para encabezados y cuerpo de texto, asegurando una jerarquía visual clara. ## TECHNICAL REQUIREMENTS - **Framework**: React con TypeScript. - **Styling**: Tailwind CSS para una estilización rápida y eficiente. - **UI Components**: shadcn/ui para componentes de interfaz de usuario. - **State Management**: Utilizar el contexto de React o Redux según sea necesario para el manejo del estado de la aplicación. ## IMPLEMENTATION STEPS 1. **Configuración de Supabase**: Crear la base de datos y las tablas necesarias según el modelo sugerido. Configurar autenticación y almacenamiento de archivos. 2. **Estructura del Proyecto**: Inicializar un nuevo proyecto de React con TypeScript y Tailwind CSS. Organizar las carpetas para componentes, páginas y servicios. 3. **Desarrollo de Rutas**: Implementar las rutas públicas y privadas utilizando React Router. Asegurarse de que las rutas privadas estén protegidas por la autenticación. 4. **Implementación de la Barra Lateral y Superior**: Diseñar y codificar la barra lateral y la barra superior, incluyendo la lógica para indicar el estado del caso y el indicador de guardado. 5. **Desarrollo del Wizard de Inputs**: Codificar el flujo de trabajo del wizard, asegurando la funcionalidad de autosave y el manejo de los estados de cada paso. 6. **Placeholder para Outputs**: Crear la estructura de la página de outputs que muestre el estado del caso y un mensaje informativo. 7. **Estilización y Pruebas**: Aplicar estilos utilizando Tailwind CSS, realizando pruebas de usabilidad y asegurando que la aplicación sea responsiva. ## USER EXPERIENCE Los usuarios comenzarán en la pantalla de inicio de sesión, donde podrán acceder a su cuenta o registrarse. Al iniciar sesión, serán llevados a la página principal que mostrará el progreso de su caso único. Desde allí, podrán navegar fácilmente a través de la barra lateral para completar los inputs necesarios, visualizando el estado del caso y recibiendo indicaciones claras sobre sus próximas acciones. Cada paso del wizard se presentará de manera amigable, garantizando que los usuarios puedan seguir el flujo sin complicaciones. ```
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!
