Password generator app with Next.js, CSS Modules and Typescript

In this project, I created a password generator app using TypeScript, Next.js, and CSS modules. To make the app more organized, I divided it into several components such as "password output", "length slider", "neon checkbox", and "neon button". I also separated the functions responsible for generating passwords and determining their strength from the components and put them in utils ts files to make it easier for possible tests.

To make it easier to handle the UI detector component and the classes connected to it, I created a password strength enum. Additionally, I encapsulated some properties as React.ComponentPropsWithoutRef<"div"> and React.ComponentPropsWithoutRef<"button"> for better organization and management of the app.

One challenge I faced was trying to make the range input different colors before and after the thumb. After some experimentation, I found a solution by using a linear-gradient style and changing the width through TypeScript code.

I am always open to feedback and suggestions for improvement.