Responsive React Dashboard

This dashboard is written in React as an exercise in creating maintainable, modular UI components.

Demo

Presentation on my development process

Key Features

Successful Implementation

• Create React App used for configuration, which includes compilation errors and warnings and live reload for iterative development

Maintainability / Readability

• BEM naming convention used to namespace CSS, create semantic meaning to components, increase maintainability and readability

Flexibility of code to changing requirements

• Atomic design used to compose a hierarchical, modular UI
• CSS Flexbox used to create responsive layout at component level.
• Classnames utility used to enable CSS application of classes at the React Component level
• ES6 modules used to decouple chart data from chart React component
• Content breakpoints used to reproduce design intent on largest number of devices, now and in future

Reusability of code for other applications

• Modular React components
• SCSS partials used to create modular CSS styles, framework independent.
• 7-1 file structure to create logical, repeatable folder structure
• DRY principles used in SCSS variables, mixins, functions