Building Google Docs with Python, JavaScript, CKEditor, Google Login, and more.

Video Description

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/?utm_campaign=devrel_cfe_course&utm_source=youtube&utm_medium=referral&utm_term=social) partnering with us! 💽 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