Quindar Skills Test

In this project you will retrieve and display launch data from SpaceX's public GraphQL API.

The objective of this challenge is to create a custom component to best display historical and upcoming launch data. Feel free to use any libraries or components that you are comfortable with.

• You should use the Apollo GraphQL client to retrieve any launch data that you find interesting and display the historical and upcoming launch data in an intuitive format.

• We have included an antd Table to display some initial data.

• The styling is messed up with the current Table and you can update the styling as you choose for your custom component. We don't expect production-quality design here.

• A strech goal would be to create an interactive component that displays more details of a single launch when the user interacts with your component.

• This challenge is intended to take roughly one hour. The component is not expected to be production-ready, we just want to see your approach to this problem.

• If you are uncertain about specifics, try to push forward and state your assumptions in code comments, but if there are any blocking questions then you can reach out to Zach ([email protected]) or Sunny ([email protected]).

To ensure privacy, please follow these steps to share your code with us:

• Create a new repository under your gh username, ensuring the visibility is set to private.
• Clone the skills-test repository.
• Create a new remote using the upstream repository's URL.
• Set the origin URL to that of your newly-created private repository.
• Push to origin .
• Invite us to your private repository:
  • sunbrst
  • zachmeza
  • smparekh
  • annshultequindar

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/pages/page.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

This is a Next.js project bootstrapped with create-next-app.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!