Responsive sign up form with CSS Grid and Zod validation

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

Proud of:

• I used the Zod schema-based validation library. Even if this project does not necessarily need this complexity, I wanted to get experience with it.
• I implemented validation both on submission and on lost focus as well to enhance user experience.
• I wrote unit tests for more complex scenarios than before.

Would I do differently:

• Next time, I will think ahead about how to implement the layout. In this project, I started with css flex, but then I chose css grid to prevent glitches in the responsive design.

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

Next.js assumes the application will be served from the root of a domain (e.g. mydomain.com/) and its routing and asset handling are configured accordingly. Github Pages, however will host them from a subpath in the format <account_name>.github.io/<repository_name>/. I found the tutorials and documentations on the internet controversial, but in the end, I believe I found a good solution to the problem while I also learned a lot about the next.js build process and configuration.

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

I found a solution for preventing replacing the subpath manually on css url()s when hosting this Next.js project on Github Pages myself. (See the end of the readme section of "Next.js static assets on Github Pages") I am very curious if this solution has any downside that I do not see for now.