Building Blog using MERN Stack

Learn to set up a React front end for a MERN blog by creating a client folder with Create React App, using npm and npx, and locating public/index.html and manifest.json.

Learn to configure Tailwind CSS in a React project by installing Tailwind, creating PostCSS and Tailwind config files, updating index.css, and applying utility classes like bg-red-500, text-center, and text-white.

Create the blog app component by adding a pages folder and a home page, style with tailwind, and set up react-router-dom routing for page navigation.

Create and integrate about, article list, and single article pages by adding new files in the pages folder, updating content on the home page, and importing these pages into routes.

Create a responsive nav bar component in a MERN blog app, using React Router links to navigate home, about, and articles pages, with Tailwind styling and a fixed top menu.

Learn to render articles in a MERN blog using react-router url parameters and the useParams hook to match an article by name and display its content, handling missing articles.

Build an article list page in a MERN app that displays article cards with thumbnails, titles, and excerpts, linking to each article using React Router paths.

Build a reusable article list component in a MERN blog to show related articles at the bottom of each post, passing articles as a prop and using a React fragment.

Create a generic not found page component in React, import it, and wire it into routes so missing articles display a dedicated 404 page instead of a blank message.

Initialize npm in the backend folder and install Express. Install development dependencies concurrently and nodemon, then modify package.json to add a server script for the Express app.

Create a server.js file, import express, initialize an app, define a hello world get route at /, and start the server on port 8000 with a start log.

Learn how to test a MERN blog backend with Postman by sending GET and POST requests to a localhost:8000 express server, and handle JSON bodies with express.json.

Explore how to use express route parameters to fetch data by id or name with get requests, including example endpoints like /users/:id and /articles/:name, and returning personalized responses.

Add comments to articles via a post request to /api/articles/:name/add-comments, sending username and text to update the article's comments in server.js; test with postman, with database support planned later.

Install and configure MongoDB, create a local database and articles collection, and seed it with sample data to prepare for building a blog with the MERN stack.

Install MongoDB npm package, connect to a local MongoDB instance with an Express server, and add a get route /api/articles/:name to fetch an article from the articles collection.

Refactor code by introducing a reusable with DB function for MongoDB operations. Implement and test the add comments endpoint to update article comments.

Use the fetch API to load and post article comments from the frontend, specifying method and body in the options, with get as default, and polyfill with whatwg-fetch for IE.

Learn to add useState and useEffect in a React frontend to fetch article data and display comments from the backend via the API/articles/[name] endpoint.

Display comments on the article page by creating a comments component and mapping article info to render each username and comment.

Build a stateful add comment form in a MERN blog, wire inputs to state, and post comments to an article-specific API endpoint.