Apply Jobs as MERN stack developer with this course

Set up a local development environment for a Node.js based application. Install the runtime, MongoDB community edition, Visual Studio Code, Postman, and Chrome according to your operating system.

Set up a backend nodejs API with express by initializing npm, installing express, creating a server file, and testing a hello endpoint on localhost ports 3000 and 8000.

Learn how middleware runs before endpoints, the role of next to pass control, and how to apply it with app.use to routes, including basic authentication use cases.

Set up a cloud MongoDB environment by signing up for a free Atlas account, creating a cluster, enabling remote access, and creating a database user, then connect your Node.js app.

Create and export a database configuration file, install and import mongoose, and connect to the database using mongoose with success and error event handling.

Set up a user model with Mongoose by defining a comprehensive user schema, including full name, email, and password, then register and import the model in your mern app.

Set up your first router and route in a MERN stack app, organize components, implement authentication handling, export and import modules, and register the router to render a welcome page.

Build a registration rest API with a post endpoint that maps the request body via object destructuring, validates mandatory fields, and returns clear error or success responses.

Register a new user by checking for existing email with mongoose, then save a new user record (email, password, full name) to the database, handling success or errors.

Install a password hashing module with npm, hash user passwords with 16 salt rounds, and save the encrypted password in the database, verifying via postman tests.

Implementing login api parses email and password from the request body, validates inputs, finds the user by email, and compares encrypted passwords to return success or invalid credentials.

Implement token-based authentication using JSON web token (jwt) by generating a token from the user's id and a secret, sending it after login, and validating it for protected resources.

Protect routes with a middleware that verifies a JWT from the authorization header, fetches the user by id, attaches it to the request, and forwards to the next handler.

Set up a post model with mongoose by defining a post schema with title, body, and image fields, plus author reference to the user model via ObjectId; register after connection.

Set up a new post route in a MERN app, export the module, and create a post from the request title and body linked to a user.

Implement a post creation workflow by saving to the database, using then/catch callbacks, and verifying the newly created post, its sponsored status, and its link to the user model.

learn how to prevent exposing user passwords in api responses by removing the password from the response, setting it to undefined to ensure a safe, correct post-response.

Create an endpoint to fetch all posts for all users, using the post model find and populate author details (id and full name) while omitting password, then test with postman.

Learn to fetch only the posts of the current logged-in user by protecting the route and filtering posts by the authenticated user id.

Set up a React frontend by creating a skeleton project with the act library, install routing, start the dev server, and clean up the app to display hello world.

Learn to style an application using the materials library, render a navigation bar, and build components with functional patterns and export default.

Install and restart a React VS Code extension to generate components, then customize the nav bar styling with CSS using className conventions to set a white background and black text.

Create and wire up website pages for a MERN app, including home, login, sign up, and profile, with a centralized routing system and conditional navigation.

Fix a single-page app navigation by replacing anchor tags with a link input and implementing a two-step replacement so log in, sign up, and profile load without full page refresh.

Implement custom typography in your MERN stack projects by selecting a Google font, importing its style, and applying the font family to titles for a polished frontend.

Design and style a login screen by building a login card with email and password fields, a login button, and iterative user interface tweaks for layout, colors, and focus effects.

Copy the login logic into the signup screen, add a full name placeholder, and configure an email, password, and signup button. Add and test a login link for existing accounts.

Learn to style a profile page in a MERN stack project by implementing a profile image, flexbox layout, and spacing with borders and margins, plus responsive tweaks for mobile.

Style the profile page gallery post section and the image deck using flex layout with space around justified content, adjust widths with percentages, and reduce whitespace for a responsive layout.

design and implement the homepage post section using materialize cards, including an image, a title, and content, plus a comments input, with centered layout and a max width.

Enhance the homepage post section by adding a red heart icon to each post, styling it with inline color and size adjustments, and duplicating the card for multiple posts.

Create the post page by building the create post component with a form, including text inputs for last name and content, and a file upload, and set up routing.

Learn to implement create post routing and styling in a MERN stack app, including navigation setup, post creation flow, and CSS styling for a polished post page.

Style the create-post page, apply button colors and image uploads, and refine sign-up and login themes for a cohesive dark and light post, profile, and home look.

Coordinate front-end and back-end by launching both React frontend and Node backend in VS Code terminals, resolve import conflicts, and verify they run on port 4000 together.

Add three state variables—fullName, email, and password—on a signup page using useState. Bind input values and update them with onChange in preparation for a backend API call.

Create a signup flow that collects full name, email, and password and submits them to the Nortec service backend via a fetch post request to localhost:4000, using content-type application/json.

Learn how cross-origin resource sharing causes api requests to fail when frontend and backend run on different ports, and implement solutions using backend cors middleware or a frontend proxy.

Learn to implement an error toast on the frontend by integrating a toast component with materialize, wiring it to display backend errors, and styling the message for clear user feedback.

Style and display a toast error message on the signup page. Position it top-right with 25px margins and use a clear color scheme; show error and success messages.

Navigate users to the login screen after a successful registration by using the history hook to push the login route and display a user registered successfully message.

Add email validation across the form using a regular expression, display error toasts for invalid emails, and navigate to the login page after a valid signup.

Connect the login screen to the backend login API, implement error handling and input management for email and password. Test redirects to the home screen after successful authentication.

