Password Generator App w/React

Community feedback

• 

  P

  Nishanth Venkatesan•1,030

  @nishanth1596

  Posted 5 months ago

  Hi @Minamakhlouf Great work, I learnt how to style input slider by going through your code. I was really struggling to style it propely and just used tailwind inbuilt method to style it. Though it didn't come like in the design.

  I have a few suggestions that might further improve your code:

  1.CSS Modules Naming: I see you are using css module like this

  <section className={styles["password-generator"]}>
  ...
  </section>
  

  You can consider defining styles in camelCase instead:

  .passwordGenerator{
    max-width: 540px;
    margin: 0 auto;
  }
  

  And then use it as:

  <section className={styles.passwordGenerator}>
  ...
  </section>
  

  This is just a suggestion in case you're not already aware of this approach!

  2.Code Organization: To keep your code clean and modular, you might consider creating a separate file for the password generation logic and then importing it inside the handleSubmit function. This would enhance readability and maintainability.

  3.Fixing class Instead of className: In the PasswordStrength component, I noticed that you’ve used class instead of className. Keeping the browser’s developer console and VS Code’s built-in error detection tools open while working can help catch such issues immediately.

  4.Project Structure: As a best practice, it's generally recommended to place the components folder inside the src directory. This helps maintain a clear distinction between source code and build-related files.

  Overall, you've done a fantastic job! Keep up the great work, and I look forward to seeing more of your projects. 🚀

  Regards, Nishanth

  00