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.
- Mobile first
- Simplistic design
- 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.
- Lists past 10, but not limited too, Space X launches.
- If a video, article or shipping details is not available the UI displays alternative state for those sections.
- Better overall UX design
- Typescript types, look at https://www.graphql-code-generator.com/
- 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.