URL shortening app (my first try with NextJS and TailwindCSS!)

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

• I'm proud I've built for the first time a project using NextJS app router.

• I'm glad I tried different approaches for data fetching and state management.

• It's good I practiced with TailwindCSS.

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

• The concept of server and client components is pretty new for me. I'm not sure I fully inderstood it but I practised.

• I was stuck trying to figure out how to submit a form with NextJS app router and then how to handle the state management. If I understood correctly, first I need to send a request from a client component (form) to a NextJS server component and then to an external API, so that everything goes through this NextJS layer (route.ts file).

• As for the state management, first I tried to save the data I got from the request to React Context (dev branch), then I tried Tanstack (react-query) (app-fetching-with-tanstack-query branch).

• Also, it was a challenge how to place a form between two sections - a white and a gray one. I added a display:relative and a negative margin to the form section.

• I'm also new to TailwindCSS but it looks quite intuitive.

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

• My main question to how to deal with the data fetching and state management in NextJS (app router). What's the best way for submitting a form with NextJS app router and for a state management nowadays? (for such a small app like this one and for bigger ones)?

• Is it a good idea in general to use NextJS app router?

• What's the best practice for a form validation? I couldn't add a "required" html attribute to react custom validation because it was showing an error (a red border around an input) when it was empty even if it was on initial render, before the user started typing something. In the end I was saving an input value to the useState and checking if (!url.trim()) { setError(emptyInputError) return }

• Also I more specific question: how to prevent a form height from jumping when an error message is shown (for example, when an input is empty)?

Thank you for your help!