React Next.js Full Stack Multi User Blogging Platform

Create a navigation theme toggle that uses a context to switch between light and dark modes, with mounting behavior and local storage persistence.

Design a responsive navigation bar for a React multi-user blogging platform, using bootstrap classes, Next Link, and a theme toggle, with home, write a blog, login, and register links.

Connect your app to MongoDB Atlas by creating a project and a free cluster, configuring a database user and IP access, and copying the MongoDB native driver connection string.

Connect your Next.js app to MongoDB by creating a utils/db_connect.js that uses mongoose, checks existing connections, reads the db_uri from environment variables, and exports a serverless-friendly connect function.

Learn how to manage env variables in next.js by using a config file, securing secrets with gitignore, and handling development and production api URLs for vercel deployments.

Learn how to build login and registration with next auth, and create a user model using mongoose, enforcing unique email, roles, image url, and a reset code with expiry.

Create a register API endpoint in a Next.js app, hashing passwords with bcrypt and storing users in MongoDB through a serverless API route, with proper request handling and error responses.

Build a register page in a Next.js app, implement react hot toast for error messages, center the form with bootstrap, and manage client-side state and routing.

Build a register form for the multi user blogging platform using controlled inputs for name, email, and password, with dynamic loading state and validation to disable the submit button.

Build a client-side registration form that collects name, email, and password, posts to api/register with fetch, handles loading and errors with toast, and redirects to login on success.

Learn to implement a login system with next-auth in a Next.js app, installing next-auth and building a login page with email and password. Handle sign-in with toast and redirects.

Set up next auth with a session-based credentials provider for email and password login, using bcrypt to verify against the user model, NEXTAUTH_SECRET, and the api route for sign-in.

Create a loading.js file inside the app directory in Nexus 13 to show a centered 'loading' message during page navigation, styled with bootstrap for clarity.

Create a custom 404 not found page by adding a not found.js file in the app root to replace the default error, showcasing a simple display for nonexistent routes.

Set up next auth middleware to protect the user dashboard, guarding all dashboard routes so only logged-in users can access dashboard/user pages, with proper config and redirects.

Redirect users back to their intended page after login by extracting a callback URL from the URL search params using next navigation.

Implement NextAuth Google login by obtaining a Google client ID and secret from the Google Developer Console, and configure redirect URIs in the setup.

Integrate google sign-in in a Next.js app by adding the google provider, configuring client id and secret from env, and creating a sign-in button to save users.

Use auth callbacks to save Google login users in the database by checking email, creating a new user with name and image when needed, and returning true.

Expose user role from the database in a Next.js app using next-auth, JWT, and session updates so the frontend can access role, email, and fields for social and email logins.

Implement role based navigation for a multi user blogging platform by mapping and filtering user roles (author, admin) to show corresponding links and dashboards, while hiding the subscriber role.

Create an admin dashboard with a dedicated admin layout and navigation, set up a protected admin root, and build an admin dashboard page for a multi-user blogging platform.

Implement role-based protection for admin routes using NextAuth middleware, guarding dashboard and API routes, redirecting non-admin users to home and validating roles via token.

Deploy a multi-user blog project to vercel via command line, sign up with github, import from a git repository, and configure production URLs and environment settings.

Deploy and test your live app and fix Google sign-in by updating the production callback URL in the Google Developer Console, then verify Google login now works.

Protect author routes by implementing middleware-based access control, configure author CRUD paths, and guide authors through blog creation, updating, and deletion.

Master markdown editing with live preview, code highlighting, and image uploads in the blog form, featuring md render and light/dark mode for an engaging multi user platform.

Implement a dark mode editor by toggling themes and applying custom CSS. Export the editor CSS to a module and inject it with useEffect on theme changes.

Preserve blog title and content on page reload by saving title and markdown to local storage with useEffect, loading them on first mount and updating storage as the user types.