# Team5 - Final Project

## **Table of content:**
- User stories
- User journey
- Labels in Github
- Figma and UI
- Colors and Fonts
- Technologies
- Database schema

<h2 id="stories">User Stories</h2>

#### As a Task manager

- I can login to my account.
- I can see visualization the progress of tasks and projects through charts and graphs.
- I can see all the tasks that I have in all projects.
- I can create a new project.
- I can create tasks in the project in the to-do section.
- I can assign tasks to team members, set due dates, and upload some attachements.
- I can change the state of the taks "to-do, doing, review, done".
- I can delete any task.
- I can update team members in the task.
- I can receive notifications when the state changed by team members.
- I can search and filter tasks based on various criteria such as due date, priority, or assigned team member.
- I can logout from the website.
- I can delete my account.

### As a Team member

- I can login to my account.
- I can see visualization the progress of my tasks and projects through charts and graphs.
- I can see all the tasks that I have in all projects.
- I can see my tasks in a specific project as a list.
- I can see my tasks in a specific project as a board.
- I can see my tasks in a specific project in calendar mode.
- I can attach files or relevant documents to tasks.
- I can update the status of my tasks "to-do, doing, review, done".
- I can receive notifications when new tasks are assigned to me.
- I can search and filter tasks based on various criteria such as due date, priority, or assigned team member.
- I can logout from the website.
- I can delete my account.

## User Journey

- User Registration:
- User clicks on the "Sign Up" button, then is presented with a registration form, then he's enters their name, email, phone and password, after that submits the registration form.

- User Login:
- User clicks on the "Log In" button, then is presented with a login form, then he's enters their email and password, then submits the login form, after that he's authenticated and logged into the app.

- Create a Project:
- User is directed to the home page, then project manager clicks on the "Create Project" button, then he's enters the project details such as title and description, then he's creates the project, after that the new project is added to the project manager project list.

- Add Team Members to the Project:
- Project manager selects a project from the project list, then he's navigates to the project details page, then he's clicks on the "Add Members" button, then he's enters the email addresses of members to invite them, after thatInvited members receive an email invitation to join the project.

- Create Tasks:
- Project manager clicks on the "Add Task" button, then he's create the task by entering the details such as title, description, label and assignee, after that the new task is added to the to-do section.

- Assigne Members for the task.

- Search Tasks:

- User enters a search keyword in a search bar, then the task list is filtered to show only the tasks matching the search keyword.

- Filter Tasks
- User clicks on a "Filter" button or opens a filter panel, then selects filter criteria such as due date, priority, or assigned team member, also applies the filters to update the task list view and the task list is filtered to show only the tasks that meet the selected criteria.

- Track Task Progress:

- User can see the status of each task (e.g., to do, doing, review, done) also he can update the task label as they make progress and can add attachments for collaboration.

- Communication and Collaboration:
- User can communicate with team members within the app through chat.

- Dashboard and Overview:
- User has an overview of projects, collobrator and tasks statistics and their charts.

- Notifications:
- User receives notifications for task assignments.

- Logout:
- User clicks on the "Logout" button and he's logged out of the app, ,then is redirected to the login page.

## **Labels in Github**
done, awaiting review, to-do, in-progress , approved.

#### Technologies
- React
- Nodejs
- Expressjs
- Postgressql
- AWS EC2
- Upload files >> S3
- Chartjs "charts library"
- Socket - SG

### Database Schema

Link <a href="https://drawsql.app/teams/nada-14/diagrams/copy-of-team-5
">here</a>