React Material UI Refactor Assessment

What You'll Be making

Provided in the Codesandbox is a baseline implementation of a very basic Task Tracker application. Your goal will be to convert the basic HTML tags into Material UI components. The tests are constructed in such a way where they should allow you to refactor the components with confidence. The existing components in the assessment already pass the provided tests. Converting to Material UI components will not affect the API or business logic of those components, therefore, you can use the tests as a source of confidence for your refactoring activity. The Material UI Components you will be using for this exercise are: AppBar, Button, Card, Container, Dialog, Grid, TextField, and Typography.

Outcomes

A successful completion of the assessment will demonstrate:

1. A solid baseline proficiency using React Material UI components
2. Exposure to Test Driven Development as a source of confidence during refactoring.

What You'll Need to Succeed

• Experience with functional components in React.
• Some familiarity with React hooks (useState in particular)
• Knowledge of how to pass props to child components
• Familiarity with the Material UI component library
• CSS layout principles using Flexbox (MUI Grid components in particular)

Troubleshooting

Sometimes, the in-browser Test runner for Codesandbox will fail even though it shouldn’t... If you run into failing tests for what seems like no good reason:

1. SAVE your progress, then
2. REFRESH your browser and try running the tests again.