MERN Stack Social Media Blog Posting Application (2022)

Set up a backend with Node.js and express, initialize npm to create package.json, install nodemon, and create a basic express app with an api on port 5000.

Configure MongoDB Atlas and connect a MERN stack blog app to a database, enabling user sign up/login, blog CRUD across two collections, and mongoose-based connection on port 5000.

Define a user model with a mongoose schema for name, email, password, and blocks; export the user collection and outline controllers for user API routes in a MERN stack app.

Create an Express router with a get route to fetch users. Expose at /api/users and link to the user controller with a try-catch.

Create a signup flow in a MERN app with a sign up route and controller, validate name, email, and password, handle existing users, and save new users with mongoose.

Learn how to securely store user passwords by hashing them before saving to MongoDB, using a Node.js library, and updating the signup workflow to save hashed passwords.

Create a login route and controller, extract email and password from the request body, verify the user exists, compare hashed passwords, and return 200 with login successful or 400 unauthorized.

Create a blog model schema in Mongoose by defining a block schema with title, description, image, and user fields, and export it as a Mongoose model.

Create a route to fetch all blogs from the database using an express router, a block controller, and a model, handling success responses and no blocks found cases.

Implement add blog to database functionality in a MERN stack app by handling post /add requests to create and save a blog with title, description, image, and user.

Implement the blog update flow using a put route, extract the block ID from request params, update title and description in MongoDB, and return the updated block as JSON.

Create the get blog by id functionality in MERN stack by handling get request to fetch block by id and return it as JSON, with error handling for missing blocks.

Delete a blog block in a MERN app by finding by id, removing it from the database, and handling errors with JSON responses.

Relate the user to blocks using Mongoose references so each block links to one user and each user can own multiple blocks, with an empty blocks array on signup.

Add a blog block to the database by validating the user, linking the block to the user, using a mongoose session and transaction, and updating the user's blocks.

Delete a blog block by removing it from the blocks collection and the user’s blocks, using populate to fetch user details and returning a 200 status.

Create a get by user ID endpoint to fetch all blocks for a user, using populate to attach blocks to the user. Implement error handling and successful 200 responses.

Install and initialize a React frontend for the MERN stack social media blog app, set up dependencies, build core components, and configure material UI for the header.

Build a blog app header with material UI, using app bar, toolbar, and typography, add login and sign-up buttons, and place controls on the right with gradient styling.

Enable routing in the application by integrating react-router-dom with browser router, creating login and signup flows, and wiring routes for blocks, user blocks, and block details.

Install and configure Redux Toolkit to manage authentication state with isLoggedIn; add login and logout reducers, wrap the app with the Redux provider, and use useSelector to render header links.

Create a dynamic login and signup page with Material UI, featuring reusable text fields, toggle between forms, and stateful inputs with onChange and submit handling.

Send a login request from the frontend to the backend with email and password using axios. Handle the response to confirm a successful login.

Modify the signup request by adding a type parameter and sending the name with credentials, then update redux state via useDispatch to manage login, signup, and logout.

Fetch all blogs from database using axios in a useEffect, store them in blocks state, and render each blog as a Material UI card with title, description, image, and user.

Fetch the logged-in user's blogs by retrieving the user id from local storage and using an axios get request to fetch the user's blocks in a useEffect.

Create a frontend form to add blogs to the database, manage input state with change handlers, and post data to the backend to save the new blog entry.

Implement edit and delete icons for a logged-in user's blogs in a MERN stack app, using user-id checks and local storage to show options only on the user's blocks.

Fetch blog details by id from the url using a detail component, then populate and update the blog form with the retrieved data using useEffect and axios.

Update a blog post by sending a put request via axios to localhost:5000/api/blog/update, including id, title, and description, while removing image field, handling errors, and navigating back to my blocks.

Define a delete workflow for blog posts by wiring a delete icon to a handle delete function, issuing an axios delete request to the server, updating routes and UI.

Optimize block management by deleting blocks and navigating to the blocks page to refresh the UI, using useNavigate to redirect to the appropriate routes after actions.

Fix the card style by adding a horizontal bar after the image, revealing the description, and define icon button colors with warning and delete colors to reflect changes.

Implement protected routes by wrapping content in a login check and redirecting unauthenticated users. Render blocks when the user is logged in to safeguard content and guide users to login.

Apply Roboto font from Google fonts to the MERN stack blog app, and generate Material UI styles to enforce typography across components such as logo and text fields.

Implement auto login by checking local storage for the user id on app render with useEffect, dispatching login, and clearing on logout to persist login across refreshes.

Explore mern stack social media blog posting app, detailing login and design features, front-end blocks, and backend relations between users and blocks, noting it is not production-ready.