Next.js Firebase Full Course
You will build a full-stack Social Blogging Platform inspired by sites like DEV.to and Medium. Authors can create content under their custom username, then publish publicly with SEO-friendly rendering, while readers can heart or like posts in realtime. Featuring…
![👨🎤]( "Man singer :man_singer:")
Custom Firebase usernames![📰]( "Newspaper :newspaper:")
Bot-friendly content (SEO)- Advanced SSR, SSG, and ISR techniques
- Firestore realtime CRUD and data modeling
- Reactive forms with react-hook-form
- Image file uploads
- Realtime hearts
- Security & Deployment
Custom Firebase usernames
Bot-friendly content (SEO)Is this Course Right for Me?
This course is intermediate level and will challenge you to build an app that delivers high-performance and search engine visibility via server-side rendering. It assumes you have at least basic knowledge of web programming with familiarity of JavaScript, HTML, and CSS. It is fast-paced and similar to my style on YouTube, but far more in-depth and followed in a long linear format.
Test drive
Visit the demo app and give it a test drive before you enroll.
NEXTFIRE LIVE DEMO
When was the course last updated?
Updated Oct 27th, 2021 Next v12.0
How do I enroll?
The first few videos are free, so just dive in . Decryption Key “R3yzcN5Hpna4lsBR1lX9Cg” When you reach a paid module, you will be asked to pay for a single course or upgrade to PRO.
Chapters
Prerequisites
1 READMEWatch this video before starting the course!
2 React BasicsLearn the fundamentals of React.js and reactive UI development
3 Firebase BasicsLearn the fundamentals of Firebase Authentication, Firestore, and Storage
4 Next.js BasicsLearn the fundamentals of Next.js and server-side rendering
App
5 Technical OverviewBlueprint and technical decisions behind the app
6 Next.js SetupSetup a Next.js app and explore the file system
7 TypeScriptSetup Next.js with TypeScript (optional)
8 Firebase SetupInstall and configure Firebase in a Next.js project
9 RoutingManage dynamic routing and links in Next.js
10 LoaderCreate a loading spinner to manage loading states across the app
11 NavbarCreate a dynamic navigation bar with React
12 ToastUse react-hot-toast to trigger animated toast messages
Users
13 Auth IntroTechnical overview of Firebase Auth with custom usernames
14 Google SignInAuthenticate via OAuth with Google SignIn
15 Auth ContextManage the global auth state with the React Context API
16 Auth HookJoin Firestore data to the current user with a custom react hook
17 Custom UsernamesAdd custom usernames to Firebase users and asynchronously validate uniqueness
SSR
18 SSR & SEO in NextTechnical overview of server-side rendering and SEO
19 Data ModelHow to model data relationships between users, posts, and hearts
20 SSR User Profile PageImplement server-side rendering to fetch data on the server
21 SSR + Paginated Home Page FeedRender a feed of the latest posts with a collectionGroup query
22 ISR Incremental Static RegenerationUse incremental static regeneration (ISR) to rebuild pages on the fly
23 Realtime Data HydrationTransition or hydrate server-rendered content to a realtime stream of data from Firestore
24 Custom 404 PageRender a custom 404 page for dynamic pages that do not exist.
25 Metatags for SEOGenerate dynamic metatags for search engine optimization and social linkbots
CRUD Features
26 Admin PagesCreate an AuthCheck component to render content for signed-in users
27 Create Data with FirestoreCreate a new post document in Firestore with a custom slug ID
28 Post Editing FormUse react-hook-forms to create a form to edit posts in markdown
29 Form ValidationAdd form validation with react-hook-forms
30 Image UploadsCreate an image file uploader with Firebase storage
Hearts
31 Hearts, Likes, ClapsCreate a many-to-many relationship where users can heart many posts
Deploy
32 Backend SecurityUse Firestore Rules to ensure features are secure across the entire stack
33 Vercel DeploymentDeploy the app with continuous integration on Vercel
34 Firebase DeploymentDeploy the app to Firebase hosting
Source:
https://mega.nz/folder/FEEnXYJC
(Descryption Key on description find it by yourself)
