This project is a React app spun up with a StepZen connection to SpaceX's GraphQL API. It demonstrates how you can create a StepZen layer for a GraphQL API with a React frontend.
Before you get started, you'll need to get yourself a StepZen account and install the StepZen CLI.
If you'd like to contribute, please view our guidelines and code of conduct first, as well as where to find support.
Here's our video walkthrough as well. In it, you'll learn the steps for making a PR and the overall goals for our repos.
Fork and clone to open up the project in your IDE (coding environment).
Then npm install.
Then cp .env.sample .env.
Run stepzen start.
You'll get a message like:
Deploying to StepZen...... done
Successfully deployed api/example at 4:22:19 PM
Your endpoint is available at https://myaccount.stepzen.net/api/example/__graphqlYou'll need this endpoint to configure your React app.
You'll also first notice a custom StepZen Graphiql editor pop up. I encourage you to play around with it! You can find more information on it in our docs.
You'll need to add STEPZEN_API_KEY and STEPZEN_ENDPOINT in .env file in your working directory for the app to work in localhost.
The STEPZEN_API_KEY is the key from your account, and the STEPZEN_ENDPOINT is the endpoint you got when you ran stepzen start.
Now, run npm start to see your Create React App user interface with your rocket information! Feel free to play around. Let us know what you come up with!
Here at stepzen we are serious about accessibility and ensuring functionality and content to everyone! We have many issues open for accessibility so feel free to claim one! If you find an accessibility issue we would love if you opened an issue and brought it to our attention so that we can continuously improve.
Accessibility or A11y for short is an audit process for ensuring our website is accessible, this will be an ongoing effort as we roll out new features. According to the A11y Project 1 in 4 people in the US have a disability, so building our websites with accesibility in mind allows for assistive technology like screenreaders and braille displays to be used.