
Kick off the complete mern stack course by learning Node.js, Express, MongoDB, and React with hands-on projects and Bushman API, culminating in building a full stack social networking site.
Choose and install a text editor, such as Adam or Visual Studio Code, to write code and build your first React application.
Explore Node.js as an open source server environment that lets you run JavaScript on the server, enabling asynchronous programming, file and database interactions, and server-side development.
Install Node.js on your local machine by downloading the appropriate installer, following the prompts, and verify the installation by running node -v in the terminal.
Learn to use the terminal or command prompt across Windows and Mac, navigate directories, view contents, create folders and files, and open editors like Visual Studio Code for development.
Explore inbuilt Node.js modules with a focus on the filesystem module, using require to access fs, reading and writing files, creating files, and handling callbacks with data and error.
Explore Express, a minimal and flexible framework that lets you build single and multi-page web apps with less code and simpler server setup.
Start a local server with Express, initialize the project, install Express, create an app, and listen on port 3000 to serve localhost requests.
Learn to handle a get request in an express app by defining a homepage route and sending a custom response such as hi there, thanks for visiting my website.
Install Nodemon with npm install in the project folder, then run it to automatically restart the server on changes, speeding up development.
Express routing: build routes with request and response handlers, using paths like /home and /:name to handle user data while running a server.
Learn how to respond to a request with an html file using express, including res.sendFile, setting up a calculator project, and running a local server.
Learn how to enable post requests with body-parser in a MERN stack app, parse form data, convert strings to numbers, and build an addition calculator.
Build a Node and Express BMI calculator API. Create a /bmi route, post height and weight, and return BMI calculated as weight divided by height squared.
Explore how APIs use json to exchange data, using the open weather map API to fetch current weather data and illustrate json structures.
In this MERN stack course lecture, learners build a weather forecasting website using open weather map data, query by city, and handle api key setup, plans, and json parsing.
Learn to build a weather web app by setting up an Express server, using get requests to fetch JSON from the open weather API with an API key for London.
Parse the JSON in dart from a weather API by decoding response bytes to UTF, then extract temperature, coordinates, and other weather details in metric units.
Learn to fetch live weather data from an API and render temperature, clouds, and conditions for Hyderabad in a MERN stack app.
Create a weather web app by posting a city name to the server using body-parser, wiring a form to send data, log requests, and fetch weather with an API key.
Learn how to post requests to a server using a body parser, build a complete web application, and test get and post requests across routes.
Download and install MongoDB on your computer by navigating to the MongoDB download page, choosing a complete or custom install, and completing the setup.
Master MongoDB basics with a graphical user interface to create databases and collections, manage documents, and perform insert, find, update, and delete operations including automatic _id.
Learn how to implement a rest api server that can get, post, put, and delete data, fetch resources from a remote server, and manage updates and deletions for user data.
Use Robo 3T to interact with a MongoDB database by connecting to the server, creating a database and a collection, and inserting documents with title and description.
Set up a MERN project by initializing npm, installing express, mongoose, and body-parser, and building an express server on port 3000 that connects to MongoDB and its articles collection.
Connect the server to MongoDB and define a title and description schema for articles. Create a Mongoose model for the articles collection to support the get all method.
Implement the get all endpoint in a MERN stack app by querying the Article model with find to retrieve all articles from MongoDB, wiring a REST API on localhost:3000.
Post a single article to a MongoDB-backed API using the post method, test with Postman, sending title and description to localhost:3000 and confirm insertion.
Delete all articles with a delete many operation, verify by using the get method to fetch all articles and confirm zero results, then add new articles to validate subsequent operations.
Implement a get-one article endpoint in a MERN app by configuring the article route with a title parameter and querying MongoDB with findOne.
Learn how to delete a single article in a rest api using a delete one method, including parameter naming, a callback with error handling, and postman testing.
Learn what React is as an open source JavaScript library for building user interfaces. Explore its advantages, including component reuse, easier maintenance, stable code, and SEO friendliness.
Create your first React app by setting up a project folder, running create-react-app, and launching the local server at localhost:3000, then edit in your preferred editor.
Explore CodeSandbox as an online compiler to quickly start a React project, choose templates, and share or export your work while learning the React basics.
learn how to set up a basic react app with index.html and a script file, install dependencies, and render content to the root div using react and react-dom.
Complete the React app challenge by building a simple React page that renders an ordered list of your favorite languages, Java and JavaScript, with a local copy via CodePen.
Explore how to embed JavaScript in jsx within React, render variables, and compose elements with curly braces, including concatenating first and last names and simple expressions.
Tackle a practical JSX challenge by rendering a simple footer with your name and the current year using the JavaScript date object, guided by online documentation and code debugging.
Explore JSX attributes and styling for React elements, demonstrating inline styles like background color, explaining camel casing for attributes, and highlighting proper use of className and contenteditable.
Learn to style React elements with inline styles using a style object with camelCase properties, wrapped in double braces, and manage a state object for color and background color.
Explore building React components with function components, learning import and export patterns, and rendering headings and lists to compose a simple user interface.
In this React components challenge, create new heading components, export them, and import heading into the app to practice component structure and module exports.
Explore import and export in ES6, including default and named exports, aliasing imports, and practical examples to reinforce module-based JavaScript in React projects.
Learn to build reusable React components by passing props like name, image source, and email into contact cards. Discover how props enable dynamic, data-driven UI in the MERN stack.
Practice React props by importing and exporting contact data, defining a design object with contact values, and mapping those values into components to render a dynamic contact list.
Map data to components by looping through a contacts object with a map function, rendering dynamic cards for each contact. Ensure each card has a unique key.
Master Chrome React developer tools to inspect components, view props, and explore card components in a React app, while learning sandbox usage and how to export projects for local run.
Apply conditional rendering in React to display a login form when not logged in and a welcome home page when logged in, using boolean checks, ternary operators, and component-based structure.
Discover how to implement client-side routing with react router by wrapping the app in BrowserRouter, creating routes for home, about, and contact, and navigating via Link.
Explore how React Router enables navigation between pages without reloading, and master exact path matching to render the correct components, such as the about page, using history and links.
Learn how to pass props through routing and compare router component versus render, explaining how component props are created on each render and how render reduces re-renders for better performance.
Learn how useParams in React Router accesses and passes route parameters to render dynamic content, such as contact pages and category details, enabling parameterized navigation in a mern stack app.
Learn how to use the useLocation hook in React to access location data, display the current location details (name, hash), and conditionally render UI with fragments.
Learn how to use useHistory in React Router to navigate with push, go back, and go forward, and understand why useLocation is used for mutable state.
Explore react hooks by building a counter app with useState to track number, add plus and minus buttons to increment and decrement, and ensure the value never goes below zero.
Apply hands-on React hooks by building a dynamic style toggle with a button, leveraging useState to switch styles and demonstrate inline styling and state-driven user interface.
Learn how useEffect runs code after React updates state, triggering actions after rendering and alerting when a number reaches five.
Explore event handling in React by updating state from input, responding to clicks and mouse events, and applying dynamic styles with useState and simple hooks.
Learn to build and manage form inputs in React using state hooks, handle onChange events, sync first and last names, and prevent page reload on login.
Learn to fetch pokemon data with axios in a React app using async/await, manage state with hooks, and render pokemon name and moves from the pokemon API.
Explore managing complex React state with multiple hooks for first name, last name, and full name, and use a prevValue callback to safely update onChange.
Explore how the ES6 spread operator merges arrays and objects, updates previous values via callback prev, and simplifies nested data handling.
Develop and customize a React todo list by building input handling, adding items to a list, rendering with map, and enabling item removal through state and props.
Explore context API with functional components, creating context, providing data with a provider, and consuming it across components to avoid prop drilling, as shown with A, B, and C components.
Explore how to manage shared data with context by exporting and importing last name contexts, replacing nested consumers with use context to prevent code complexity.
Learn how to use the context API with the useContext hook to share first name and last name across components, replacing prop-based data flow with a provider and consumer pattern.
Build a small context API project in React by creating a provider and consumer components. Use useContext to share and increment state across components, showcasing practical context usage.
Learn how React Redux pairs React with Redux to manage state using a single store, actions, and reducers, with immutability, to build a project.
Set up a local Redux application by installing Node and npm, adding Redux and React-Redux dependencies, and scaffolding a React project to build a Redux-based app.
Set up a React Redux file structure for a MERN app by organizing components, containers, services, actions, reducers, and store, and wiring them into a scalable architecture.
Design the cart component within the complete MERN stack course, implementing add to cart functionality with redox and refining home and container interactions, using bootstrap for styling.
Create the add to cart action with a specified type and payload, pulling data from props to be used by reducers.
Create a cart items reducer with an initial state and add-to-cart handling, then combine reducers into a root reducer to power a single store and enable future actions.
Create a Redux container to connect React components with the store using connect, mapStateToProps, and mapDispatchToProps, wiring actions like add to cart through a provider.
this lecture demonstrates completing the redux flow by wiring the store with a provider, creating the root reducer, dispatching add-to-cart actions, and connecting components to pass data through props.
Learn to receive product data with props, add items to the cart, and manage cart state. Explore Redux basics—actions, reducers, and sharing data across components via a container.
Explore how to pass data between components using containers, header, and props, and understand why Redux is used for managing shared state in a MERN app.
Implement remove from cart in a redux-based MERN app by creating a remove from cart action and wiring it to the reducer and home container to reflect item removal.
Get a project overview for a MERN stack app built with React and Redux, demonstrating create, edit, delete, and add contact actions, while refactoring to remove container components.
Set up the contact book React project by creating a new folder, initializing with npx create-react-app, and installing react-redux, then start the server with npm start.
Create React components for a MERN project using Bootstrap to build a responsive nav bar and container layout while integrating redux devtools extension to visualize the store.
Create a Redux store and reducers, configure an initial state with sample user data from a placeholder, and wire the app to the Redux Chrome extension via a provider.
Receive data from a rest api and render contacts in a table by using useSelector, mapping over state to display name, email, and phone in headers.
Refactor the app by cleaning up and restructuring components, adding checkboxes, mapping data, and implementing a reusable contact component with props, avatars, and material icons in the mern stack.
Create the addContact component in a MERN stack project, import react-router-dom modules, and configure routing with a switch to navigate between the contacts list and the add contact view.
Learn to add contact details by creating a Redux action with a payload, dispatching it with useDispatch, updating the contacts store, and navigating back to the contacts page.
Fix issues and establish a clean file structure for a MERN app. Create folders for actions, reducers, and store, export modules, and combine reducers to wire contact data and router.
Introduce the added contact component and edit contact flow in a MERN app, wiring dynamic routing, dispatching actions, and populating form fields to update a contact.
Learn to delete an individual contact in a MERN stack app by dispatching a delete action, filtering out the contact by id, and updating the contact list state.
Learn to complete a project by implementing Redux-driven selection, including select all, clear, and delete all actions, using useDispatch and useSelector for state management.
Discover how Redux Thunk acts as middleware to handle asynchronous API calls and update the store with server data.
Set up your MERN project by downloading the starter zip, extracting files, installing dependencies in the terminal, and starting the server to preview and add a sample project.
Explore how redux thunk handles async actions to fetch posts from a placeholder API. See how axios, middleware, actions, reducers, and a store handle create, update, and delete operations.
Develop a social network app using the MERN stack, featuring user sign-up and login, posting, commenting, liking, following, profile pages, photo uploads, and a portfolio-ready project.
Kick off the MERN project by creating a social networking folder, installing Express, and building a Node/Express server that responds to the root with hello and listens on port 5000.
Learn how middlewares fit the request response cycle and use next. Apply different middleware to routes, including authentication checks, and observe effects on the home directory.
Set up a server with MongoDB Atlas and configure IP access and a database user while connecting the app via the MongoDB driver.
Create a user schema with required fields using Mongoose, export a user model, and wire authentication routes to handle signup on a local Express server.
Create a sign-up flow by posting user data to a MongoDB cloud database, validate email uniqueness, and save name, email, and password—preparing for password hashing discussed later.
Learn to hash passwords with bcrypt by installing, requiring the library, and applying salt rounds to generate secure hashed passwords.
Create a sign in route that validates email and password, handles errors, and compares hashed passwords using a post request and callback.
Explore how JWT authenticates clients by exchanging credentials, issuing a data token, and sending it with requests for server verification and access to protected data.
Learn to create and sign a JWT using a secret key, return the token from the server, and implement middleware to verify the token for protected routes.
Create a middleware layer to enforce authorization with JWT tokens, protecting routes, verifying tokens, and returning access denied when users are not logged in.
Learn to design a post schema with mongoose, including title, body, status, and optional photo, plus a posted by user reference, authentication, and route integration.
Create the get all posts route to fetch all posts, populate the author details, exclude sensitive fields like email and password, and test the endpoint.
Build a posts by user route in a MERN stack app, enforce login, use tokens to identify the signed-in user, and manage posts authored by that user.
Set up the React front end by creating the client project, installing React, and applying Materialize CSS. Build login, sign up, home, and profile screens with React Router navigation.
Create a sign up and sign in page UI in React using a layout with placeholders for email, and routing with React Router between login and sign up.
Create a profile page UI by styling a profile photo, name, posts grid, and follower counts, using grid layout and bootstrap with custom CSS for spacing and borders.
Build home UI for the MERN stack course, extending sign up and profile features to include a post UI, while applying material icons, images, and styling ahead of backend work.
create a post feature in a mern stack app by building a new post component, wiring inputs and image upload, and applying styling to enable posting and display.
Post data to the server in the MERN stack using a sign-up form, sending name, email, and password via fetch with json on localhost.
Learn to implement the sign in feature by adapting the sign up flow, using email and password, handling errors, and routing to the home page in a MERN stack app.
Create and integrate image upload functionality to a server using form data, handling file inputs and cloud service uploads, with authentication and post creation flows.
Learn to upload images using tokens stored in local storage with JWT-based authorization to create posts in a MERN app, including sign-in and Google login flows.
Learn to implement a user context with useContext and useReducer, create a provider and actions, persist user data to localStorage, and route based on auth state.
Use user context and state to conditionally render the nav bar links, showing login and sign up when not logged in, and profile, create post, and home when logged in.
Show all posts on the home page by fetching posts after login, map them to a list with author and image, and enforce authorization using login middleware and local storage.
Implement a logout page in a mern stack app by clearing local storage, dispatching a clear data action, and redirecting to the login page using history.
Build a user profile page by fetching user data with useEffect and authorization headers from local storage. Render posts with photos and manage user state with context.
Build an API for like and unlike actions by storing user references in a post's likes and dislikes arrays and handling front-end requests with push and pull updates.
Develop a front-end like and unlike feature for posts in a MERN app by updating local post state, handling like data, and preventing multiple likes per user with user context.
Build backend for a comment feature in MERN stack app by defining the comments model with text and a posted by user reference, and implement populate to show commenter details.
Develop a frontend comment feature for the MERN stack course by building a form to post comments, retrieve the user name from local storage, and render comments in real time.
Securely delete posts in the MERN stack app by enforcing login through middleware, locating the post by id, validating the requesting user, and returning clear success or error responses.
Build the backend for viewing other users' profiles on the timeline by creating a user data model, routes, and request‑response handling, then integrate with the frontend.
Create a front-end user profile page by composing reusable components and screens, fetch and display another user's profile, posts, and email while enforcing login to view profiles.
Build the backend logic for follow and unfollow in the mern stack by modeling followers and following, updating user references, and creating follow and unfollow api endpoints that require login.
Implement a front-end follow and unfollow feature that updates a user's followers via dispatch actions and local storage, with loading states.
Debug a bug in the unfollow button by removing undefined code, reload the page via a JavaScript line, and verify that follower counts update correctly.
Resolve the unlimited followers bug by updating the follow logic to render follow or unfollow based on whether the current user is in the target's following list, using context state.
Build a backend feature to show posts from people you follow, using a get subscribed post route and including posted by details, with name and email in the response.
Build a front-end feature that displays posts from followed users, enables subscribing to user posts, and wires components and screens to show the follow feed.
Learn how to upload a profile picture during sign up, handle a default photo, and post the image to the server through the user model.
Deploy a MERN stack project to Heroku by uploading the client and server, configuring production settings, and setting environment variables for the app to run on the Heroku port.
Welcome to "The Complete MERN Stack Course 2021". In this course, we will build an in-depth Social Network website using Node.js, Express, React, and MongoDB along with ES6+. We will start with a blank text editor and end with a deployed full-stack website on Heroku.
This course also uses the latest React Hooks and Redux which is an absolute joy. Your code will be so much simplified and readable.
At the end of this course, we'll build an entire project(FACEBOOK CLONE) and you will learn how these different technologies work together step by step. We'll first have a look at all the individual building blocks so that we then can also combine them all into one amazing application by the end of the course.
In detail, this course offers
All the basics of React, Node, Express, MongoDB
Project sections for each technology where the theoretic knowledge is applied
A full MERN stack website
A complete course project where all the technologies come together into one application
List of the things that you will learn:
Learn how to use Codesandbox
Learn React from scratch
Conditional Rendering
React and it's advantages
JSX
Challenges after every topic
JSX attributes
Inline styling for react elements
Javascript ES6 concepts
React props
Mapping data to components
Using React dev tools
Login Project
React router and project
React Hooks (use state.use effect)
Event handling
form handling
Todo list project
Context API
Small project with context API
Redux
React-redux
C.R.U.D website using React-redux
Middleware in React-redux and a project on that
Node js
REST API
Express
Mongo DB
MongoDB compass
and many more things.
By the end of this course, you'll feel comfortable building your own MERN stack applications and you can build upon all the knowledge taught throughout this course to dive into your own projects and use-cases.
What are the requirements for taking this course?
NO prior MERN stack knowledge is required
HTML,CSS and Javascript
Let's do it. Let's code together.