Ain't me in the photo. Just an Unsplash one...

As my next project, I decided to build a url-shortener. I Googled how other folks had done it and I started to read very complicated posts, which made me very confused. I decided to stop reading and plung into the code (like the one in the photo!). I put some thought on the architecture. I even draw some charts! Nothing too fancy, no worries. The architecture I went with is the follow, please give me feedback of any sort if you think I could do better!

1. User types a url client side.
2. I pass this url to the server in the body.
3. The server grabs the body and stores it in a row of the database alongside a randomly generated string of characters.
4. The server returns this random string to the client and it displays it back to the User (i.e. bit.ly/{whatever the random string}
5. Cool, now the User can go and post it in places. Once someone hits domain.whatever/{randomly generated string} the following happens.
6. domain.whatever is a React app. I use useEffect() and it has an API call to the server, passing the randomly generated string as url parameter.
7. The server grabs the parameter, looks it up in the database, fetches the real url, returns it to the client.
8. The client redirects from domain.whatever/{randomly generated string} to the full url that is returned from the server.

Voilà! Please, give me feedback. Thanks for reading!