Responsive Url Shortening App - Built with React (Vite)

Description

This was my first project using React. I recently completed Scrimba’s basic React course, and this was a great project to follow up with and practice everything I had learnt.

As well as meeting the requirements for the challenge, I also added an additional feature that allow users to delete any result from the list.

Questions

• I’d love some feedback on the organisation of the project, its component split, state management etc. As this is the first time creating a project in React I was not sure if I was following best practices etc.
• I found myself nesting a lot of flex containers, and wonder if this is an inefficient way of doing things.
• For the url form validation, I only utilised shrcodes built in error handling, but this is not very robust, as it essentially accepts any entry which has some characters split with a period. I want to in the future implement some better form validation, and I am curious if anyone has any specific advice when it comes to URL’s.
• I also added the svg’s directly in the JSX, to be able to work with them more easily, but find this to be very messy. I read that you can convert them to React components or even use a plugin such as Vite’s Plugin for SVGR. I’m wondering what people find to be the best way to work with SVG’s in React.

Of course any feedback at all is much appreciated, thanks :)