
Learn Tailwind installation and setup alongside existing UI components in a MERN stack work management tool, balancing Tailwind with an entity library for rapid styling and live demo.
Styling the login page extends to the registration form, adding first name, last name, email, and password fields with login navigation and a 'let's get you started' prompt.
Connect Node.js with MongoDB using mongoose and dotenv, via a config/db_config.js file and the Atlas connection url, ready for backend authentication apis.
Learn to implement a user registration API using Express routes, bcrypt password hashing, and a robust response pattern that checks email existence, saves the user, and handles errors.
Build the login endpoint to check user existence, verify the plain password against the bcrypt-encrypted password, and issue a 24-hour JWT token containing the user id, returned under data.
Set up a minimal, protected layout with a header and navigation between home and profile, and configure nodemon to prevent backend restarts on client changes.
Implement user data management with redux toolkit in a MERN app, making user state globally accessible across routes by dispatching actions and using a user slice with a configured store.
Define the MERN stack project model in mongoose, including name, description, status, and owner, with a members schema for user id and role to manage project access.
Implement create project and fetch all projects by owner in the MERN stack work management tool, building payloads with owner and members and managing loading state.
Hello and welcome to the course on building a work management tool using the MERN stack!
In this course, we will cover a range of topics, including using Tailwind CSS and Ant Design for styling purposes, implementing Redux and Redux Toolkit for state management, and working with complex MongoDB queries.
We will also cover how to create separate interfaces for users, owners, admins, and employees. The owner will have access to the entire application, while the admin will have access to the tasks they have assigned and can also assign new tasks to employees. An employee can see and filter the tasks assigned to them and update the task status based on their activity.
The owner has the ability to delete admins and employees if any suspicious activity is found in the portal. They can also create new projects and invite other users to the project. Whenever the task status has been updated, both the admin and the respective employee will receive a notification. If an employee or admin is invited to the project, they will also receive a notification.
Throughout the course, we will provide 24/7 QA support and code access to help you along the way.
This course is suitable for developers who have some experience working with the MERN stack and want to learn how to build a work management tool with complex MongoDB queries and different user interfaces for owners, admins, and employees. By the end of this course, you will have the skills and knowledge needed to create a fully functional work management tool with real-time notifications and access controls.
What is MERN Stack?
MERN Stack is a collection of powerful technologies and robust, used to develop scalable master web applications comprising backend, front-end, and database components. It is JavaScript that is used for the faster and easier development of full-stack web applications. MERN Stack is a technology that is a user-friendly full-stack JavaScript framework for building applications and dynamic websites.
MERN Stack consists of four main components or can say four main technologies:
M stands for MongoDB ( Database ), mainly used for preparing document databases,s and is a NoSQL (Non-Structured Query Language ) Database System
E stands for Express, mainly used for developing Node.js web framework
R stands for React, mainly used for developing a client-side JavaScript framework
N stands for js, mainly used for developing the premier JavaScript web server
Each of these four technologies is important in providing an end-to-end framework for the developers. Even these four technologies play an important role in the development process of web applications.
Before MERN stack, it was earlier named as MEAN stack, MERN Stack is one of the variations of MEAN, here MEAN also comprises of four components or say four different technologies, i.e., M is for MongoDB, ' E ' is for Express, ' A ' is for Angular.js, and ' N ' is for Node, here if you will observe, then you can identify that in MEAN, ' A ', i.e., Angular.js is replaced by ' R ', i.e., React.js in MERN, the main reason behind is - MERN Stack is mainly used for faster development of smaller applications as compared with MEAN, MEAN stack is a mainly better option for large-scale applications. Still, it takes more time for the development of smaller applications. They also both have different structures comparatively.