Password Generator WebApp | React | TypeScript

Solution retrospective
What I’m most proud of:
- I discovered a better approach to password generation and successfully improved the implementation.
- I found a solution for styling a custom range input by conducting thorough research and adapting it to fit my needs.
What I would do differently next time:
- I would try to spend less time overthinking at the beginning. Instead, I would focus on completing the first implementation quickly, then take a short break before revisiting the project with fresh eyes to spot potential improvements.
Challenges I faced:
-
Password Generation Logic:
The most challenging part was designing a solution to generate passwords while handling various options, such as lowercase, uppercase, numbers, and symbols.
How I overcame it:
I came up with the idea of generating an array containing random characters for each setting. However, I spent some time researching how to toggle these options effectively, which helped me refine my approach. -
Custom Range Slider Styling:
Styling a custom range slider was quite difficult.
How I overcame it:
After conducting research, I found an article with a solution similar to what I needed. I adjusted the code to suit my project, which allowed me to style the slider successfully.
-
Code Review:
I believe feedback from more experienced developers is the best way to improve my skills and get closer to the job I’ve been dreaming of for so long. Please let me know if way that I was write a code is good enough for working as a developer, and how much time such a project should take according to the real life job? -
State Management:
I used a lot of states in my implementation. While this approach makes the code clear and understandable for me, I wonder if it's the best practice or if there’s a better way to handle it. I’d love to hear suggestions on improving state management in my project.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@DarkstarXDD
Hey nice solution. Couple of things i noted.
- You could use
word-break: break-all
on the password text. I see you are usingoverflow
on it, and it's currently causing a scrollbar to appear next to the password. You can remove the overflow and usebreak-all
instead. I think it will look better. - In the button's SVG you are using a property called
hanging
which i am not familiar with. However that is causing a weird result i am not sure how to explain but you can see it your self by tabbing into the button using the tab key. I think instead of hanging you may have wanted to useheight
. - Currently it seems there is no way for me to get a
Strong
strength password. Pushing the scrollbar to the very end and checking all 4 checkboxes i am still getting the strength asMedium
. You can either let the user chose more characters or tweak your conditions so that a 20 character password isStrong
. I feel like a password with 20 characters and all 4 of those options selected should definitely be marked asStrong
. - Currently the user can uncheck all 4 checkboxes and click the button. I think it's better if you displayed some error message when user tries to uncheck all 4 checkboxes. It's a bit weird when the button is clicked and an empty text is displayed on the password field since the user has unchecked all 4 options.
- Another small idea. I think it would have been better if you made it in a way that whenever the user changes a parameter a new password is generated and displayed, rather than user needing to click the button. This is just a preference thing as that is how i implemented my solution and i have seen other password generators like Lastpass and Bitwarden doing the same thing in their products.
- You could use
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord