Password Generator [React - Next.js - Tailwind CSS - TypeScript]

What are you most proud of, and what would you do differently next time?

In general, I am happy how the solution turned out. I though this will be tops 1 hour to build, but it turned out there are some tricky parts which was very interesting to tackle.

Built with

• React / Next.js 14 / Typescript
• useCopyToClipboard custom hook
• Custom Range Slider
• Switch component from Shadcn/ui instead of the design checkbox
• Mobile first approach
• Tailwind CSS
• Responsive design with Mobile, Tablet & Desktop view

What challenges did you encounter, and how did you overcome them?

There are many excellent range slider components through the existing libraries but for practice I decided to build one from scratch. The tricky part to be honest was the styling. Also I have quite the Prop drilling in my code (instead of using context for state mgmt), but this was intentional so I can practice passing props while using typescript.

The logic for generating the password was also something I had to brainstorm a bit and do some googling and asking AI chatbots, but I think it turned out fine.

What specific areas of your project would you like help with?

Any and all feedbacks are welcome!

I would much appreciate any tips & tricks about:

• Improving my TypeScript usage