Hey everyone!
Me again! You remember? The guy that takes an issue with "Travis, that's a bit much for one project"? Yeah him.
So what did I do this week? Well technically my assignment was just to create a single page app with React that I could use to add, edit, and delete reviews for a single user.....buuuuut...
I couldn't just sit right there.
I decided to make this a full stack app leveraging the nextjs full stack framework, prisma, trpc, and the wonderful tailwindcss!
Users can create, update, delete, and view not only their reviews but also the reviews of other users (well they can view other user reviews).
They are also able to maintain their session between logging in if they don't log out.
Users can also add bookmarks to movies/shows, and finally view the layout in a fully responsive application.
The user starts by being able to use their existing discord user account to log in. I use NextAuth to handle that as well as the discord client to set the user account!
You do admittedly have to generate a user client id and a user client id but you can do so from the discord application oauth options in their dev portal:
You give the app in discord the callback urls that you want to use when the user authorizes your app! The prisma adapter then takes that content and uses the account and user model to create both!
Each user has a series of values saved on it like bookmarks, reviews, sessions, as well as a string for their user profile image in app!
The app creates reviews via a post request made via react query that goes to a trpc route handler that uses the current user and the input data to map to another prisma model for a review!
The update path actually looks very similar to this as the logic is very similar, it just finds the review on the current prisma client that matches the id that gets passed as input, and updates the review and the comment with the data that was sent through!
Users can create bookmarks in a similar fashion!
One cool feature on the front end is the user has the ability to search through the current list of content with a search bar that I used a debouncing react technique to make sure it didn't render the ui too quickly (or more specifically on every key press).
Basically, I set a timeout such that is supposed to update the filtered data with the input after 500ms. That timeout is cleared (and function destroyed) on every key press actually, and maintains the state of the data in a closure until the user stops typing. Once the user lets that timeout clear then the data is filtered and the videos that match the query are displayed!
Hmm anyways if you want to see the rest of the code for yourself well here it is here
Alternatively if you want to see it in action, well I have the app live too here
And finally if you want to hear me rant about it for like 30 minutes... Well here it is too here
Anyways until next time,
Travis B
