Skip to content

peterT23/fullstack-task-managerment-app-FE

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Company task management

Functional specification

Company Task Management is a web app that allows team managers and their team members to create and manage tasks. The app is designed to help individuals and teams stay organized and on track with their daily tasks and projects.

Manager can register an account

Managers can invite new team members to the project. Each user provides a name, an email, and a password to create an account. Team members cannot register by themselves but need a manager's email invitation to set up their accounts.

After joining, users can manage their profiles, view and manage tasks, receive notifications, and collaborate with team members.

User Stories

Manager

  • As a manager, I want to be able to invite new team members and set up their accounts with their provided information (email, name).
  • As a manager, I want to be able to create a Project that will include task further
  • As a manager, I want to be able to add or invite user to team Members of the project
  • As a manager, I want to be able to create and assign and unassign tasks to specific team members .
  • As a manager, I want to be able to provide descriptions, set priorities, and deadlines for each project.
  • As a manager, I want to be able to provide descriptions, set priorities, and deadlines for each task.
  • As a manager, I want to be able to create projects that group related tasks together.
  • As a manager, I want to be able to view my team's tasks by assignee, status, project, and priority.
  • As a manager, I want to be able to monitor task progress and update tasks as needed.

Team Member

  • As a team member, I want to be able to login and edit my account profile.
  • As a team member, I want to be able to log in and out of my account.
  • As a team member, I want to be able to view my assigned tasks, deadlines, and priorities in one place.
  • As a team member, I want to be able to create the comment to the tasks, mark them as complete.
  • As a team member, I want to be able to collaborate with my team members by sharing files or resources related to the tasks.

Authentication

  • As a manager, I can create an account and log in/out of the manager’s app.
  • As a manager, I can create member account.
  • As a team member, I can login my account through a created account by manager
  • As a team member, I can log in and out of the app using my credentials.

Project and Management

  • As a manager, I can create a project with a title and description, and add tasks to it.
  • As a manager, I can create new tasks by entering a title, description, and selecting a project or category.
  • As a manager, I can view projects and tasks in different views.
  • As a manager, I can assign tasks to myself or to team members by selecting from a list of users.
  • As a manager, I can add priority and deadline to tasks.
  • As a team member, I can view all my assigned tasks in one place.
  • As a team member, I can update the status of my assigned tasks as their progress.

Team Collaboration

  • As a team member, I can view other members’ tasks.
  • As a team member or manager, I can leave comments on other members' tasks.
  • As a team member or manager, I can share reference document on other members' tasks or my task.

Endpoint APIs

Auth APIs

/**
 * @route POST /auth/login
 * @description Log in with email and password as manager or teamMember
 * @body {email, password, role}
 * @access Public
 */

Me APIs

/**
- @route GET /me
- @description Get current user info
- @access Login required
*/
/**
- @route PUT /me
- @description UPDATE USER PROFILE
- @access Login required
- @body { name, avatarUrl, shortDescription, Phone , Languages , jobTitle, facebookLink, instagramLink, linkedinLink, twitterLink }
*/

User APIs

/**
 * @route POST /users
 * @description Register new user as Manager
 * @body {name, email, password, role}
 * @access Public
 */
/**
 * @route POST /users/member
 * @description Register new user for team member. only manager can do
 * @body {name, email, password, role}
 * @access manager login required
 */
/**
 * @route GET /users?page=1&limit=10
 * @description Get user with page and limit and search by name
 * @access Login required
 */
/**

- @route GET /users/:id
- @description Get a user profile
- @access Login required
*/
/**

- @route Delete /users/:id
- @description delete user(member) 
- @access Login required
*/

Project API

/**
- @route GET /projects?page=1&limit=10
- @description Get all projects with pagination 
- @access Login required
*/
/**
 * @route POST /projects
 * @description Create a new project
 * @body { title, description,Budget, startDate,enddate , createdBy, priority, status }
 * @access login required
 */
/**
 * @route PUT /projects/:id
 * @description Update project/ edit project
 * @body { title, description,Budget, startDate, priority, status}
 * @access login required
 */
