Skip to content

The dashboards are among the essential components that are required in various use cases like reports dashboard, user dashboard, product dashboard, etc. This one is build using React and Typescript

Notifications You must be signed in to change notification settings

mansi-manhas/dashboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

image

Responsive in Desktop (when screen size changes)

image

Mobile Friendly

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

image

image

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

About

The dashboards are among the essential components that are required in various use cases like reports dashboard, user dashboard, product dashboard, etc. This one is build using React and Typescript

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published