MERN 2025 Edition - MongoDB, Express, React and NodeJS

Maximize productivity in VS Code by using a snippets extension to scaffold React components, configure auto imports, and apply Prettier formatting with Emmet, plus tweak settings.json for React 17.

Launch a new React app using Vite as a faster alternative to Create React App, delivering a smoother dev experience with instant results, faster bundling, flexible configuration, and extensible plugins.

install and scaffold a vite react project, choose a template, and create a client frontend using npm create vite@latest with the react template, while verifying node and npm versions.

Explore the vite folder structure, including public and src, and compare it to create-react-app. Install dependencies with npm install and run the dev server with npm run dev.

Remove boilerplate by cleaning index and deleting app.css, and wipe the jsx to create a new app component with snippets and render a heading. Then gather assets for the project.

Obtain assets from the MERN job fi version two GitHub repo and copy the assets folder into the client source. Note env variables for spin-up and Readme basics.

Set up global CSS for the MERN project using styled components, importing index.css with CSS variables under the route selector to speed development and reduce repetitive styling.

Set up a project title and favicon by placing favicon.ico in the public folder and updating the index.html to reference it.

Install all front-end libraries (optional) with specific versions from the readme, use the Visual Studio Code integrated terminal to run the setup command, and spin up the server for routing.

Set up a multi-page MERN app with the latest React Router 6.4, using loaders to preload data and actions to handle form submissions, with less global state.

Install npm i react-router-dom, then configure createBrowserRouter with RouterProvider in app.js to map home and about routes to components.

Create a dedicated pages directory of React components, set up a boilerplate for all pages, and initialize an index.js to wire the home layout and imports in app.jsx.

Set up index.js to export all pages from the pages folder and use named imports in app.jsx. Configure routes for home, landing, register, login, dashboard, and error pages.

Use the link component from react router dom to navigate between internal pages like register and login with fast client-side routing. Remember to use an anchor tag for external links.

Master nested routes in React Router by designing a home parent with child routes, rendering via an outlet, using an index page for default content with relative paths.

Set up a global 404 error page with React Router, using the error element and useRouteError to display status and navigate back home, while planning for other errors.

Style components with styled components, a css-in-js approach that keeps styles and logic in one file and uses auto-generated unique classes to avoid collisions.

Style a component with styled components by creating a wrapper and using tag template literals to apply red background and white heading, and style the content area without affecting logic.

Design a landing page for a MERN app with a logo, heading, description, register and login links, and a demo user option, plus optional CSS via a shared wrapper.

Explore responsive landing page styling with styled components, CSS variables, and global classes; implement a 2-column layout, hide the image on small screens, and switch at 992px.

Create a reusable logo component in a MERN stack project, organize a components folder with index exports, and integrate the logo into the landing page via proper imports.

Explore logo creation in Figma, noting that Figma usage isn’t covered in this course. Customize undraw.co images with your primary color, and choose SVG for transparency or PNG for backgrounds.

Build a robust error page in JSX for a MERN app, handling 404 and other errors with conditional rendering, a not-found image, and a dashboard link.

Create an error page styled with CSS: center content in a full-height flex container, limit image width to 90% with a 600px max, and apply typographic spacing and color cues.

Build the register page by scaffolding a basic form inside a wrapper, using a form component from React Router Dom, with a single input, label, and submit button.

Create a reusable FormRow component to manage register form inputs in a MERN app. Pass props for type, name, label text, and default value to keep the form scalable.

Build a login page in a MERN app by reusing a form component, wiring logo and email and password fields, and adding submit and demo actions with optional CSS.

Set up a shared login and register CSS wrapper with 100% viewport height, a centered logo, and a 400px form with a top border in the primary color.

Set up the dashboard by configuring the dashboard layout with children routes in App.jsx, importing add job, stats, all jobs, profile, and admin pages, and wiring an outlet.

create a responsive dashboard layout with grid, starting in a one-column setup and big sidebar on large screens, centering 90% width content with 2rem padding and 992px media query.

Set up global dashboard state in React by defining user, sidebar visibility, and dark theme values, creating a dashboard context, provider, and placeholder handlers.

Explore the React icons library, install and import icons as components from libraries, and implement a home icon in a nav bar using Font Awesome in a MERN 2025 project.

Learn to build a responsive navbar that toggles both small and big sidebars based on screen size, with logo, text, theme toggle, and logout.

Configure a responsive navigation bar with flexbox, center the nav center, apply a subtle shadow and dark-mode background, and implement a 992px breakpoint with sticky top positioning.

Set up a reusable links data module for both sidebars by defining an array of objects with text, path, and icon, then import and render it across components.

Develop a small sidebar component with a show/hide container and overlay, a close button, a header logo, and a navigable link list from links array using NavLink, closing on navigation.

Build a responsive sidebar in a MERN app by toggling the show sidebar state via context, hiding on big screens, and highlighting active links with React Router end prop.

