Next.js and Appwrite Masterclass - Build fullstack projects

Learn to build a complete authentication UI in Next.js and Appwrite by replicating the register design across login, forgot password, and reset password pages, with navigation between flows.

Create an appwrite account, set up an organization, and create a web platform project for a Next.js app. Configure appwrite authentication using a project ID in environment variables.

Implement user registration using Appwrite email/password authentication, creating an account with generated id, and handle success and errors with React Hot Toast while managing loading to prevent duplicate submissions.

Extend the registration flow by storing extra user attributes in the Appwrite users collection, linked to the user id, with fields like name, email, and profile picture URL.

Learn to implement user login with email and password using Appwrite authentication, creating an email password session, handling loading states, and routing to the dashboard on success.

Fetches the logged-in user from Appwrite by combining authentication data with a users collection query, retrieves email and name, and builds a final user object.

Display the logged-in user information and implement logout in a Next.js app using Appwrite, including defining a user interface, loading states, and redirecting to login after logout.

Build secure fullstack flows with Next.js middleware by configuring public and private routes, authenticating via cookies, and redirecting users to the dashboard or login as needed.

Build a private-route layout with a header showing project title and logged-in user, plus a hamburger menu for modules; implement layout provider, header, and sidebar with public versus private routing.

Add a sidebar overlay to a private routes layout using the sheet component in a Next.js and Appwrite fullstack project, implementing menu items, active highlighting, and routing.

Design the spinner UI for async tasks, replacing loading text with a rounded, animated spinner built in the components UI and tested in VS Code.

Learn to implement email verification for logged-in users in a Next.js and Appwrite fullstack app by sending verification links, checking status, and rendering a verify email flow.

Activate the user account by processing the email verification link with user id and secret through Appwrite, updating verification, then verify the email to protect access to app content.

Build forgot password and reset password flows with Appwrite's account.createRecovery, sending a reset link to the user email and routing to the reset page for password update.

Facilitate a reset password flow by sending a reset link, handling url parameters, calling update recovery, validating passwords, and navigating to the login page on success.

Learn to fetch the logged in user data and store it in a global Zustand store, enabling profile updates and password changes across the app.

Builds the profile page user interface as a responsive grid, displaying the user image, name, and key properties like email and created/updated timestamps, with dayjs formatting and profile actions.

Create a modal popup dialog for updating the user profile, featuring a name input and a profile picture file picker, with a live preview and cancel/save actions.

Learn to implement fullstack profile updates in a Next.js and Appwrite project by uploading a profile picture to Appwrite storage, retrieving its URL, and updating authentication name and user document.

Build a change password feature with a dialog-based UI, capturing old, new, and confirm passwords, performing validation, and calling the update password function.

Build a simple expense tracker with Next.js and appwrite, implementing authentication, database, and storage, and adding, displaying, editing, and deleting transactions with queries, indexing, filters, reports, and storage bucket management.

Set up a fullstack expense tracker project by bootstrapping a Next.js app, installing npm modules, configuring tailwind and appwrite, and aligning database, storage, and env variables for development.

Set up a transactions module by creating a transactions collection and schema (user id, name, type, category, amount, date); reuse a form for new and edit, auto-fill user id.

Create a dynamic transaction form UI in a Next.js and Appwrite project, with a grid layout, inputs for name, amount, date, and description, and selects for type and category.

Implement transaction creation in a Next.js app using Appwrite by creating a transactions service, wiring add new transaction with user id, loading state, and navigation to the transactions route.

Display the logged-in user's transactions in a table, using shard key and table components, with columns for name, date, category, type, and amount plus edit and delete actions.

Implement the edit transaction flow by fetching a transaction by id, populating the form with initial values from the server component, and updating the document via the edit service.

Implement a delete transaction function that removes a transaction by id via a delete document call and returns 'transaction deleted successfully', then refresh the list and show a success toast.

Build a transaction filters UI with type, category, and date using select and input fields, wired through a TransactionFilters component to update and apply filters.

Implement dynamic filters for the transactions table with Appwrite query. Extend the get transactions service to accept a filters object, apply non-empty keys, and reset to show unfiltered data.