Overview

This app was made for Frontendmentor’s Guru level challenge. The challenge give us a figma desgin and design system to work with. This app is still not considered 100% finished yet by me, although all criterion of the challenge has been met. A lot of improvements can be done.

Techs used

I use next.js + trpc for the first time which turned out great.

• next.js
• planetscale
• tailwind
• prisma
• trpc

Some notable techs I use:

• react-hook-form. Handle form submission.
• next-auth. Handle auth with Google.
• headless-ui. Handle creating accessible components.

Lessons Learned

The hardest challenge for me was working with Trpc on the server. But, when I realize that it just an API handler built on top of Next.js api route, it made sense for me.

While building this app, I realized how hard it is to handle form submission that have a lot of different form elements. So, I reached for react-hook-form which handle form using uncontrolled component. That worked most of the time, but when there is a lot of component nesting, form types (e.g radio and checkbox), and 3rd party library. I learned to handle a mix of controlled and uncontrolled form components.

I also learn to setup a simple design system with tailwind and a responsive layout that changes layout often. Headless UI make my life easier on creating accessible components, although we must make adjusments and styling.

Conclusion

Although this app is still not perfect and have a lot of room for improvements, it become a stepping stone for me to learn tech that I’m not comfortable with. It’s definetly rewarding to breakout of comfort zone.