Learn to build a responsive small sidebar with CSS, hiding at 992px using media queries, overlay background, and a show-sidebar toggle class for interactive display.

Create a separate nav links component and reuse it in both sidebars, importing links, React Router DOM, and the dashboard context to toggle the sidebar.

Enable a big sidebar by wiring imports, logo, and nav links to the dashboard context, toggling show sidebar for responsive display using the is big sidebar prop.

Learn to implement a responsive big sidebar with CSS, hiding on small screens under 992px and revealing at 992px, with a right-side shadow and styled navigation links.

Implement a logout container component in a MERN project, toggle the logout dropdown, display the user avatar and name, and wire local state and dashboard context to handle logout.

Explore styling the logout container in a React project, using relative and absolute positioning, flex alignment, and visibility-based dropdowns to create a responsive logout button.

Build a theme toggle in a MERN app by creating a theme-toggle component that reads the dashboard context to show sun or moon icons and toggles the theme on click.

Style a theme toggle button with transparent background and borders, set its size, center the icon with grid, enable a pointer cursor, and use a CSS variable for dynamic color.

Toggle the dark theme by flipping a new is dark theme variable, update the body class with vanilla JS, and persist the choice in local storage for app-wide use.

Fix a dark theme bug by exporting the theme-checking function and importing it into the dashboard layout, removing props and checking the default theme on every dashboard navigation.

Learn to implement a dark theme in CSS by toggling a body class and updating CSS variables for background and text colors. Tweak variables to extend to nav and sidebar.

Remove any existing git repo, create a main folder with client and server, and place the client inside. Initialize a root package.json with npm init -y and add server.js to verify deployment readiness.

Configure the server for ES6 modules by setting type: module in package.json, creating test files with named and default exports, and using the .js extension.

Install server and client dependencies by setting up a root gitignore, creating a setup script, and running npm install to prepare for deployment on render.

Set up a basic express server on port 5100 with a home route that returns hello world, using npm and nodemon for automatic restarts.

Use thunder client (or postman) to test server routes quickly within VS Code, sending requests to localhost:5100 to verify responses like Hello world, and to manage collections and environment variables.

Learn to accept json data in Express by installing and applying the json middleware with app.use(express.json()), exposing req.body in post routes and returning a json response.

Install Morgan and dot env, enable request logging with the dev option, load environment variables from .env to keep secrets secure, and prepare production deployment on render.

Explore new Node features like the fetch API, top-level await, and built-in watch mode, with examples showing practical usage, error handling, and when to apply each in Node projects.

Build a basic CRUD app using local data to read all jobs, generate unique IDs with Nano ID, and expose a get all jobs route under api version one.

Learn to implement a create job API in a MERN stack app, handling req.body validation, generate IDs with nano ID, and store jobs in an in-memory array.

Fetch a single job by id using express route parameters and req.params, return 404 if not found or 200 with the job, and use json messages for front end toasts.

Patch update of a specific job by ID updates company and position, validates inputs, returns 400 or 404 when needed, and 200 with the modified job.

Delete a job by id on the server, using a delete route parameter to filter the jobs array and respond with a job deleted message, illustrating basic crud.

Implement not-found and error middlewares in Express, logging errors, returning a json 404 for unknown routes and a 500 for server errors, and explore differences with a four-parameter controller.

Learn the difference between 404 not found middleware and the error middleware: 404 triggers when a requested resource is missing, while the error middleware handles errors from existing routes.

Create a jobs controller and router in separate folders, export async controller functions, and wire routes for get all jobs, get job, create, update, and delete under api version 1.

Persist data in MongoDB, a NoSQL database with JSON-like documents and a flexible data model, and explore Atlas cloud hosting for development and production.

Create Atlas account, verify email, and set up a read-write database user. Copy the connection string, configure Mongo URL in a .env file, and whitelist IPs for NodeJS with mongoose.

Use MongoDB Atlas and the Mongoose library to simplify interacting with MongoDB by modeling schemas, validating data, and performing CRUD operations, installed with npm install mongoose.

Import mongoose and connect with a dotenv Mongo URL, awaiting the promise inside a try/catch to safely start the server on port 5100 and log errors.

Create a mongoose job model defining job schema with company, position, status (pending, interview, declined), type (full time, part time, internship), and location, enabling timestamps and exporting the job model.

Refactor the job controller to connect the job model to MongoDB, implement the create method, and persist company and position with default values and timestamps in the jobs collection.

Compare async errors with synchronous errors and implement robust handling using try-catch or the express async errors package, ensuring the server stays up and returns 500 with a logged message.

Fetch all jobs and a single job from a MongoDB database via the job controller, using find and find by ID, with optional company filters and persistent storage.

Learn to delete a job with find one and delete (remove is deprecated) and update it with find one and update using new: true, returning job deleted or job modified.

Use the http-status-codes library to map responses like ok (200) and created (201), install via npm i http-status-codes, and prepare for custom error handling.

