Fireship -  Next.js (v12.0) Firebase Full Course

Fireship - Next.js (v12.0) Firebase Full Course

Register & Get access to index

sqlt5Vk.png

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…

  • 👨‍🎤 Custom Firebase usernames
  • 📰 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

🤔 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 🤿. 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

You don't have permission to view the spoiler content. Log in or register now.
Author
joony786
Downloads
954
Views
5,648
First release
Last update
Rating
4.00 star(s) 1 ratings

More resources from joony786

Latest reviews

A bit outdated since firebase is now v9
joony786
joony786
then go an record it yourself