MERN React Node MongoDB CRUD with Smart Login for Beginners

Set up a new react client app with create react app, initialize the project folder, install dependencies, run npm start, then remove default logos and import bootstrap for styling.

Set up a Node.js Express server for a MERN app by initializing npm, installing essential packages (Express, Mongoose, JSON Web Token, CORS, body-parser, nodemon, dotenv, slugify, express-jwt), and enabling CORS.

Learn to build a simple node server with Express, using middleware like Morgan and body-parser, define a wildcard get route, and enable auto restart with nodemon.

Learn to connect a Mern app to Mongo Atlas, configure a free cloud cluster, manage environment variables securely, and use Mongoose to establish a robust database connection.

Learn to organize a web app by moving routes into dedicated files and handlers into controllers, using express routing, middleware, and an api prefix for scalable post routes.

Define a Mongoose post schema to validate title and content, generate a unique lowercase slug with index, track user, and add timestamps.

Learn to test a MERN API endpoint with Postman by sending a post request with a JSON body (title and content), set content-type, observe data, and generate a slug.

This lecture shows how to create a post endpoint in a MERN stack app by generating a slug from the title, validating title and content, and saving with mongoose.

Learn to implement routing in a React app using react-router-dom, wrap the app in BrowserRouter, and define Route and Routes for home and create post to render different components.

Create a new post form in a MERN app, featuring title, content, and username fields, with a React useState-based state management and event handlers to post to the server.

Learn to build a React post form with useState, managing a title, content, and user in one state object. Implement a single onChange handler to update fields immutably.

Learn to submit a form with axios in a MERN app by posting title, content, and user to a backend API, saving a new post and preventing default behavior.

Implement navigation for the manga atlas app using link components to switch between home and create views, building a nav component and applying padding to menu items.

Create a get endpoint to read all posts from the database using the post model, with optional limit and sorting by created date to show the latest first.

Fetch all posts from the server on component mount, store them in state, and render titles, a 100-character excerpt, author, and formatted date on the home page, using unique keys.

Learn to render a single post by slug in a MERN app. Fetch the post with axios in useEffect via a dynamic server route and display its content.

Prepare for update and delete in the MERN CRUD app by prepopulating the edit form from the post, reusing create code, and adding update and delete buttons with bootstrap.

Implement update and delete server methods for posts using slug-based lookup, returning updated content and handling errors in a MERN stack.

Learn to update and delete posts on the client side using PUT and DELETE requests, keyed by post slug, while reusing create and single-post code for the update form.

Implement a delete post feature with a confirmation prompt using the post slug to delete on the server and refresh the list, restricted to the logged-in admin via smart logging.

Learn a smart login system for a MERN app using a name and password to generate a JSON web token for authenticating CRUD operations.

Create a login page in a MERN stack app by building a React component that captures name and password, posts to the backend, and returns a token for user authentication.

Build a login server in the MERN stack that creates a login endpoint, validates a password, generates a JWT with a secret, and returns the token and user name.

Save the login response, including token and user name, to session storage and implement helpers to access or remove them, enabling header-authenticated requests and post-login redirects.

Hide the login button after login and show a log out option. Use the get user helper to verify status, then log out and redirect to home.

Create a private route to protect pages from unauthorized access by redirecting to login when no user is present. Restrict create post space and related actions to logged-in users only.

Transform a plain text area into a rich text editor using react-quill with bubble theme, enabling bold and links, then save and render post content in a MERN app.

Render html in a React app using the react render package, wiring npm install, and display post titles with rich text content in list and single post views.

Refactor the update page to use React Quill for rich text, replacing the textarea and wiring changes to fetch and display content while showing edit buttons only to logged-in users.

Hide update and delete buttons for logged-out users and secure CRUD by sending a valid token to the server, implementing restricted routes with middleware.

Use express-jwt as require signin middleware to protect MERN CRUD routes by validating tokens with a secret and expiry, attaching user data to request for secure create, update, and delete.

Secure a MERN stack app by sending a bearer token from the client for create, update, and delete requests, using getToken from helpers to set the authorization header.