Hey y'all!

So I might have forgotten that I actually had 1 more project to go before my final project aaaaand started that before doing this one!

 I wanted to slap something together really quickly and I took some inspiration from the youtube "add to playlist" button to kinda build this!

 The idea for this application is that a user can search for existing Github users, and choose to add them to lists that are stored in a Postgresql database that's tied to their specific user account.

The app uses the next.js framework for a fullstack application, typescript for type safety (of course, drink that punch y'all), tailwind and headless ui for design components and styling, axios for api requests, and react query for state management and a query wrapper!

I kinda want to take a little time to explain my thought process throughout this app so bear with me because this might take a little bit! 

First of all, the way I create a user is via a authentication library known as NextAuth.

This library provides to you automatic session management and callbacks that you can call when a user tries to log in, as well as prebuilt options for logging in with different authentication providers. 

I decided to go with a really common provider and chose their prebuilt Login with Google option. 

In order to accomplish that, you need to first create the app in the dev console that google provides here. Basically all you need to do is create an app, configure the authentication screen which allows you to customize the screen users will see when they try to access your app with like a specific name and logo. 

Then once you've done that you can generate an OAuthClientID, give the console your callback urls, save the client/secret in your environment variables (this is a file in the project that will look like .env and something you can set up in whatever way you decide to deploy). 

All of ^ those instructions are available in the documentation for the entire list of auth providers that nextauth has! 

Once a user has logged in then a user account is created on them with a few valuable pieces of data: 

For me I decided to use the Prisma ORM to build up models for my tables as well as map out any relationships like you can see above^ 

Every user contains important information about their account, but the primary one for the functionality of the app is the "lists" property! 

That is basically an array of list models which contain a few valuable pieces of data! 

Each list contains a title, description and a list of strings for the github user urls that are stored within! 

I use TRPC for my backend routing and also mapping to data and each list is associated with a specific user, so if I wanted to actually update the data on this list then all I need to do is send the ID to my trpc route as a parameter, get that list by it's id, and finally update that list with whatever values I wanted to do! 

This is the implementation of essentially how I would add a link to an existing list of links! 

I first get the existing list by its id, check to see if the link already exists (if it does I return early with a guard clause), and append that to the end of a list that has the current github users, then update the list in the database with that new list! If I wanted to update the title or description of the list then I would do something very similar except skipping the array stuff and directly updating the values! 

If say I wanted to do the opposite and remove a link from the list: 

I would do something similar and get the list by it's id, run a filter function on the array of urls with my input link, and update the list with the new filtered array! 

Now if I want to get all lists that a user has, that's simple too, I just use the user on the session that gets passed, grab the lists that are stored on that table, and return the full array of lists to the user! 

For some of these you'll see a z.string() in the input() handler! That's just a type validating library called zod (no not the angry kryptonian). It's super for things like typing inputs and validating inputs even on the front end with libraries like react hook form! 

I could go over the front end implementation too in this loooong post but I mostly wanted to go over the crud operations for my backend with this! But you can check out the youtube video below! 

 The app is hosted through Vercel here.

And the code can be found here.

Let me know what everyone thinks!

Until next time! Onwards and upwards!

Travis B.