Create prompt for creating password strengt checker
Generated Prompt
## APPLICATION OVERVIEW This application is a web-based password strength checker designed to help users create secure passwords. The primary purpose is to analyze user-inputted passwords and provide real-time feedback on their strength, encouraging better password practices and enhancing overall security. ## CORE FEATURES 1. **Real-Time Strength Analysis**: As users type their passwords, the app evaluates and displays strength indicators based on length, character variety, and common patterns. 2. **Guidance and Tips**: Provides users with actionable tips on how to improve their passwords, ensuring they meet best practices for security. 3. **Password Generator**: Includes a feature that allows users to generate random, secure passwords based on customizable criteria (length, character types). 4. **User-Friendly Interface**: A straightforward and intuitive design that ensures users can easily navigate the features without confusion. 5. **Accessibility Features**: Ensures that all users, including those with disabilities, can use the app effectively through keyboard navigation and screen reader compatibility. 6. **Responsive Design**: The application is optimized for various devices, ensuring a seamless experience whether accessed on desktop or mobile. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean, simple design with an emphasis on usability and a spacious layout that avoids clutter. - **Color Mode**: Light theme with dark text on light backgrounds for high readability and a clean aesthetic. Use a limited color palette with soft accents for interactive elements. - **Layout**: A centered layout with a large input field for password entry, flanked by strength indicators and tips. Use cards or sections to group related features and maintain visual organization. - **Typography**: Use a sans-serif font like Inter or Roboto for a modern feel, with varying weights to establish hierarchy (e.g., bold for headings, regular for body text). Maintain adequate line spacing for readability. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS for utility-first styling, allowing for rapid development and consistent design. - **UI Components**: Utilize shadcn/ui for pre-built components that maintain the minimalist design aesthetic. - **State Management**: Use React Context or a similar state management solution to manage the password input and validation state. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and integrate Tailwind CSS. 2. **Create Components**: - Build a `PasswordInput` component for user input. - Develop a `StrengthIndicator` component to visually represent password strength. - Create a `TipsSection` component that displays improvement suggestions. - Include a `PasswordGenerator` component that generates and displays random secure passwords. 3. **Implement Logic**: - Write functions to assess password strength based on criteria (length, character variety). - Connect the input field to the strength assessment logic for real-time feedback. 4. **Design the Layout**: Use Tailwind CSS to style components according to the specified design principles. 5. **Ensure Responsiveness**: Test the application on various screen sizes and adjust styles as necessary for optimal display. 6. **Accessibility Testing**: Check for keyboard navigation and screen reader compatibility to ensure all users can access the app. ## USER EXPERIENCE Users will be greeted with a clean interface featuring a prominent input field for entering passwords. As they type, the app provides immediate feedback on the strength of their password, with visual indicators changing in real time. Users will also see helpful tips alongside the strength indicator, guiding them in enhancing their password security. The password generator option will allow users to create strong passwords effortlessly, ensuring a user-friendly and secure experience. The overall flow will prioritize simplicity and clarity, making it easy for users to understand their password strength and improve it as needed.
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!
