Task Manager

Build and run

In the project directory, you can run:

npm install

Installs necessary dependencies of the project.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Functional Requirements

You can have a look at the functional requirements here

Tech Stack

• React.js
• Typescript
• MUI for UI components
• Redux for global state(redux-persist lib for persistence)

Component Hierarchy

• App is the entry point. It contains a Header and TaskManager component.
• TaskManager component consists of three components TaskFilters, Tabs, Table. It is task manager component in which we fetch initial info like all statuses names, their total number of tasks and update them in the store.
• TaskFilters contains two components Search and Sort
• Table component in turn contains TaskFocusModal and some operations required for keyboard operations and so on.

State and Apis

• Entire states of the app are stored in 2 categories(persisted ones and non persisted ones).
• We have 2 reducers, one used for persisting ones like(selected tab, search and sort info of every tab)
• For this task, we have not interacted with backend servers for data. Just used localstorage as replica of backend by dumping the data in the local storage for the first time when app loads.
• All async requests fetch data from local storage. You can have a look at this mimicking at /src/services/tasks.ts file. any backed data update request also updates data in the local storage.
• Please refer to state types of reducers to know more about the data structures of states stored.