E-Learning Marketplace with NodeJs API and React/NextJs

learn to set up a next.js react app from scratch by installing next, react, and react-dom, initializing npm, configuring dev scripts, and building a basic index page.

Create underscore app.js in a Next.js project to bootstrap CSS globally. Import Bootstrap CSS and Ant Design, then restart the dev server.

Create and organize CSS assets by adding a public/CSS folder with Styles.css and importing it into app.js, then style the jumbotron with square edges, white text, and a blue-to-black gradient.

Create login and register pages in the Next.js pages folder to enable root routes, then build and integrate a top navigation component for site-wide routing.

Build a responsive top navigation with Ant Design menu in a Next.js app, using Next.js link components, horizontal mode, and icons such as AppStoreOutlined, LoginOutlined, and UserAddOutlined.

Create a centered register page with a form that collects name, email, and password, sends those details to a backend, and saves the new user in the database.

Set up the backend by creating a server folder, initializing npm, installing core packages (express, mongoose, dotenv, nodemon, esm, json web token, bcrypt, morgan), and building server.js.

Organize api routes by creating a dedicated routes folder, using express router, exporting routers, and auto loading them with node fs to apply as middleware under the api prefix.

Learn to organize an API by introducing controllers, moving callback functions from roots to dedicated controller files, exporting and importing a register function, and updating routes from get to post.

Explore connecting a Node.js API to MongoDB using either MongoDB Atlas or local install, including cluster setup, IP whitelisting, database user, connection string, env mongo uri, and mongoose connection.

Learn how to connect a Node.js app to MongoDB using mongoose.connect, configure via env, handle warnings, and log success or errors.

Learn how to send user data from a frontend client to a backend using axios post, handle request bodies with express.json, and verify via the network tab.

Define a Mongoose user schema and model with name, email, and password fields, applying trim, required, unique constraints, and set defaults, roles, and Stripe-related fields for instructor and buyer workflows.

Hash the plain password with bcrypt by generating a salt and hashing, then compare the input password with the stored hash during login.

Register users by validating name and password, ensuring unique emails, hashing the password, saving the user to the database, and returning a JSON success or error response.

Implement global toast notifications in a Next.js React app using react-toastify, placing a toast container in App.js and handling success and error messages.

Implement a loading spinner in the register form by adding a loading state, conditionally rendering a sync outline icon on submit, and disabling the button during processing.

Manage Next.js environment variables, exposing public vars with NEXT_PUBLIC_ prefix, load from .env.local, and restart the server; add gitignore entries to exclude node_modules and .env.local files.

Implement a custom Next.js dev server for development mode, using express and http proxy middleware to proxy /api requests from 3000 to backend 8000 with http only cookies for authentication.

Enable reliable active navigation for login and register with next/link and a back-to-login link. Use React state and useEffect to reflect the path and keep the active link after refresh.

Create a login page for the e-learning marketplace using email and password, submit to a login endpoint, and manage user state with context and reducer in Next.js using httpOnly cookies.

Create a login endpoint that validates credentials, hashes passwords, issues a json web token via http-only cookie, and returns the user without the password.

Explore the login flow that returns a cookie and user data, clears cookies and data, and uses a context-based reducer to store a global token and user info in Next.js.

Learn to build a redux-like global state using context and reducer hooks, storing the logged-in user with login and logout actions and a provider-wrapped app.

Wrap the app with a context provider and access state via useContext. Dispatch login data to update the user state and store it in localStorage to persist after refresh.

Save user data to local storage on login, load it with useEffect, and redirect to the home page after dispatching to context, ensuring persistence across refreshes.

Implement a logout flow by clearing the token cookie, removing user data from local storage and context, and routing users to login after calling the backend /api/logout.

Conditionally render login and register links based on the user state, and show a dropdown with the user name and a logout option for logged-in users.

Redirects logged-in users away from login and register pages by checking the user state from context. Uses useEffect and router.push to send them to the home page on state changes.

Learn to handle expired tokens with axios interceptors by detecting 401 responses, logging out via /api/logout, clearing cookies, the frontend context, local storage, and redirecting to login.

Learn to protect routes with csrf protection for cookie-based authentication by implementing a csrf token endpoint, integrating csurf middleware and cookie-parser, and sending the token in axios requests.

Protects routes by verifying the token via a backend middleware and returns the current user data for the logged-in user, enabling access to the dashboard.

Create a protected front-end page for the logged-in user by fetching current user with axios in useEffect, using context, and revealing content only after authentication.

Create a wrapper route to protect pages, add a user dashboard link in the top nav dropdown, and redirect unauthenticated users using next router after a successful ok response.

Learn how to set up an AWS IAM user for your e-learning marketplace, including creating a separate user, enabling programmatic access, generating access keys, and attaching S3 and SES permissions.

Log in with an IAM user, switch from root, verify email addresses in AWS SES sandbox, and prepare for production by testing emails via a Node.js API route and credentials.

Install the AWS SDK, configure SES with access keys and region, and send a test email from Node.js using a params object with from, to, reply-to, and password reset link.

Implement a password reset workflow: users request a reset email, receive a code, enter it with a new password, and the server validates and updates the password.

Create a forgot password page in a Next.js app, post the email to /api/forgot-password, then reveal code and new password fields after success, with loading and redirect logged-in users.

Build a forgot password endpoint that validates the email, generates a short code with nano id, stores it in the user model, and sends a reset email.

Implement a client-side reset password flow by adding code and new password fields, toggling visibility with a success state, and wiring a conditional submit to a /api/reset-password endpoint.

Implement a reset password endpoint on the backend that validates email and reset code, hashes the new password, updates the user, clears the code, and returns a success response.

Implement Stripe connect for a marketplace, allocate 70% to instructors and 30% to the platform, with test mode payouts and client publishable key and server secret key.

Build a user dashboard with a sidebar navigation in a Next.js app, integrate a Stripe connect onboarding flow for instructors, and ensure logged-in users are redirected to the dashboard.

Show conditional navigation in a NodeJs API and React/NextJs marketplace by displaying create course for instructors and become instructor for others, with pages for each route and Stripe onboarding steps.

Create a become instructor page that requests a Stripe onboarding link from the backend, opens a new window for user onboarding, and manages loading and errors.

Create a backend endpoint to onboard instructors via Stripe Connect, generating an onboarding link, pre-filling email, and returning the URL for the frontend to open.

Learn Stripe onboarding for instructors, handle onboarding links and return url, and use useEffect to refresh backend data to enable instructor status.

Learn how the Stripe callback page uses useEffect to query the backend for updated account status after onboarding, with payment enabled to allow course creation.

Build a backend endpoint that retrieves a Stripe account status, validates charges enabled, updates the user’s stripe seller data, and grants the instructor role.

Dispatch updated user info to the context and persist it in local storage after the Stripe callback, then redirect to the instructor page.

Build a protected root wrapper for instructors by adding a current instructor endpoint, enforcing role-based access, and guarding instructor routes with 403 for unauthorized users.

Create an instructor protected route in the front end to restrict access to the instructor dashboard and course create by verifying the current instructor and rendering the instructor navigation.

Implement dynamic, active navigation by showing an instructor dashboard link to users with the instructor role and highlighting the current route in both top and user navigations.