https://github.com/nemanjarogic/catstronauts
Catstronauts is a full-stack application used to demonstrate how to combine React, Apollo, and GraphQL.
https://github.com/nemanjarogic/catstronauts
apollo apollo-client apollo-server graphql react reactjs
Last synced: 2 months ago
JSON representation
Catstronauts is a full-stack application used to demonstrate how to combine React, Apollo, and GraphQL.
- Host: GitHub
- URL: https://github.com/nemanjarogic/catstronauts
- Owner: nemanjarogic
- Created: 2021-02-25T09:55:11.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-02-25T12:13:25.000Z (about 4 years ago)
- Last Synced: 2024-12-27T17:33:15.115Z (4 months ago)
- Topics: apollo, apollo-client, apollo-server, graphql, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 1000 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Catstronauts
Catstronauts is a full-stack application used to demonstrate how to combine React, Apollo and GraphQL.
This application uses a "schema-first" design. That means features were implemented based on exactly which data our client application needs. Schema-first design typically involves three major steps:
-
Defining the schema: We identify which data our feature requires, and then we structure our schema to provide that data as intuitively as possible.
-
Back-end implementation: We build out our GraphQL API using Apollo Server and fetch the required data from whichever data sources contain it. This example uses mocked data.
-
Front-end implementation: Our client consumes data from our GraphQL API to render its views.
One of the benefits of schema-first design is that it reduces total development time by allowing front-end and back-end teams to work in parallel. The front-end team can start working with mocked data as soon as the schema is defined, while the back-end team develops the API based on that same schema.
A schema is like a contract between the server and the client. It defines what a GraphQL API can and can't do, and how clients can request or change data. It's an abstraction layer that provides flexibility to consumers while hiding back-end implementation details.
Full demo application for this course is available [live.](https://lift-off-client-demo.netlify.app/)
## Run the project
Castronauts fullstack app holds two main folders `server` and `client`
### server
- Install packages `cd server && npm install`
- Start server `npm start`
### client
- Install packages `cd client && npm install`
- Start react app `npm start`