<h1>Task Manager Documentation</h1><h1>Overview</h1>The Cloud-Based Task Manager is a web application designed to streamline team task management. Built using the MERN stack (MongoDB, Express.js, React, and Node.js), this platform provides a user-friendly interface for efficient task assignment, tracking, and collaboration. The application caters to administrators and regular users, offering comprehensive features to enhance productivity and organization.<h3>Why/Problem?</h3>Effective task management is crucial for team success in a dynamic work environment. Traditional methods of task tracking through spreadsheets or manual systems can be cumbersome and prone to errors. The Cloud-Based Task Manager aims to address these challenges by providing a centralized platform for task management, enabling seamless collaboration and improved workflow efficiency.<h3>Background:</h3>With the rise of remote work and dispersed teams, there is a growing need for tools that facilitate effective communication and task coordination. The Cloud-Based Task Manager addresses this need by leveraging modern web technologies to create an intuitive and responsive task management solution. The MERN stack ensures scalability while integrating Redux Toolkit, Headless UI, and Tailwind CSS to enhance user experience and performance.<h2>Admin Features:</h2><ol><li>User Management:</li></ol><ul><li class="ql-indent-1">Create admin accounts.</li><li class="ql-indent-1">Add and manage team members.</li></ul><ol><li>Task Assignment:</li></ol><ul><li class="ql-indent-1">Assign tasks to individual or multiple users.</li><li class="ql-indent-1">Update task details and status.</li></ul><ol><li>Task Properties:</li></ol><ul><li class="ql-indent-1">Label tasks as to-do, in progress, or completed.</li><li class="ql-indent-1">Assign priority levels (high, medium, normal, low).</li><li class="ql-indent-1">Add and manage sub-tasks.</li></ul><ol><li>Asset Management:</li></ol><ul><li class="ql-indent-1">Upload task assets, such as images.</li></ul><ol><li>User Account Control:</li></ol><ul><li class="ql-indent-1">Disable or activate user accounts.</li><li class="ql-indent-1">Permanently delete or trash tasks.</li></ul><h2>User Features:</h2><ol><li>Task Interaction:</li></ol><ul><li class="ql-indent-1">Change task status (in progress or completed).</li><li class="ql-indent-1">View detailed task information.</li></ul><ol><li>Communication:</li></ol><ul><li class="ql-indent-1">Add comments or chat to task activities.</li></ul><h2>General Features:</h2><ol><li>Authentication and Authorization:</li></ol><ul><li class="ql-indent-1">User login with secure authentication.</li><li class="ql-indent-1">Role-based access control.</li></ul><ol><li>Profile Management:</li></ol><ul><li class="ql-indent-1">Update user profiles.</li></ul><ol><li>Password Management:</li></ol><ul><li class="ql-indent-1">Change passwords securely.</li></ul><ol><li>Dashboard:</li></ol><ul><li class="ql-indent-1">Provide a summary of user activities.</li><li class="ql-indent-1">Filter tasks into todo, in progress, or completed.</li></ul><h2>Technologies we have used:</h2><ul><li>Front-end:</li><li class="ql-indent-1">React (Vite)</li><li class="ql-indent-1">Redux Toolkit for State Management</li><li class="ql-indent-1">Headless UI</li><li class="ql-indent-1">Tailwind CSS</li><li>Back-end:</li><li class="ql-indent-1">Node.js with Express.js</li><li>Database:</li><li class="ql-indent-1">MongoDB for efficient and scalable data storage.</li></ul>The Cloud-Based Task Manager is an innovative solution that brings efficiency and organization to team task management. By harnessing the power of the MERN stack and modern frontend technologies, the platform provides a seamless experience for administrators and users, fostering collaboration and productivity.<h2>SETUP INSTRUCTIONS</h2><h1>Server Setup</h1><h2>Environment variables</h2>First, create the environment variables file .env in the server folder. The .env file contains the following environment variables:<ul><li>MONGODB_URI = your MongoDB URL</li><li>JWT_SECRET = any secret key - must be secured</li><li>PORT = 8800 or any port number</li><li>NODE_ENV = development</li></ul><h2>Set Up MongoDB:</h2><ol><li>Setting up MongoDB involves a few steps:</li></ol><ul><li class="ql-indent-1">Visit MongoDB Atlas Website</li><li class="ql-indent-2">Go to the MongoDB Atlas website:<a href="https://www.mongodb.com/cloud/atlas" rel="noopener noreferrer" target="_blank" style="background-color: transparent; color: rgb(0, 0, 0);"> </a><a href="https://www.mongodb.com/cloud/atlas" rel="noopener noreferrer" target="_blank" style="background-color: transparent; color: rgb(17, 85, 204);">﻿https://www.mongodb.com/cloud/atlas</a></li><li class="ql-indent-1">Create an Account</li><li class="ql-indent-1">Log in to your MongoDB Atlas account.</li><li class="ql-indent-1">Create a New Cluster</li><li class="ql-indent-1">Choose a Cloud Provider and Region</li><li class="ql-indent-1">Configure Cluster Settings</li><li class="ql-indent-1">Create Cluster</li><li class="ql-indent-1">Wait for Cluster to Deploy</li><li class="ql-indent-1">Create Database User</li><li class="ql-indent-1">Set Up IP Whitelist</li><li class="ql-indent-1">Connect to Cluster</li><li class="ql-indent-1">Configure Your Application</li><li class="ql-indent-1">Test the Connection</li></ul><ol><li>Create a new database and configure the .env file with the MongoDB connection URL.</li></ol><h2>Steps to run the server</h2><ol><li>Open the project in any editor of your choice.</li><li>Navigate into the server directory. cd server</li><li>Run npm i or npm install to install the packages.</li><li>Run npm start to start the server.</li></ol><h1>Client Side Setup</h1><h2>Environment variables</h2><ul><li>VITE_APP_BASE_URL = http://localhost:8800 #Note: Change the port 8800 to your port number.</li><li>VITE_APP_FIREBASE_API_KEY = Firebase api key</li></ul> <h2>Steps to run client</h2><ol><li>Navigate into the client directory. cd client .</li><li>Run npm i or npm install to install the packages.</li><li>Run npm start to run the app on http://localhost:3000 .</li><li>Open<a href="http://localhost:3000/" rel="noopener noreferrer" target="_blank" style="background-color: transparent; color: rgb(0, 0, 0);"> </a><a href="http://localhost:3000/" rel="noopener noreferrer" target="_blank" style="background-color: transparent; color: rgb(17, 85, 204);">﻿http://localhost:3000</a> to view it in your browser.</li></ol>

HTML Developers

Javascript Developers

MySQL Experts

jQuery Developers

MongoDB Developers

NodeJS Developers

Bootstrap Developer

ExpressJS Developers

ReactJS Developers

json

AWS Cloud Migration Expert

Full Stack Web Application Task Management System

Bangladesh

Full Stack Web Application Task Management System

Useful links

Company

Information

Content Writers

Freelancers

Freelance Jobs

Online Jobs

Designers

Developers

Translations