Requirement

To create a dashboard as per the figma design. This will be built using React and TypeScript. The screen should be responsive and mobile-friendly.

Demo Screenshots

We display the hamburger menu instead of the left nav (main menu)

There are four main folders:

assets: this contains all the images, icons, in svg or png
components: this contains all the common components, in addition to custom components as per figma design. Each component has 4 main files:
- <COMPONENT_NAME>.tsx: this is the main component
- <COMPONENT_NAME>.styled.ts: this contains all the styled-components used to build the component from scratch
- utils.tsx: this contains all extra utility methods or components
- types.ts: this contains all custom typescript types
screens: this contains all the ui screens (in this case, only one screen which is dashboard)
theme: this contains the theme for the overall app, implemented using styled-system library

In interest of time, below items are pending and can be covered in future:

Themes:
- currently only covers fontSize, fontFamily, fontStyle, fontWeights, lineHeights, and letterSpacing. Since similar font is used in the entire app, thus setting up the theme helps in improving the readability and reducing the redundant work.
- in future, themes will also include color, borders, mediaQueries, widths, etc.
Components: this folder will be more structured, and will contain 2 sub-folders:
- basic components
- custom components
These components are yet to implemented (currently svgs are being used in the project):
- Main menu: storage status, logged user info, account info,
- Dashboard: satisfaction rate graph, work summary graph, progress bar
Implementation of the hamburger icon in mobile view
Unit Tests for all components
Plug ESLint for high-quality code