MERN Stack Front To Back: Full Stack React, Redux & Node.js

Set up a cloud MongoDB Atlas cluster for a mern app, learn NoSQL document databases, and connect an Express backend with Mongoose using a free M0 cluster.

Install express and key dependencies (express-validator, bcryptjs, config, gravatar, jsonwebtoken, mongoose, requests) and dev tools nodemon, concurrently; set up server.js and test route.

Connects your app to MongoDB Atlas using a MongoURI from a config default.json, with mongoose, async/await, and try/catch for robust error handling.

Organize routes by resource with express router, creating users, auth, profile, and post files under an api folder that returns json, and mount them in server.js under /api.

Register a user via a post to /api/users, sending name, email, and password in the request body, while using express.json and express-validator to validate input and handle errors.

Register a new user by validating input, checking for existing email, creating a gravatar avatar, hashing the password with bcrypt, saving the user, and returning a json web token.

Register users and return a jsonwebtoken that carries the user ID in the payload. Sign it with a secret, set expiration, and verify tokens via middleware for protected routes.

Implement a custom jwt middleware to protect routes by validating the token from x-auth-token. Attach the decoded user to the request and use it in protected routes.

learn to implement a login route in a MERN stack app, validating users with bcrypt, issuing a JWT token, and protecting routes via a public api/auth endpoint.

Define a mongoose profile model linked to the user reference, with fields for company, website, location, status, skills, bio, GitHub username, experiences, education, social links, and date.

Create a protected api/profile/me route to fetch the current user's profile using auth middleware, populate with name and avatar, and handle missing profiles.

Create and update user profiles via a private post /api/profile route, validating status and skills, building profileFields with a skills array and social object, and saving the profile.

Create routes to fetch all profiles and a profile by user id, fix mongoose deprecation with useFindAndModify false, and populate the user's name and avatar.

Delete a user and their profile via a private API route using a delete request to /api/profile, matching the token to the user id and returning a confirmation message.

learn how to add a profile experience via a put to api/profile/experience, with validation for title, company, and from date, and unshift the new experience into the profile's experiences array.

Create a delete route at api/profile/experience/:exp_id to remove a profile experience by its id. Retrieve the user’s profile, locate the target experience, splice it out, and save the updated profile.

Add and delete education on a profile in a mern stack app by duplicating experience routes, validating school, degree, and field of study, and testing with Postman.

Fetches a GitHub user's public repositories by querying the backend route api/profile/github/:username. Uses an oauth app with client id and secret to fetch five per page, sorted by created date.

Create a post model using Mongoose Schema, linking posts to users with ObjectId, and include text, user name and avatar, plus likes and comments with timestamps.

Create a protected post route in a MERN stack app that validates text, uses auth to get the user, and saves a new post with text, name, avatar, and user.

Implement private get routes for all posts and for a post by id, with id validation, 404 handling, and a protected delete route that enforces owner verification.

implement post like and unlike routes in a MERN stack app. update the post’s likes array using the logged-in user’s id, prevent duplicates, and return the updated likes.

Build add and remove comment routes in a MERN stack app, using post/comment/:id to add and post/comment/:id/:commentId to delete, with text validation, user data, and post updates.

Explore integrating a custom HTML CSS devconnector theme into React components, converting markup to JSX, and wiring pages like landing, profiles, dashboard, posts, and alerts with Redux.

Set up a React frontend in a client folder and run front-end and back-end servers concurrently with a proxy on ports 3000 and 5000.

Clean up a Create React App by removing boilerplate files, refactoring App.js to an arrow function with a fragment, and building Navbar and Landing components for a starter UI.

Set up React Router to manage landing, login, and register routes using BrowserRouter and Link components.

Create a register form using a functional component and the useState hook, with controlled inputs for name, email, and passwords, including onChange handlers and basic client-side validation.

Demonstrates posting new user data with axios in a redux-oriented flow, hitting /api/users to obtain a token, and setting up a login form with routing links.

Understand why redux acts as an app-level state manager, using a store, actions, and reducers to handle auth, profiles, posts, and alerts.

Create a Redux store with thunk middleware and devtools integration, wiring a root reducer via combineReducers and exporting the store for use with the React-Redux provider.

Create an alert reducer and wire it into the redux root reducer to manage an initially empty alerts array (id, message, alert type) using set alert and remove alert types.

Learn to implement a Redux-based alert system in a React app by creating a reusable Alert component, using connect, mapping state, dispatching setAlert, and auto-dismissing alerts with timeout.

Create an auth reducer and register action to handle register success and fail, store the token in local storage, and track isAuthenticated and loading while wiring axios to api/users.

Load user on every app load by sending the stored token to the backend for validation via api/auth, then dispatch user loaded or auth error to manage authentication.

Implement login by posting email and password to api/auth, handle LOGIN_SUCCESS and LOGIN_FAIL, store the token in local storage, and load the user to set isAuthenticated.

Implement a logout action to clear session data and reset authentication in a MERN app. Update navbar to show authenticated versus guest links based on Redux state, with loading guards.

Build a private route in a React and Redux app to protect the dashboard by checking authentication and redirecting to login, wire up routing, and connect Redux auth state.

Implement a profile reducer and actions to fetch the current user's profile via the profile me endpoint, populate the state, and drive the dashboard with profile data.

Build the dashboard by adding a dashboard link, guard routes with isAuthenticated and redirect to /dashboard, show a spinner while the profile loads, and guide users to create a profile.

Create a profile form component in React with Redux, using form state for fields including company, location, and social links, on a private /create-profile route with toggle for social inputs.

Learn how to implement a create or update profile action in a MERN app, posting form data to /api/profile, dispatching profile and alert actions, and redirecting with history after submission.

Implement an edit profile workflow by building a dashboard actions component with links to edit profile, add experience, and add education, plus an edit profile form that pre-fills current data.

Add education and experiences to your profile with dedicated redux actions and components, update the profile, handle form data, and redirect to the dashboard after submission.

Display and manage education and experience data within a dashboard by creating separate components, wiring them to the dashboard, formatting dates with moment, and preparing delete actions.

Learn to delete experiences, education, and accounts in a MERN dashboard using Redux actions, profile endpoints, and confirmation prompts with state updates and alerts.

Implement front end profile features by completing profile actions and reducer to fetch all profiles, fetch a profile by user ID, and fetch GitHub repos, with dispatch flow and updates.

Build a profiles list in a MERN app by creating Profiles and Profile Item components, fetch profiles with get profiles action, display a loading spinner, and link to individual profiles.

Address console warnings by adding useEffect dependencies (getProfiles, getCurrentProfile) and wrapping actions with withRouter, then verify profile operations (add experience, edit profile, delete) work as expected.

Create a profile page in MERN app with a profile component and subcomponents, routing to /profile/:id and fetching profile by id. Show spinner and edit button for the authenticated user.

Build the profile top and profile about components, rendering avatar, name, status, location, website, social links, bio, and a mapped skills list from profile data.

Map profile.experience and profile.education arrays into components to display company, title, dates, and descriptions, school, degree, and field of study. Format dates with moment and show 'no credentials' when empty.

Display the user's GitHub repositories on the profile by rendering ProfileGithub when a GitHub username exists. Fetch repos with getGitHubRepos via useEffect and show stars, watchers, and forks.