Create a custom error class that extends the built-in error with a 404 status and a centralized error handler, enabling reuse across projects for clear not found responses.

Create and configure custom error classes for bad request, unauthorized, and forbidden responses (400, 401, 403), then implement and validate the error handling layer in the project.

Explore the validation layer and its benefits, including catching errors before they reach controllers. Keep controllers slim and reuse validation logic across projects by using a separate validation layer.

Set up express validator as the validation middleware for a post route, validate req.body.name, return 400 with error messages when missing, and demonstrate chaining with messages and isEmpty checks.

Create a reusable validation middleware to keep controllers lean, define rules for name between 3 and 50 characters with trim, and centralize error handling for Express requests.

Define reusable constants for job status, job type, and sort order as exported objects, use Object.values to build value arrays, and wire them into the job model and future validation.

Set up reusable job input validation with express validator, applying it to create and update routes by checking req.body fields—company, position, job location, and status or type with is in.

Build a validate id param middleware with express validator, validating route params against Mongoose object id, returning 404 for missing items or invalid MongoDB id errors.

Implement an async, custom validation to check the MongoDB id and job existence, throwing not found or bad request errors as needed, and lean controllers by centralizing validation.

Define a user model with a Mongoose schema, including email, password, last name default, location default, and role as enum (user or admin), then export default mongoose.model('user', userSchema).

Create an auth controller with register and login functions, build an auth router with post routes, export the router, and wire it to the server under api version one.

Create user functionality in a MERN app using the user model and auth controller, validate input, and return a 201 created response with the new user data.

Set up a validation middleware for register input in a MERN app, validating name, email, password, and last name; enforce email format, unique email, and minimum password length.

During registration, the system automatically assigns admin privileges to the first user by checking the user count; subsequent accounts receive the user role, set via req.body role property.

Hash passwords with bcrypt js using a salt (default 10) before storing them in the database, then compare hashed values on login and do not send passwords in responses.

Export an async hashPassword function in the password utils module that creates a salt and returns the hashed password, then use it in the auth controller during registration.

Build a login workflow in the mern stack by adding validate login input middleware before the login controller, with email and password checks mirroring the register flow.

Implement login authentication by validating the request, checking the user by email in the auth controller, throwing a 401 unauthenticated error if not found, and comparing passwords with a utility function.

Log in returns a JSON web token signed and stored in http-only cookies to access resources like jobs and user info, with payload including user id and role.

Set up jwt environment variables by adding a secret and an expires in value to .env, access them via process.env in token utilities, and restart the server to apply changes.

Implement http-only cookies to store JWTs on login, with secure, one-day expiration, so the browser automatically sends the token with each request and the server authenticates via middleware.

Link jobs to users by adding a created by field on the job model and protect routes with an auth middleware that validates a JWT cookie.

Install and configure a cookie parser to access the token cookie, validate it in the authenticate middleware, and protect routes like get all jobs with 401 unauthenticated errors.

Verify the JWT from the cookie and decode its payload using the verify method. Attach the user id and role to the request in authentication middleware to secure job routes.

Learn to scope job routes to the authenticated user by attaching the user ID as created by and filtering jobs by this field.

Explain how to enforce owner and admin authorization in a validation middleware for job resources, using id validation, created by checks, and returning 403 when unauthorized.

Implement a logout controller that expires the auth token cookie immediately on a get /logout route, using http only cookies and returning a user logged out message.

Create and secure user routes by implementing get current user, app stats for admins, and update user, using cookie-based JWT authentication and dedicated controllers and routes.

Learn to fetch the current user by id with the user model, using authentication middleware, and return a user object without the password by implementing an instance toJson method.

Update user functionality updates the current authenticated user using validated input, enforces unique emails, removes password from the update payload, and validates changes with get current user.

Learn to implement an admin route to get application stats by counting user and job documents, using authentication and admin authorization in an express app.

Configure a development proxy to route front-end requests to the back-end on port 5100, enable cookies, and rewrite the /api path to remove the api prefix for seamless development.

Learn to use the concurrently package to run server and client in parallel with a single npm run dev command, and apply kill others on fail.

Explore using axios for front-end requests, installing and importing it, performing get requests, inspecting the response data, and creating a custom axios instance with a base URL.

Learn to implement user registration with React Router actions, replacing traditional onSubmit handling with elegant form submissions, using preventDefault, Axios, and controlled inputs.

Wire the register form with React Router Dom, use method post, and return a value from the action; export a register action to process submissions and handle errors.

Learn to implement frontend registration using the form data API with React Router Dom action, posting to /auth/register, handling server validation, and redirecting to login on success.

Explore how the latest React Router exposes navigation state with the useNavigation hook, allowing you to detect submitting, disable the submit button, and show submitting text.

Learn to enhance the register page with react toastify, install the library, place the toast container, and display success or error toasts for registration.