iServer Project
Video Preview
Description
This project is a website all about uploading images, design inspired by imgbb.com. In this project I've implement third party auth using clerk, so what that means is that most page routes in the website are protected and the only way to access these protected routes are to authenticate with clerk. Once you do, you'll be redirected to your dashboard where you'll be able to upload images and then be able to get the links to those saved images to use them on websites or simply share them. You can delete your own images and delete your own account if you wish, however deleting your account consequently deletes all your images. The website is mobile responsive and was made with the purpose of understanding third party auth solutions, webhooks, and image uploading to a database.
Tech Used
For this project I mainly used Nextjs, Typescript, TailwindCSS, and shadcn. I also used uploadthing for image uploading, clerk for authentication, and mongodb as a database. The main logic of the website was done when a user makes an account with clerk, which then using webhooks would give our database the same data to make our own user which we could then use to associate images with that specific user and delete them and their images when they delete their account using our clerk auth. Doing that required creating a relatively simple serverless API, the project works as seen in the preview video, however sometimes for some unknown reasons the clerk authentication does not work for some people, I've gone on the clerk discord and had a developer check out my app, but they haven't had a problem signing up or logging in. Unfortunately my friends have had some problems signing up using my clerk auth, my best guess is because of some google security reasons, so in the future I will likely be making my own auth from scratch or using auth providers like Github and Google directly to guarantee working auth anywhere.
Key take away
The most crucial thing I've learned in this project are webhooks for sure. Before this project I never even knew webhooks exist, but now I understand their importance when working with third party app solutions. On a lesser note I gained a somewhat better understanding of how image uploading works, but I still feel as I need to do just another project with images to really nail it down, likely one where I just turn uploaded images into base64 strings and store that in a database, just spit balling here though. In any case I've also learned a bit more on auth and how third party solutions can be used, which while I do like, I feel as I should implement my own auth to have more control over it, which while some may see as a waste of time, I'm certain it'll be a good learning experience. In short, this project gave me a better understanding of webhooks, image uploading, and third party auth solutions.