Master MERN Stack and Next.js : Build Real Full-Stack Apps

Set up authentication routes in the front end using react-router-dom, create login and register pages, and configure a private home route to navigate after login.

Design a two-block registration page in a two-column grid: a welcome content panel with primary background and branding, and a form panel with name, email, password, register button, and link.

Create a register form with full name, email, and password fields using a reusable entity form component, including validation rules, vertical layout, and a login link for the course.

Build and style a login form by duplicating the register form, implement mobile responsive view by hiding welcome content, and handle submission with on finish, validating email and password fields.

Set up back-end node server for mern charity app by creating a server folder, initializing npm, installing express, mongoose, dotenv, and nodemon, and prepare for MongoDB connection in next lecture.

Master MongoDB setup in a Node.js app by wiring a db config with mongoose, loading the database URL from .env, and exporting a connect function for startup.

Create a Mongoose user model with five fields—name, email (unique), password, isAdmin, and isActive—using timestamps and exporting the model for the users collection.

Create a user registration API in express, using routes/users route.js for post /register, check for existing users, then hash passwords with bcrypt js and save the new user.

Validate user existence, compare passwords with bcrypt, and generate a JWT that encodes the user id and email with a 24-hour expiry.

Configure the server and front end to connect the register API, post to /api/users/register, handle loading and errors, and verify new user records in the database.

This lecture explains authentication middleware that validates the front-end token from cookies, decodes the jwt, attaches the user to the request, and guards routes with unauthorized responses.

Protect private routes by checking the token in browser cookies and redirecting users to login or home based on authentication. Apply this with public and private layouts in the app.

Design a header with a project title and right-aligned user info, reveal menus on hover for users or admins, and implement logout by removing the token and navigating to login.

Fetch the current user in the private layout via an API call and store it in a Zustand global store for header access and dynamic admin or user menus.

Restrict admin routes from normal users by validating the current user, guarding admin paths, and displaying a not authorized message with a loader during data fetch.

Create a reusable page title component in src/components that accepts a title prop and applies styling across home and campaigns, with Lucid React icons and navigation to create campaign page.

Learn the campaign model for the MERN stack backend, detailing fields like name, description, organizer, target amount, start and end dates, category, media, and active flags. Prepare campaigns API routes.

Implement campaign api routes with create, read, update, delete using express and campaign model. Secure endpoints with authentication middleware; expose under /api/campaigns, returning campaigns sorted by created at.

Build a reusable campaign form for create and edit routes, including name, description, organizer, target amount, category, dates, and image uploads; implement routing and on-submit logic with a responsive grid.

Set up a Firebase account and project, configure a web app, install the Firebase SDK, and create a storage bucket with rules. Learn to upload images and retrieve their URLs.

Create a frontend helper that uploads multiple files to Firebase storage and returns their download urls. Implement uploads.ts with a function using ref, getStorage, uploadBytes, and getDownloadURL.

Save campaign by uploading files to Firebase and returning URLs on submit, then axios post to /campaigns/create with validation and error handling.

learn to implement table actions for campaigns by rendering delete and edit icons, wiring edit navigation to admin/campaign/edit/{id}, and styling with bordered action buttons.

Learn to implement the edit operation for campaigns: fetch and pre-populate the form with campaign data by id, manage images, and toggle between create and update flows.

Master the delete operation in campaigns CRUD across front end and back end, using axios delete, managing loading states, and refreshing data after successful removal in admin modules.

Populate real campaign data for a MERN stack crowdfunding app, manage admin campaigns, build the home and campaign pages, and generate test campaigns with AI prompts.

Fetches campaigns for the homepage, renders a responsive grid of cards with images, titles, and a collected amount vs target progress bar, and enables navigation to /campaign/:id.

Design and implement a campaign information page with a back button, title, image gallery, description, and a donation card that shows total donated, donations count, and a donate form.

Build the donations card for the campaign info page, show a progress bar of funds raised, collect amount and message, and open a payment modal on donate.

Implement the donation model for crud operations, including amount, message, campaign and user references, and a payment id linked to stripe payments to generate receipts.

Implement donation APIs in a MERN stack app with routes to create donations, get all donations, and get donations by campaign ID; update campaign totals and populate user data.