MERN Stack Work Management Tool

Set up the front end of the mern stack work management tool by creating a React app named client, running it on localhost:3000, and configuring app.js and index.html.

Install Ant Design via npm, review the docs, and implement button components with props such as type, size, shape, and onClick, while also exploring config provider for theme customization.

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.

Organize the front-end architecture for the MERN work management tool by structuring src into pages, components, and assets, and implement routing for login, register, and home with react-router-dom and redux.

Build authentication screens—login and registration—using tailwind css with an entity form in a centered two-column grid; login captures email and password through form items and submits on finish.

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.

Set up the backend for the MERN work management tool by initializing npm, creating server.js with express, installing mongoose, json web token, bcryptjs, dotenv, and running on port 5000.

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.

Create the user model with a Mongoose schema, including first name, last name, email, and password, then prepare authentication endpoints and set up the users collection for upcoming registration endpoint.

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.

Develop an axios wrapper and a users module to handle registerUser and loginUser api calls to /api/users/register and /api/users/login, keeping api logic outside components.

Integrate the login API using an async try/catch flow, store the JWT in local storage, and navigate to the home page on success, setting up future authorization middleware.

Implement authentication middleware on the back end to validate JWTs and protect routes. Test the flow with front-end api calls using authorization header bearer token to fetch the logged-in user.

Guard frontend pages with a protected page wrapper that enforces token validation for all routes, handling get logged in user calls and secure navigation.

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.

Implement a redux toolkit loader using useSelector and useDispatch to manage global and button loading states during login and registration, with a spinner overlay for protected routes.

Learn to set up a utils folder with constants and helpers for form validation, creating entity form rules used across login and register in a MERN stack app.

Define three user roles—owner, admin, and employee—and map their permissions in a MERN project, including project creation, task assignment, and role-based UI rendering.

Add a project form user interface within the profile's projects tab in the mern stack work management tool, using a modal for project name and description.

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.

Build application programming interfaces with basic create, read, update, and delete operations for projects, including creating a project and retrieving all projects with optional filters and owner handling.

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.

Show projects in a mern stack work management tool by calling the retrieve api and rendering a data table with title, description, status, owner, and created date, formatted with moment.

Implement edit and delete operations for projects in a MERN stack work management tool, including routes for edit project and delete project, with find by ID to update or delete.

Implement delete project functionality in the MERN stack work management tool by calling delete project API, handling loading state, refreshing data on success or error, and sorting by created date.