Discord for questions & answers: https://discord.gg/4vCRMyzgA5
GitHub: https://github.com/joschan21/breadit
Upstash Redis: https://upstash.com/?utm_source=Josh2
-- Features
Infinite scrolling for dynamically loading posts
Authentication using NextAuth & Google
Custom feed for authenticated users
Advanced caching using Upstash Redis
Optimistic updates for a great user experience
Modern data fetching using React-Query
A beautiful and highly functional post editor
Image uploads & link previews
Full comment functionality with nested replies
... and much more
To get the most out of this video I highly recommend that you follow along and learn these concepts in this hands-on approach. I'll also link additional resources in case you want to dive deeper into some concepts.
React Query in-depth:
https://www.youtube.com/watch?v=PmPkAAu_QF4&ab_channel=Joshtriedcoding
Parallel and intercepting routes:
https://www.youtube.com/watch?v=pTsmh36ZB8c
Routing and rendering in the new app router:
https://www.youtube.com/watch?v=Sbl04kOL1dM
Infinite scrolling in-depth:
https://www.youtube.com/watch?v=R1FG54FY-18
How to use the "FC" snippet I keep using in the video:
Follow the "getting started" instructions here https://github.com/joschan21/breadit/blob/master/README.md
Thanks to Code With Antonio for the thumbnail design inspiration! https://www.youtube.com/@codewithantonio
-- Chapters
0:00 Demo
5:07 Getting started
9:24 Building the Navbar
30:44 Authentication
1:20:15 Building a user-profile menu
1:37:35 Perfecting the authentication flow
1:53:50 Database modeling
2:10:00 Creating subreddits
2:59:33 Subreddit detail page
3:33:47 Joining and leaving subreddits
3:57:00 Creating posts (editor, image upload)
5:02:48 Displaying posts in a feed & infinite scrolling
5:51:25 Voting for posts
6:22:37 Advanced caching: Optimizing post performance
6:42:21 Creating an API for infinite scrolling
6:58:25 Custom feeds for logged in & logged out users
7:09:19 Creating a performance-optimized post detail page
7:37:50 Creating the comments section
8:10:48 Voting for comments
8:18:45 Replying to comments
8:42:54 Creating the search bar
9:05:47 Letting users change their username
9:33:16 Deployment to Vercel
9:40:05 Last tweaks and conclusion