/**
 * @route DELETE /projects/:id
 * @description Delete a project
 * @access login required
 */
/**
 * @route GET /projects/:id
 * @description Get detail of single project
 * @access Login required
 */
/**
 * @route put /projects/:id/assign
 * @description // Assign project to user by ID
 * @access Login required
 */
/**
 * @route put /projects/:id/assignees
 * @description // Assign project to users by ID
 * @access Login required
 */
/**
 * @route put /projects/:id/unassign
 * @description // unAssign project from user by ID
 * @access Login required
 */
/**
 * @route GET /projects/:id/tasks
 * @description Get tasks of a projects
 * @access Login required
 */
/**
 * @route GET /projects/:id/tasks/status
 * @description Get tasks of a projects by status
 * @access Login required
 */
/**
 * @route GET /projects/:id/tasks/status
 * @description Get tasks of a projects by status
 * @access Login required
 */
/**
 * @route PUT /projects/:id/tasks/reorder
 * @description update  task order, task status  of a projects by drag and drop feature
 * @access Login required
 */

Task API

/**
 * @route GET /tasks?page=1&limit=10
 * @description Get tasks
 * @access Login required
 */
/**
 * @route GET /tasks/:id
 * @description Get details of a task
 * @access Login require
 */
/**
 * @route POST /tasks
 * @description create a new task
 * @body { title, description, startdate,enddate, status, projectID, createdBy, assignees ,priority }
 * @access Login required
 * /
/**
 * @route PUT /tasks/:id
 * @description Update a task/edit task
 *{ title, description, startdate,enddate, status, createdBy, AssignedTo , priority}
 * @access Login required
 * /
/**
 * @route put /tasks/:id/assign
 * @description // Assign task to user by ID
 * @access Login required
 */
/**
 * @route put /projects/:id/unassign
 * @description // unAssign task from user by ID
 * @access Login required
 */
/**
 * @route DELETE /tasks/:id
 * @description Delete a task
 * @access Login required
 * /
/**
 * @route GET /tasks/:id/comments
 * @description get comments of a task
 * @access Login required
 * /

comment APis

/**
 * @route POST /comments
 * @description create new comments
 * @body {comment, TaskID, commentUser,referenceDocument}
 * @access Login required
 * /
/**
 * @route PUT /comments/:id
 * @description edit comment
 * @body {comment}
 * @access Login required
 * /
/**
 * @route DELETE /comments/:id
 * @description delete comment
 * @access Login required
 * /
/**
 * @route GET /comments/:id
 * @description get details of comment
 * @access Login required
 * /

TASK ME ERD diagram

taskme ERD image

Image of Project

Screenshot 2024-08-12 at 22 37 17 Screenshot 2024-08-12 at 22 37 11 Screenshot 2024-08-12 at 22 37 02 Screenshot 2024-08-12 at 22 36 54 Screenshot 2024-08-12 at 22 36 47 Screenshot 2024-08-12 at 22 36 37

Tech stacks

Tech Stack

Frontend

  • React ReactJS: A JavaScript library for building user interfaces.
  • React Hook Form React Hook Form: For handling form inputs with minimal re-renders.
  • React Router React Router DOM: For routing and navigation between views.
  • Yup Yup Validator: For schema validation and form data validation.
  • Redux Redux Toolkit: For efficient state management.
  • DnD Kit DnD Kit: For drag-and-drop functionality.
  • Material-UI Material-UI: For sleek, responsive UI components.

Backend

  • Node.js Node.js: For running JavaScript on the server.
  • Express.js Express.js: A web application framework for Node.js.
  • Express Validator Express Validator: For validating and sanitizing form data.
  • MongoDB MongoDB: A NoSQL database for storing application data.

These technologies together provide a robust foundation for building a fully-featured task management application.

linkDemo : https://taskme-fe.netlify.app I am using render.com to upload my free Back-end server so it takes time to load everything on screen. please wait for it!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages