MERN stack projects Based Course Completely Redone

Build a currency converter app with React and Node.js, using Exchange Rate API to convert between currencies, and connect backend with Express, Axios, CORS and dotenv to the frontend.

Explore caching with Redis in a MERN stack app, showing cache hit and cache miss, and how data is cached to reduce MongoDB calls and improve response time.

Develop a simple mern stack app that creates and fetches user documents, implementing caching with Redis to boost performance while using mongoose and express with a MongoDB backend.

Implement caching with Redis in a MERN app using a unique cache key, handle cache hits and misses, query MongoDB on misses, expire after one hour, and invalidate on creation.

Set up a vite-based react frontend, install axios, and fetch users from the backend with an endpoint, handling loading, errors, and cors configuration.

Build the backend for a MERN stack project using MVC and mongoose data models for users, categories, and transactions. Implement error handling, authentication, and authorization with express routing middlewares.

Build a user authentication system by creating a users controller with register, login, and profile in an MVC setup, wiring routes with Express, bcryptjs, and jsonwebtoken.

Implement a login controller that authenticates users by email and password with bcrypt and issues a json web token for secure, 30-day expiry.

Implement robust error handling in a MERN stack by creating an error handler 'murderer' middleware that returns errors as json with message and stack, and wire it with app.use.

Implement a protected user profile in a MERN stack app with a profile controller and isAuthenticated middleware that verifies JWTs and attaches the user to the request.

Implement update password and update profile controllers, hashing the new password and updating username and email behind authentication; ensure routes for change password and update profile function correctly.

Learn to implement category management in a mern stack app by building create and list endpoints for categories, enforcing required fields, validating types, normalizing names, and ensuring per-user uniqueness.

implement a transaction controller to add and list a user’s transactions, using embedded category names with no id, and enforce validations for type, amount, and date while enabling category-based filtering.

Implement transaction filtering in a MERN app using start date, end date, type, and category query parameters; build a dynamic filters object and query MongoDB.

Update and delete transactions in a MERN stack app by finding by id, validating the user, and saving updates to type, category, amount, date, and description, or deleting by id.

Update category and propagate changes to related transactions, normalize names to lowercase, enforce user authorization, and reassign deleted categories to uncategorized via MongoDB update many.

Learn to set up a front end using React, Redux Toolkit, and React Query with Tailwind CSS, Axios for requests, and form validation tooling, via Vite or Create React App.

Implement navigation with React Router DOM, install the package, and render a template with a home page, navbar, and private/public routes in a MERN stack project.

Configure React, Redux, and React Query to manage global and server state with a single user authentication slice, store setup, and provider integration.

Configure react query to manage server state using useQuery and useMutation, wrap the app with a query client provider, and enable dev tools.

Learn to implement login with React Query useMutation in a MERN stack app by posting credentials via Axios to the v1/users/login endpoint, with loading, error, and success handling.

Persist the login user by dispatching a login action to the Redux store and saving the user to local storage, then initialize from local storage to restore on reload.

Implement logout by removing the user from local storage and toggle between private and public nav bars based on the stored token, using a getUserFromStorage utility.

Update the navbar dynamically on login and logout by reading user data from the redux store with useSelector instead of local storage, dispatching login actions at app entry.

Implement user registration in a MERN stack project by reusing login logic, creating a register API, validating username, email, and password with Formik, and redirecting to login on success.

Implement adding a category by rendering the category form, wiring category services for create and list, and handling validation, errors, and token-based authorization from local storage.

Display the category list by fetching real categories from the backend with useQuery, using authorization token, and render items with color coding and edit/delete icons, with loading and error states.

Learn to delete and update a category in a MERN app by using the category id with update and delete APIs, plus routing and navigation to the categories page.

Demonstrates adding a transaction in a MERN stack app by building a form for type, amount, category, date, and description, fetching categories, and posting via Formik and useMutation.

Display the dashboard with a transactions list and chart, fetch transactions via a list api, and filter by start date, end date, type, and category.

Learn to filter transactions by start date, end date, type, and category (including uncategorized) with frontend state, a single change handler, and axios params for the API, with react query.

Learn to integrate a donut chart with Chart.js in a React app, fetch transactions, compute total income and expenses with reduce, and render the chart.

Create a donut chart to visualize total income and total expenses using a structured data object with labels, datasets, and chart options for legends and titles.

Learn to build a user profile page with password change and profile update forms, wiring API services, validation, and token-authenticated mutations for a MERN stack app.

logout after password changes by dispatching a redux action and clearing local storage, then update the user profile via a mutation and handle responses.

Protect private components by implementing a higher order component (off root) in React Router Dom, using localStorage to verify a logged-in user and redirecting to login when unauthorized.

Build a mern stack blog app with passport js authentication and google oauth, subscription access, and revenue from post views, plus post categories, creator rankings, comments, and likes and dislikes.

Explore the MERN blog project live demo with public and private navigation, search and filter by category, pagination, and server state managed by React Query.

Explore MERN project development styles, from front-end first with React UI and mock data to back-end first with Node.js and Express, plus feature-by-feature, MVP, full-stack integration, agile, and test-driven development.

Explore the project development roadmap for a MERN stack course, outlining five or more phases from building a complete CRUD application to adding file upload, authentication, and payment.

Set up MERN stack by installing Node.js, VS code, Postman, and MongoDB compass; connect to MongoDB with account and connection string; create a React app with Vhit, Redux Toolkit, Tonestack.

Learn a decoupled MERN stack setup using the MVC pattern (model, view, controller) and a practical folder structure with controllers, models, middlewares, and a server file.

Learn to create an express server from environment setup to running on port 5000, including npm init, installing express, creating the server file with middleware, routes, and testing requests.

Model and relate data for a mern stack project by defining users, posts, comments, earnings, payments, plans, categories, and profanity with one-to-many, one-to-one, and many-to-many relationships.

Explore how mongoose defines schema and creates models to structure documents, validate data, and perform CRUD operations on MongoDB in a simple, schema-driven way.

Modelling data with mongoose schemas, including category, post, and user models, to build a MERN stack app with references, timestamps, and feature-by-feature development.

Build the backend post creation route in a MERN stack project using MVC, JSON parser middleware, and async/await; define title and description, and test with Postman before frontend integration.

Connect to a MongoDB backend using mongoose and implement a connect db function. Configure and access the MongoDB URL via dot env and environment variables, then verify the connection.

Explore the frontend stack for the MERN project, connecting the client to the backend, using React Query for asynchronous requests, Tailwind CSS for UI, and Redux Toolkit for global state.

React Query vs Redux: learn how React Query handles asynchronous API requests while Redux Toolkit manages global authentication state in the store, including token handling.

Create a React application with Vite, install dependencies via npm, and run npm run dev to see instant updates, fast development, and the folder structure.

Learn to handle forms in React using Formik and Yup by building a create post form with title and description, real-time validation, onSubmit handling, and inline error messages.

Install and configure react query in a MERN stack app, using npm, top-level query client provider, and dev tools, then leverage queries and mutations to manage posts.

Learn how to implement a create post request using React Query mutations, Axios post, and a dedicated post API module, returning a promise for the mutation to resolve.

learn to manage loading, success, and error states in a MERN stack project using React Query and useMutation to display pending, success, and error feedback.

Implement a backend get route to fetch all posts and a frontend post list that uses React Query to display titles and descriptions with loading and error handling.

Implement update and fetch single post APIs using put and get methods in api v1, updating title and description by post id with find by id and update.

Implement client-side navigation using React Router Dom by configuring browser router, defining routes for home, create post, and post list, and building a public nav bar with links.

Build post update functionality in a MERN app by implementing a backend update route, using a dynamic /post/:id page, and pre-populating an edit form in the frontend.

Update a post in a MERN stack app by pre-populating an edit form with existing data, then call a put endpoint via formik and useMutation.

Enable delete functionality in the mern stack project by adding a delete route and controller, implementing find by id and delete. Use mutation with react query for client updates.

Enhance the MERN stack project by implementing robust error handling with React Query, covering system errors when the backend is down and user errors from invalid IDs or missing data.

Build error handling in a MERN stack app by creating an express error handling middleware, passing errors with next, returning 500 responses with messages, and displaying stack traces for debugging.

Prevent duplicate posts by checking title in the payload and throwing a 'post already exists' error. Learn server-side error handling with react query, error messages, and express-async-handler integration.

Learn to simplify express error handling by using express-async-handler to wrap route callbacks, eliminating next and try-catch, and install the package with npm i express-async-handler.

Discover how the MVC design pattern separates a web app into model, view, and controller to manage data, presentation, and user requests using Express and MongoDB.

Implement mvc design on the back end and restructure the project with express router to create model-specific routers, like post router, export them, and connect via app.use.

Refactor the express router into a dedicated post controller, implementing mvc for posts with create, list, get, update and delete, exporting controllers and applying api versioning.

Install Tailwind CSS and React Icons in a Vite-based React app, apply the framework, add Tailwind directives, and use provided templates to display and create posts.

assemble and adapt a post list and create post templates with Tailwind CSS. configure fetching and rendering of posts, integrate image placeholders, and style with React icons.

Enhance navigation by integrating a public and private navbar using headless ui, hero icons, and react-icons in app.js, with the homepage and post ui styled by the provided css.

Display the post details component with fetch post logic to render the post image and description, show a loading state, and prepare for future update and delete features.

Configures backend file upload in a MERN project using Cloudinary and motor storage Cloudinary, with single-file uploads via middleware and environment variables for cloud name, api key, and api secret.

Upload images from the browser and save them to the database, then display uploaded images in the post list and post details using the image path.

Implement client-side file upload with live image preview and error handling. Validate size and type, and send the file with json data using form data to the server.

Build a client-side file upload flow by creating form data, appending description and image, sending it to the backend via the post api, and validating the response.

The lecture demonstrates using React Query to show loading, error, and no post found alerts, with a reusable alert component styled by Tailwind CSS and dynamic messages.

Integrate authentication in a MERN project with passport, focusing on backend and a user model (username, email, password, Google ID, method) and local plus social strategies (Facebook, Google, GitHub, Twitter).

Clarify authentication versus authorization and implement passport local and Google login strategies for MERN; generate and verify JWT tokens, and store them in a session to secure stateless requests.

Explains implementing user registration in a MERN app by building a registration controller with async handling, bcrypt password hashing, and a /users/register route, preparing for login with Passport.

Configure Passport Local to enable user login with username or email, verify hashed passwords with bcrypt, and wire the strategy into server.js to handle login.

Build a passport local login flow in a Mern stack project by creating a login controller, authenticating with passport, and issuing a jwt stored in an http-only cookie.

Mount login and register components in a MERN project, implement client-side forms with validation, use mutation to register via axios to a users API, and redirect to login with cookies.

Learn to implement client-side login in mern stack project using passport-local, duplicating the registration flow to create a login api with username and password, and store the token in cookies.