MERN Stack : MongoDB Node Express & React + Redux-Toolkit

Set up a fresh mern stack project from scratch, organize backend and frontend folders, configure package.json for module type, install api-access packages, and enable automatic restarts in Visual Studio Code.

Create an index file in the server folder to set up a basic Express server, import Express, define routes, and run the app to serve a hello Express response.

Create a MongoDB project and database, obtain the connection string, and connect your backend with Mongoose, adding logging with Morgan and error handling.

Structure your work by creating folders, including models and controllers, to organize the project and house business logic.

Implement authentication by creating a user model with Mongoose, including name, email, password, and Google fields. Enable Google sign-in and Google ID handling to support multiple login methods.

Implement a sign-up controller for the MERN stack that validates unique emails, hashes passwords, creates the user with name and last name, and returns a JWT token with expiry.

Develop the sign-up route in an express api by wiring a user controller, exporting it, and configuring the router to expose /users/sign-up on localhost:5000.

Test the API with Postman by sending name, email, and password to sign up, receive a token and a MongoDB id, and verify the user in MongoDB.

Implement a sign-in API in a MongoDB-based MERN app by verifying user existence, validating passwords, issuing a signed token with a one-hour expiry, and handling errors with clear responses.

Add and test a sign-in API using Postman, validate credentials against a MongoDB user, handle invalid and non existent logins, and return name, email, password, and a token.

Explore the theory behind the reader toolkit and its role in preparing the frontend setup. Skip writing code in this section if you already know the reader toolkit.

Explore how Redux centralizes state in a single store, uses actions and immutable updates to produce a new state, and notifies subscribed components to keep the app updated.

Discover how Redux Toolkit reduces boilerplate, simplifies store configuration, and enables mutating logic in reducers for React apps, with built-in tools.

Explore the Redux Toolkit API, including configurator, createReducer, createAction, createSlice, createAsyncThunk, and createEntityAdapter, and how they simplify configuring, reducer logic, action creation, async flows, and normalized data.

Understand how createAsyncThunk handles asynchronous logic in Redux Toolkit, including pending, fulfilled, and rejected states. See how to wire actions to reducers and manage API calls.

Create a React frontend using create-react-app, name the project client, install Redux Toolkit, React Router, Material UI, Moment, and other packages, then launch the app in the browser.

Clean up the React app, configure mdb, and integrate toastify, then structure the project with components, pages, and a redux folder for scalable state management.

Enable routing in the mern stack app by configuring react-router with browser router, defining routes for home, login, and register, and rendering the login and register components for navigation.

Develop a login page using React hooks and Material UI components, wiring email and password state to existing MongoDB data with a change handler and validation, plus a signup link.

Configure Redux Toolkit in the React app by building a store, creating auth slices, and wiring the provider to enable backend API integration and state management.

Develop and dispatch a login action using redux toolkit, sending email and password to localhost:5000, handle pending, fulfilled, and rejected states with toasts, and store token and profile in localStorage.

Learn to handle login errors by capturing backend messages such as 'user does not exist' or 'invalid credential,' and display a loading spinner during authentication.

Develop and test the register page by adapting the login form, adding first name, last name, email, password, and confirm password fields, and enabling navigation to sign in.

Write and dispatch the redux register action, validate form fields and password confirmation, store the returned auth token in local storage, and confirm user data is stored in MongoDB.

Implement a Google sign-in button on the login page using React, configure the client ID, and handle success and failure cases, including a cookie policy.

Set up a Google client ID for a MERN app by creating a Google project, configuring web credentials, and enabling Google sign-in to obtain email, name, and token ID.

Create a Google sign-in API controller that saves user name, email, and google id to MongoDB, processing the token from React and returning a 200 json response.

Seamlessly implement google sign-in by creating a redux action, wiring the sign-in flow to MongoDB storage, and dispatching user data including name, email, google id, and token.

Design and implement a responsive header for the MERN app using Material UI components, featuring a fixed dark top bar, a hamburger menu, and links such as home and dashboard.

Customize the header to show login-related links based on user state, using useSelector to read the store and toggle login, logout, and a dashboard link when logged in.

Persist user sessions in a MERN app by implementing redux toolkit reducers for login and logout, syncing with localStorage, and updating the header to show the logged-in user.

Construct a tour model on the backend using Mongoose, define a tour schema with title, description, creator, image file, created date, and default values, then export the Mongoose model.

Create an express tool controller in the MERN stack, implementing create tool with 201 response and fetch all tools from the MongoDB using the tool model.

Develop a frontend tour form using material components to add or edit tours with title and description, image upload, validation, and navigation to the homepage after submission.

Build a tour creation form in a MERN stack app using a material chip input for tags, image upload with base64 conversion, and redux toolkit for tour data and validation.

Implement a Redux create tour action by wiring a frontend api to a backend endpoint, updating the tour state with a producer, and navigating after successful creation.

Dispatch a create tour action in a redux-backed frontend, wiring in user data and handling errors. Map the tour fields (title, description, image) to backend model and persist to MongoDB.

Develop a backend middleware using JWT to identify tool creator, handling email/password and Google logins, decoding tokens, and attaching the user id as creator for create, update, and delete operations.

Learn to attach the stored user token from local storage to axios requests, enabling the backend middleware to authorize actions and secure resource creation in a MERN stack app.

Implement a redux-driven frontend flow to fetch and display all tools from MongoDB via the backend, building the API, actions, and promise lifecycle for the homepage.

Display MongoDB tools on the home page using material UI components and redux toolkit. Dispatch actions to fetch data and render tour cards.

Build a reusable tour card component using MTV with material and bootstrap, wiring image, title, description, tags, and a read more link to a single tour page.

Implement a single tour retrieval in the controller by wiring the route, querying MongoDB by id, and returning the result without requiring user login.

Develop and wire a Redux action for a single item, adapt components and routes, and render the single item view on the homepage to demonstrate the page works.

Build a single tour page in a MERN stack app by importing material design bootstrap components and wiring redux toolkit actions to fetch and display tour details.

Create a backend endpoint to fetch widgets created by logged-in user, validate user ID with Mongoose, and integrate route with the frontend to display ads under the advert section.

Connect the frontend to the backend endpoint to fetch user tour widgets, wiring a Redux action and building a dashboard page in React with the user id.

Dispatch the user tours action on the dashboard to fetch and display tours created by the logged-in user using redux toolkit.

Create a dashboard that displays user tours with images, names, and tour details using card layout, map integration, and responsive styling in the mern stack.

Develop and integrate a spinner component for the home page and dashboard to indicate loading states. Safeguard routes so logged-out users cannot access protected pages.

Secure routes in a mern stack app by building a loading to redirect private route that navigates unauthorized users to the login page after a countdown, using react and useSelector.