Django and Next.js is a powerhouse combo that sets us up for incredible user interfaces with a reliable backend. In this course, we elevate the platform by introducing real-time collaboration features by using CKEditor. We also cover how to use Google Auth Platform so your users can login with Google with Django, Next.js, and any other tool you may need.
⭐️ Thanks to CKEditor (https://ckeditor.com/) partnering with us on this course!
💽 GitHub code: https://github.com/codingforentrepreneurs/google-docs-with-django-nextjs
Topics:
✅ Full-stack web development with Django and Next.js
✅ Setting up Django backend with production-ready configuration
✅ Configuring Next.js frontend for modern user experience
✅ PostgreSQL database setup via Docker Compose
✅ Complete Google OAuth implementation from scratch
✅ OAuth state and PKCE token generation and management
✅ Django caching for secure OAuth token handling
✅ Custom Django user model with email-first authentication
✅ User registration flows for both email and Google login
✅ Token verification and refresh mechanisms
✅ CKEditor integration for rich document editing
✅ Real-time collaboration with Django-based users via CKEditor
✅ TailwindCSS configuration with CKEditor
✅ AI assistance integration with custom adapters
✅ Multi-user real-time document collaboration
✅ JWT token signatures for secure user authentication
✅ API endpoints for user tokens and document management
‼️ Before you start ‼️
I recommend you know some of the following:
◦ Python – such as classes, functions, async/await, http requests, virtual env, pip
◦ Django basics – such as views, url routing, Django orm, migrations, auth, etc
◦ JavaScript and React – such as async/await, http requests, React hooks
This comprehensive course provides everything you need to build a production-ready Google-docs-like collaboration platform with modern authentication and real-time editing & collaboration features.
Chapters
00:00:00 Welcome to Google Docs with Next.js, Django & CKEditor
00:04:14 Getting started
00:10:57 Starting Django x Nextjs Integration
00:12:10 Django Backend Baseline Setup
00:16:51 Nextjs Frontend Setup
00:19:01 Postgres Database via Docker Compose
00:24:05 Register Users with Django & Next.js
00:29:27 We Need Google Auth
00:32:42 Mini Django Project for Google Login
00:35:44 Minimal Django Project Setup
00:39:25 Google Cloud and the Google Auth Platform
00:49:44 OAuth Flow + Django Views
00:53:53 Generate OAuth State and PKCE Tokes
00:56:23 OAuth Callback URL
01:00:00 Genereate the Google OAuth Login URL
01:08:05 Django Caching for OAuth State & PKCE
01:12:34 Finalize Login URL with Google Auth Client
01:19:13 Handle the Google OAuth Callback
01:27:40 Verify Callback Token
01:34:00 Create Django User from Google User
01:43:12 Scopes for Google OAuth
01:47:58 Finalize Django Login for Google User
01:52:28 Unlocking Django App Portability
01:58:12 Email-based User Model in Django
02:00:02 Before you replace the User model
02:09:03 Replace the Default User Model
02:16:12 Customizing the Custom User Model
02:21:59 Modify Next.js Login Form
02:26:53 Improved Login Flow from Django API
02:35:45 Sign Up Flow for Email-based Users
02:39:25 User Display Name
02:42:21 Google Login API Endpoints
02:50:01 Google Auth Client and Django Config
02:57:12 Next.js Google Login Button & Redirect
03:02:28 Handle the Google Callback in Next.js
03:09:14 Active vs Inactive Accounts
03:12:15 Verify User in Next.js with TokenFetcher
03:20:34 Perform Token Refresh
03:30:27 Documents App and Basic Model
03:35:45 Doc Model Schema with Django Ninja
03:38:14 API List View for User Documents
03:44:00 Caching to Speed Up Django QuerySets
03:50:01 List View for Docs in Next.js
03:56:45 Client Side Login Required with useSWR
04:01:14 Client-Side Docs Detail View
04:06:20 Dynamic URL Routing in Django Ninja
04:08:29 Get Document Detail Service
04:10:47 Exception Handling for Permissions and Not Found
04:19:00 API Endpoints for Updating Documents
04:24:11 Frontend Form to Update Document
04:36:10 Create Documents in Backend API & Frontend
04:46:55 Challenge: Create a Delete View
04:48:22 Intro to CKEditor
04:50:19 Install CKEditor in NextJS
04:57:43 Swap Textarea with CKEditor
05:01:27 Save CKEditor Contents to Database
05:07:24 Adding new features & the CKEditor Builder
05:11:26 Using TailwindCSS with CKEditor
05:15:42 Autosave with CKEditor
05:22:35 Adding Any Standard Plugin
05:24:52 Managing the CKEditor License Key
05:29:07 Using AI Assistant Plugin with a Custom Adapter
05:35:39 Proxied AI Responses with Django
05:45:28 Collaboration Basics with CKEditor
05:51:54 Multiple Users for the Django Documents Model
05:59:32 Creating the CKEditor User Token Payload
06:08:31 JWT Token Signature for CKEditor
06:15:54 Django Ninja API Endpoint for CKEditor User Tokens
06:18:35 CKEditor Loading our Custom JWT User Tokens
06:24:29 A final challenge
https://www.youtube.com/watch?v=OGCE3OUO4G8
#financialfreedomllc #businesstips #business #entrepreneur #businessowner #entrepreneurship #marketing #smallbusiness #businesscoach #digitalmarketing #success #entrepreneurlife #motivation #businessideas #businessgrowth #businesswoman #businessman #businessquotes #businessowners #businessstrategy #startup #businesslife #businessmindset #businessminded #entrepreneurs #businessadvice #entrepreneurmindset #marketingtips #onlinebusiness #branding