Next - ```markdown APPLICATION OVERVIEW This application is a multi-step registration form for a modeling agency, designed to collect detailed...
Generated Prompt
```markdown ## APPLICATION OVERVIEW This web application serves as a multi-step registration form for a modeling agency, aimed at collecting detailed information from aspiring models. It features a clean, minimalist design that enhances usability and accessibility, ensuring a smooth experience across various devices. ## CORE FEATURES 1. **Multi-step Navigation**: Users can easily progress through the registration process with distinct "Next" and "Previous" buttons, facilitating a user-friendly experience. 2. **Dynamic Inputs**: Users can add multiple entries for contact information and photo uploads, offering flexibility in their submissions. 3. **Mandatory Field Validation**: The application validates required fields in real-time, preventing users from progressing until all necessary information is provided. 4. **Photo Management**: Users can upload multiple portfolio photos, with the ability to preview and delete images before final submission. 5. **Responsive Design**: The layout adapts seamlessly to different screen sizes, ensuring accessibility on both mobile and desktop devices. 6. **Minimalist Aesthetic**: The design emphasizes simplicity and clarity, making it easy for users to navigate and complete the form. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - A clean and simple interface with a focus on usability and clarity, utilizing ample white space to avoid clutter. - **Color Mode**: Light theme featuring a soft color palette with dark text on light backgrounds, ensuring readability and a comforting visual experience. - **Layout**: A vertical flow structure, with each step distinctly separated by generous whitespace, creating a clear path for users as they navigate through the registration process. - **Typography**: Use a sans-serif font such as "Roboto" or "Open Sans" for body text to enhance readability. Headings should be bold with larger font sizes to establish a clear hierarchy. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for type safety and component-based architecture. - **Styling**: Tailwind CSS for efficient utility-first styling, allowing for rapid and responsive design. - **UI Components**: Utilize shadcn/ui components to maintain a consistent and modern look throughout the application. - **State Management**: Implement React's Context API or Redux for managing form state across multiple steps. ## IMPLEMENTATION STEPS 1. **Set Up the Project**: Initialize a new React project with TypeScript. Install Tailwind CSS and shadcn/ui components to start building the application. 2. **Create the Form Structure**: Develop the main form component that implements multi-step logic, using conditional rendering to display each step based on user navigation. 3. **Design Each Step**: Construct individual components for each registration step, ensuring to include input fields as specified. Apply Tailwind CSS classes to achieve the minimalist light theme. 4. **Implement Dynamic Inputs**: Create functions to enable users to add or remove dynamic input fields for contact numbers and photo uploads, ensuring flexibility in data entry. 5. **Add Validation Logic**: Integrate form validation using libraries such as Formik or React Hook Form to manage mandatory fields and ensure accurate data submission. 6. **Photo Management Features**: Develop a file upload component for photo submissions, including a preview feature that allows users to view and manage their uploaded images before final submission. ## USER EXPERIENCE Users will begin the registration process by entering their personal information in a clearly defined Step 1, with required fields prominently highlighted. As they advance through each step, real-time validation feedback will guide them, ensuring all mandatory fields are completed before proceeding. The dynamic input features will allow users to efficiently manage their contact numbers and portfolio photos. The minimalist light design will provide a visually pleasing and comfortable environment, supported by an intuitive navigation structure that leads them seamlessly through the registration process. ```
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!