enrich the login api to return the JWT token and include user info such as id, full name, and email from the backend to the front end, enabling future videos.

Explore setting up a free cloud storage to store images for a MERN stack project, including signing up, verifying, enabling unsigned uploading, and configuring an upload preset for image handling.

Use useState to manage title, body, and image on the post screen. Update image input on change and prepare title, body, and image for submission.

Build a post image upload workflow to cloud storage by preparing form data, setting file data and cloud name, posting via fetch to a cloud service, then handle the response.

Update the backend create-post API to store post image URLs, enforce a mandatory image field in the post model, and synchronize cloud uploads with the backend data.

After login, store the jwt token and user information in local storage as a json string to enable authorized api calls and access to protected routes in mern stack app.

Save a new post by calling backend API with a token from local storage in the authorization header, sending title, body, and image, and navigate to the homepage on success.

Learn to perform end-to-end testing of creating a new post, including logging in, entering content, uploading an image, and verifying the post appears in the media library and post model.

Create a shared app state with context and a reducer using useReducer, define initial state and reducer logic for the provider, and enable routing with useHistory for token-based redirects.

Set up the reducer and context API to share and manage user state in a mern stack login flow, including dispatching actions, syncing with local storage, and redirecting users.

Identify and fix a runtime error in the logging component by correctly passing context at line seven, save changes, and confirm the error is resolved.

Enrich the home page styling by conditionally showing links based on login status, fix incorrect class references, and apply consistent padding to home cards for a dynamic, polished UI.

Leverage the user context to conditionally render navigation items based on login state, implement stateful dispatch, and redirect unauthenticated users to login, with dynamic menus after sign-in.

Fetch and render home page posts from a backend API in a MERN stack app, manage posts with useEffect and state, and display image, title, and body.

Implement logout by clearing local storage, dispatching a logout event, and redirecting to the login page using history. Verify token and user data are removed, ensuring a clean sign-out experience.

Fetch profile data from the backend API by using useEffect and useState, authenticate with a bearer token, and display the user posts with images and titles on the profile page.

Implement a like and unlike feature for posts by updating the post model to store user IDs in a likes array and update via findByIdAndUpdate.

Implement the unlike post api in the backend and implement the frontend to trigger unlike, completing the like and unlike endpoints for a post.

Implement like and unlike on the frontend by wiring thumbs up and down icons to the backend via put requests, updating the post state with the new like count.

Learn to implement real-time like and unlike count updates by updating posts through a dedicated function, comparing old and updated posts, and refreshing state for immediate feedback on user interactions.

Implement one-time like and dislike restrictions by checking the logged in user's id in post likes, and toggle thumbs up or thumbs down through the user context driven interface.

Implement the backend api for comments by updating the post model, adding a comment object with text and a user reference, and populate commenter names for display.

Connect the frontend form to the backend comment API by submitting comments, preventing default form behavior, sending the comment text as a JSON body, and handling the network response.

Display and render comments on the frontend, mapping each comment and showing author details and text, then conditionally render the section when comments exist.

The lecture explains building a backend delete post API, validating ownership by matching the post author with the logged-in user, deleting the post, and returning a success message.

Integrate the frontend with the backend delete post API by showing the delete button only for authors, sending delete requests, and updating the post list to remove the deleted item.

Test the functionality by adding a delete comment icon, mirroring the delete post feature, enabling users to remove comments on posts with an upload image flow.

Create an api endpoint to fetch another user's profile and their posts, excluding the password, and populate the user details (id and full name) for viewing non-logged-in profiles.

Develop the frontend for viewing another user's profile by fetching profile data and posts via a backend API using a useEffect hook, and manage loading states and UI rendering.

Navigate to user profiles by tapping post authors: if the author equals the current user, open own profile; otherwise open the other user's profile.

Implement followers and followings in the MERN backend by modeling user relationships, exposing follow and unfollow endpoints, and updating follower and following counts accordingly.

Explore frontend changes to implement follow functionality by updating the user profile via a follow API call, wiring a follow button, and handling responses.

Update local storage with followers and following data after login and follow actions, remove password from responses, and refresh frontend state through dispatch and reducer updates.

Update the frontend state to reflect a new follower, increasing John Doe's followers. Append Jane Doe's id to John Doe's followers array using the previous state.

Implement unfollow logic on the frontend by mirroring the follow flow, manage the show follow state to toggle the follow button, and update the followers list accordingly.

Make the user profile info dynamic by leveraging state to render the logged-in user's name, email, and id. Implement dynamic followers and following counts with follow/unfollow interactions updating via state.

Showcases updating the profile page to display the user name, post counts, following and followers details, the user's email, and the profile image, for a clearer user interface.

Implement an API to fetch posts from users you follow in a MERN app by filtering posts by your following list and updating the request and endpoint.

Test a bug fix in a MERN app by validating followers and following update on the profile, persist after refresh, and post an image across user logins.

Implement UI changes to render posts from my followings by adding a new post-from-followings component and wiring it to the following endpoint.

Fix the follow unfollow bug by making the initial boolean state dynamic based on whether the user is followed, so returning to a profile shows the correct button.

Upload a user profile picture during signup and store its URL in the backend, with a default image for users who skip the upload, and update the user model accordingly.

Show user profile pictures beside usernames on posts, populate profile images for posts and comments, and apply simple styling to ensure avatars appear across the home feed.