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.
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 thestyled-components
used to build the component from scratchutils.tsx
: this contains all extra utility methods or componentstypes.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
, andletterSpacing
. 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.
- currently only covers
-
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