Project Management System (Cross-check)

[Seala11]

1. Task: https://github.com/rolling-scopes-school/tasks/blob/master/tasks/react/project-management-system-EN.md

2. Screenshot:
   

3. Deploy: https://project-management-app-seala11.netlify.app/
   Backend: https://rs-trello-2022.up.railway.app/api-docs/
   Video presentation: https://youtu.be/yxg6u6Ufsrw

4. Done 04.12.2022 / deadline 06.12.2022

5. Score: 60 / 60

Welcome route (7 points)

• The welcome page contains general information about the developer, project, and course. 1 point
• In the upper right corner there are 2 buttons: Sign In and Sign Up. 1 point
• If login token is valid and unexpired, change buttons Sign In and Sign Up on "Go to Main Page" button. 2 points
• When the token expires - the user should be redirected to the "Welcome page" automatically. 2 points
• Pressing the Sign In / Sign up button redirects a user to the route with the Sign In / Sign up form. 1 point

Sign In / Sign Up (8 points)

• Buttons for Sign In / Sign Up / Sign Out are everywhere where they should be 2 points
• Form fields should be implemented according to the backend API. Validation should be implemented. 4 points
• Upon successful login, the user should be redirected to "Main route" (/boards) 1 point
• If user already logged in and he try to reach this routes - he should be redirected to Main route. 1 point

Main route (/boards) (8 points)

• Board creation functionality 2 points
• Displays all created boards as a list/grid 1 point
• Each board in the list is displayed with a small preview of available information (title, description, etc). By clicking an element the user navigates to the board item (Board route). There's also a button for board deletion. 1 point
• When trying to delete the board, user receives a confirmation modal. The confirmation modalis a generic component (one for the entire application). 1 points
• The user profile editing functionality is implemented. (/settings) 3 points

Board route - (26 points)

• Button for column creation is displayed 1 point
• If a board contains at least one column - a button for task creation is displayed/become enabled as well 1 points
• A modal windows with forms is displayed for column and task creations 3 points
• A vertical scrollbar is displayed in the column when overflowing with the number of column tasks 2 points
• The page itself on the current route doesn't have a vertical scrollbar 1 points
• With the help of drag-n-drop, we can swap columns. 3 points
• With the help of drag-n-drop, we can change the order of tasks within a column. 3 points
• With the help of drag-n-drop, we can change the task belonging to the column. 5 points
• The functionality of viewing and editing of the task has been implemented. 3 points
• The task must have a delete task button. On click: confirmation modal -> delete. 1 points
• At the top of the column should be Title. When you click on it, it should become an input, with Submit and Cancel buttons near it. After entering text in the input and clicking Submit - the Title of the column should change. 2 points
• The column should have a delete button. By clicking -> confirmation modal -> when approving -> deleting. 1 points

General requirements - (11 points)

• Backend error handling - (Not found, unhandled rejection, etc) should be performed in a user-friendly way (toast, pop-up or anything else you implement). 4 points
• Localization 1 point
• Backend is deployed and publicly available 2 points
• Sticky header 2 points
• Extra scope 2 points

Extra scope

• User can add labels (colors) for the task
• User can add members to the task
• Edit board title and description on the main route (/boards)
• Search board (by title) on the main route (/boards)

Penalties (0)

• React default favicon (- 1 points)
• The presence of errors and warnings in the console (- 2 points) for each
• The presence in the console of the results of the console.log execution (- 2 points) for each
• @ts-ignore or any usage (search through github repo) (- 1 point) for each
• Making commits after the deadline (- 20 points)

Technical requirements

• localization (at least 2 languages). Ru / En
• semantic layout
• adaptive layout. The minimum page width of the application is 320px
• use of React 18 + suspense feature.
• Private routes, 404, error boundary
• Typescript