Art museum task manager dashboard created with React and Context API, using Material-UI and ApexCharts.js to power the user experience and data visualization.
In the art world, it is rumoured that Banksy along with a team of famous street artists are launching a top secret plan to break into the Museum of Modern Art, and replace their artworks with street art ones.
To make this mighty plan happen, they need a system where they can create and organize tasks, while tracking their progress as well as all the data of the artworks to be replaced.
The goal of this project was to design and build a single interface displaying the team's tasks, data and timeline.
The live version is available at: https://moma-dashboard.netlify.app/
This project was created using CRA. To run the code, first install all the packages needed with:
npm install
After the installation, start the project executing the command:
npm start
It will open http://localhost:3000 (default), so you can view the project in the browser.
This project was built upon 3 main features: Task Manager, Artworks Table and Analytics.
After breaking them down, Banksy is able to:
- Task Manager
- List all tasks
- Filter tasks by date, priority and assignee
- Mark a task as completed
- Create a new task
- Artworks Table
- List all artworks
- Filter artworks by search value
- Sort artworks according to column
- Analytics
- View the operational Metrics:
- Total artworks
- % of urgent tasks
- % of completed tasks
- Track the operations Timeline:
- Number of tasks per month
- View the operational Metrics:
All the features were implemented using the Material-UI framework except the Analytics. For this feature, in particular, ApexCharts.js was used given the data visualization needs.
It should be noted that this project used React's Context API for state management purposes, despite having been fed with randomized data.
The project was architectured in the following way:
The /src contains all the React codebase, as well as the App.scss overall stylesheet.
.
├── components
│ ├── artworks
│ │ └── ArtworksTable.jsx
│ ├── common
│ │ ├── Footer.jsx
│ │ ├── Logo.jsx
│ │ └── SideDrawer.jsx
│ ├── metrics
│ │ ├── CompletedTasks.jsx
│ │ ├── TotalArtworks.jsx
│ │ └── UrgentTasks.jsx
│ ├── tasks
│ │ ├── Task.jsx
│ │ ├── TaskFilters.jsx
│ │ ├── TaskForm.jsx
│ │ └── TaskList.jsx
│ ├── timeline
│ │ └── Timeline.jsx
│ └── Dashboard.jsx
├── constants
│ └── actions.jsx
├── contexts
│ ├── artworks.context.jsx
│ ├── tasks.context.jsx
│ └── users.context.jsx
├── data
│ └── makeData.jsx
├── hooks
│ └── useInputState.jsx
├── reducers
│ └── tasks.reducer.jsx
├── styles
│ ├── ArtworksTableStyles.jsx
│ ├── SideDrawerStyles.jsx
│ ├── TaskFiltersStyles.jsx
│ ├── TaskFormStyles.jsx
│ ├── TaskListStyles.jsx
│ └── TaskStyles.jsx
├── App.jsx
├── App.scss
└── index.jsx
This folder includes all the components used to build the project, dumb and smart ones.
While the dumb components used were clustered at the /common folder, smart components were
arranged according to the their features under /artworks, metrics, /tasks and /timeline.
Given the usage of React's Context API, all the context components, reducer functions and actions needed can be found under these 3 folders.
It contains all the functions used to randomize data about artworks, tasks and users needed to feed this project.
It includes all the customized hooks used to build this project.
Since the components were styled using Material-UI’s styling solution and best practises, their files were clustered here. This way, the components’ logic and styles are cleanly separate.
Pull requests are welcome. For major changes, open an issue first to discuss what you would like to change.
Please make sure to include or update tests as appropriate.
Copyright © 2021 Vasco Oliveira