This repository houses the code for the React test for new Hatch candidates. Reach out to nickj@usehatchapp.com for help with any issues related to the test.
npm install
npm start
The exercise is to build a list of People from Star Wars app based on data taken from the Star Wars API. The design should match the screenshot above. Other screenshots are available in the screenshots directory.
The initial state of the app should show the first ten people provided in the data directory. The user should be able to click load more to load the next ten people, which should be added to the existing list. Once the user has gone through the entire list the button should reflect there are no more entries to be fetched.
Error states do not need to be handled.
Below is a list of colors and sizing used in the designs:
# colors
Background Color: #F4F3F6
Base Font Color: #2F1359
Button Font Color: #6D5A8B
Button Background Color: #EAE7EE
# sizing
Base Font Size: 16px
Header Font Size: 24px
Rounded Corner: 8px- Exercise is required to be submitted no later than 30 minutes after receiving it
- Built in React using functional components/hooks.
- Styled-Components are preferred for styling, but normal CSS is also accepted.
- Do not use any CSS libraries such as Bootstrap, Material UI, or Tailwind.
- Code passes linting specified in the repository.
- Code organization
- React best practices
- Modern CSS3 conventions
The deliverable for this project should be a zip file containing the finalized source code for the project. That zip should be emailed to nickj@usehatchapp.com no later than 30 minutes after receiving it. The result will be assessed in Chrome.