React Next.js Node API AWS - Build Scaling MERN Stack App

Initialize a node project and set up a clean next.js front end with dev, build, and start scripts. Create a basis folder landing page and run at localhost:2000.

Create a reusable layout component with a shared navigation bar for a Next.js app, rendering content via props.children and a map-driven nav list, with optional bootstrap styling.

Use next/head to inject the bootstrap cdn into a shared layout, enabling navigation and a styled content area for all pages. Create two pages to make navigation functional.

Create login and register pages and wire navigation with Next.js Link for seamless, no-reload routing via the pages folder. A top progress bar with Nabagesera appears in the next lecture.

Implement a navigation progress bar in a Next.js app by wiring a progress package to router events, handling start, complete, and error states for a responsive MERN stack interface.

Learn to load cyesis css from node modules in a Next.js project, using a customized next.config to enable the loader. Utilize a public folder for static assets and referenced styles.

Build the register page with a Bootstrap form for name, email, and password, manage input state with useState, handle changes, and submit to the backend to trigger email confirmation.

Set up a mern stack app with a client and a server folder, implement a simple mvc pattern, add token-based authentication, and enable email verification via a clickable link.

Set up an express server, install express and nodemon, create a register endpoint that responds with json, and run the app on a chosen port with automatic restarts.

Organize routes by creating dedicated router modules in separate folders, export them as modules, and apply as middleware with an API prefix for scalable Express routing.

Move registration logic from routes to a dedicated controller, export and import the register function, and refactor for cleaner server architecture, enabling future features like sending emails.

Create a user schema and model with name, email, and password, enforce validation, lowercase emails, hash passwords with salt, and include reset password link and timestamps via mongoose.

Learn to implement a user schema with a virtual field and methods to hash and encrypt passwords with salt, using getters, setters, and authenticate logic.

Install and apply npm packages as middleware for body parsing, validation, and token-based authentication with dotenv and jsonwebtoken in a MERN stack server, enabling front-end post requests via request.body.

Use Axios to post registration data from the client to the backend, sending name, email, and password in the request body, while configuring CORS to allow a specific origin.

Apply modular express validation to the user registration flow, enforcing email format and password length before hitting the controller, and handle errors with validation results and middleware.

Sign up for mongodb atlas, create a cluster and a user. Use the connection string as an environment variable to connect the app and enable email verification in next lecture.

Sign up for aws, using the 12‑month free tier and monitoring quotas. Create an iam user with programmatic access, manage access keys, verify emails in sandbox, and review pricing.

Learn how to configure AWS SES to send a test email from an admin address to a user, including setting up credentials, destinations, and a registration mail flow.

Send an activation email with a clickable link to complete registration. Validate the email, generate a signed token with user data, and use it to activate and save the user on the server.

Refactor the registration email flow by creating a helpers module with an email function that accepts email and token, and updates the front end with success or error alerts.

Manage signup outcomes by handling success and error messages, updating the user interface state, and displaying alert messages to users during registration with post requests and server responses.

Refactor the registration function to async/await, replacing promises with asynchronous API calls, using try/catch for errors, and updating state based on responses.

Learn to manage Next.js environment variables by using a public runtime config to export API and domain values, replacing hardcoded URLs for development and production.

Illustrate the client activation flow in Next.js: extract the token from the router, decode to reveal the username, and post to a server endpoint to activate the account.

Decode and verify activation tokens to securely register new users, ensuring unique emails, generating a username with shortid, and saving the user to the database after validation.

Build a server-side login flow: validate credentials, authenticate the user, generate a token, and return token plus user data to store in local storage or cookies.

Implement a front-end login in a Next.js app using email and password, manage login state, handle success and errors, and store tokens in cookies for client and server access.

Learn to create helper methods to store, retrieve, and remove token and user data in cookies and local storage, enabling authentication and header management for api requests.

Learn how to authenticate a user, save login data in the browser (cookies and local storage), and redirect after login while handling errors and updating the UI.

Learn to redirect logged-in users away from the login page by checking local stories for user data, then route admins to admin pages and subscribers to the user dashboard.

Learn to implement sign-out and conditional rendering by clearing cookies and local storage, show the username, and redirect to login, with admin or user dashboards based on roles.

Learn to secure a MERN app by implementing express jwt middleware to protect routes on both client and server, validate tokens, and enforce role-based access for admins and logged-in users.

Implement auth middleware in Express to read a decoded token, fetch the user from the database, and attach a profile to the request; add admin middleware to enforce admin access.

Create a server endpoint to fetch the user profile, protected by authentication and role-based middleware, returning non-sensitive fields while supporting admin and user routes in a Next.js app.

Explore server-side rendering with Next.js and getInitialProps to fetch data from the server, enhance seo, and implement user and admin access control via dedicated endpoints.

Implement server-side auth routes by reading tokens from cookies (client or server) to guard protected pages, and refactor into a reusable base for multi-route access restriction.

Learn to create withUser and withAdmin higher-order components to protect pages, using server-side checks, cookies, and redirects for unauthorized access while reusing logic across routes.

Learn to harden authentication with login and registration flows, implement forgot password and reset password via emailed token, and enable admin controls for categories and user-submitted links.

Implement forgot password and reset password flows on the server by validating emails, generating a reset token, emailing it, and updating the user record.

Implement a server-side reset password flow by verifying the token within 10 minutes, locating the user by link, updating with the new password, and testing via Postman.

Build a client-side forgot password flow that presents an email form, posts to the backend to request a reset token, and shows success or error messages based on the response.

Master the client-side reset password flow in a Next.js app by decoding the token from the router and submitting a new password to the server.

Create and manage categories using a MongoDB/Mongoose schema and model with slug, image, content, and a user reference for the creator, enabling admin-created categories and user submissions with image uploads.

Define and guard category routes with validation and admin authentication, implement CRUD controllers, plan image upload to S3 with resizing, and prepare for React client integration and Postman testing.

Create a new category using Postman with name and content, generate a slug, attach an image, and persist the category with the logged-in user.

Discover AWS S3 storage, bucket creation, and scalable file management, with IAM user policies and get, put, and delete object operations, plus cost insights for scalable app growth.

Learn to upload images to an AWS S3 bucket using form data with formidable, handling fields, files, and a unique key in a React application.

Builds a client-side admin create category page in a react/next.js app, implementing protected routes, a form for name and content with image upload, and posting to the API.

Render all categories on the home page with getInitialProps, fetch categories via the API, and display clickable cards; enable client-side image resizing and binary-data upload to the server.

Build a workflow to upload base64 images to S3 by extracting base64 data from data URLs, resizing on the fly, and integrating with category creation and image banners.

Resize images on the client with a React image file resizer, convert to base64, and upload to the backend in a React Next.js Node API AWS MERN stack app.

Replace a plain text area with a rich text editor in a Next.js app, preserving formatting and links, and associate saved categories with the posting user for later retrieval.

Create a link schema, attach each link to a category and user, and enable posting with category, type (free or paid), and medium (video or book) while tracking clicks.

Create and validate a links schema with express validation, build routes and controllers for create, read, update, and delete, and implement slug generation and authentication for posting links.

Create and save new links on the server, assign the posting user, include categories, and generate a slug. Read links via the API by categories, with error handling.

Implement a client-side create link feature by loading categories, handling title, type, and medium inputs, managing category checkboxes with dedicated handlers, and submitting a token-protected post request.

Build the front-end base for submitting a new link, including a form with title and category checkboxes, loading categories from the API, and handling success or error messages.

Build a link submission page in a two-column layout, creating input handlers for title and url, managing state, and conditionally rendering the submit button based on user login.

Implement a category selection form for submitting links by rendering scrollable categories as checkboxes, managing a selected category ids state, and toggling categories with a dedicated handler.

Build a submit link page that captures title, categories, type and medium with radio options, React state management, and backend submission with token headers.

Submit and manage new links by handling form submission, token retrieved from cookie, and API communication to create links with title, url, categories, type, and medium, with real-time UX feedback.

fetch a single category by slug on the server, return its details with associated links and populated user data, and implement limit/skip pagination with infinite scrolling.

design a single category page displaying category details and its links, with initial data loaded server-side using get initial props and optional infinite scrolling to fetch more links.

Create a single category page with rich text content and a full links list. Render links with React and manage data in state, including images and metadata.

Implement load more feature in a mern stack app by managing limit and skip, conditionally showing a bottom button, posting listing requests to fetch links, and appending them to results.

Implement a click-count feature for links in a MERN stack app by incrementing the link's clicks with Mongoose, via a put route, and returning the updated link to the client.

Increment link click counts on the client by sending put requests, then refresh the link list to reflect updated counts and implement auto-loading of additional links as you scroll.

Implement infinite scroll with rijad infinite scroll npm to load more posts as the user scrolls, using has more and size versus limit logic, and show a loading gif.