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

Desktop

Responsive in Desktop (when screen size changes)

Mobile Friendly

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

Oveview of folder structure

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

What is pending and can be covered in future scope

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