In this project, we were given a static data file and asked to dynmically render the data using React. The data files contained education data for the state of Colorado and we had to compare data between different state districts. We imported the data, cleaned the data, and then used React and javascript to implement a card comparison UI as outline in the specification. We made changes to the spec to increase usability and adhere to the 10 essential web application usability guidelines. We also built a comprehensive unit and integration testing suite to test all components in the app. To do this, we used Jest, Enzyme, and the Enzyme adapter. We also built this project using the create-react-app boilerplate.
- Separate application logic into small, testable functions.
- Create modular, reusable React components.
- Use propTypes to validate props passed to each component.
- Write meaningful, comprehensive unit and integration tests.
- To adhere and design with the 10 Essential Web Application Usability Guidelines in mind: https://speckyboy.com/10-essential-web-application-usability-guidelines/(https://speckyboy.com/10-essential-web-application-usability-guidelines/)
Added user instructions to guide our user and to make the 'call-to-action' and interactive objects obvious.
Walked the user through the state change (adding a card to be compared) piece by piece so as not to disorient them.
Added visual clues (arrows) to orient the user and give feedback about their interaction:
Added a visual heirarchy, navigation, and default values to guide the user:
Additionally, we eliminated the red/green text color as a visual indicator and added a checkmark to quickly indicate when the minimum data value had been met:
Fork this project
Run npm install from the root directory
Run npm start and visit localhost:3000 in your browser
Begin running your tests with npm test
Initialize the enzyme adapter: initializing the enzyme adapter
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent