Originally built on CodeSandBox: https://codesandbox.io/s/space-x-missions-testing-graphql-kki0dc

https://spacexmissions-ayocodes.netlify.app/

Using the SpaceX GraphQL API, Chakra UI and Typescript, you should create an overview of the past 10 launches.

React, Typescript, Chakra UI, Apollo Client.

1. Mobile first
2. Simplistic design
3. Modular Code and maintainable code

Due to the task time limit being between 24 and 48hrs, I designed as I went along. Chakra UI is a great library!. This was my first time using it and I enjoyed the experience. This task took me 2 working days to complete, 18 hours.

1. Lists past 10, but not limited too, Space X launches.

1. If a video, article or shipping details is not available the UI displays alternative state for those sections.

1. Better overall UX design
2. Typescript types, look at https://www.graphql-code-generator.com/
3. Scroll to accordion item top when clicked automatically, to avoid the user being stuck at bottom when they open a new list item (mobile) *FIXED

I really enjoyed building this project and focused on modularity and code maintainability, as well as making sure the UI provides a intuitive user experience taking into account time and resources.