1. Feature overview and setup
3m

👋 Welcome to the first part of our Lift-off series!

Here we begin our journey building a full-stack GraphQL example application called Catstronauts, a learning platform for adventurous cats who want to explore the universe! 😺 🚀

The first feature we'll build for the app will fetch a (mocked) list of learning tracks from a GraphQL API and display them in a card grid on our homepage.

Here's how it'll look when we're finished:

catstronauts

To build this feature, we'll use a "schema-first" design. That means we'll implement the feature based on exactly which data our client application needs. Schema-first design typically involves three major steps:

  1. Defining the schema: We identify which data our feature requires, and then we structure our schema to provide that data as intuitively as possible.
  2. Back-end implementation: We build out our GraphQL API using Apollo Server and fetch the required data from whichever data sources contain it. In this first course, we will be using mocked data. In a following course, we'll connect our app to a live REST data source.
  3. 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. This isn't the only way to design a GraphQL API, but we believe it's an efficient one, so we'll use it throughout this course.

Which of these are benefits of schema-first design?

Ignition sequence...

Prerequisites

Our app will use Node.js on the backend and React on the frontend.

Concepts and keywords like import, map, async, jsx, and React Hooks should all be familiar concepts before you start up.

Clone the repository

In the directory of your choice with your preferred terminal, clone the app's starter repository:

git clone https://github.com/apollographql/odyssey-lift-off-part1

Task!

Project structure

We'll build a full-stack app that is (unsurprisingly) composed of two parts:

  • The back-end app in the /server directory
  • The front-end app located in the /client directory

Both apps have bare-minimum package dependencies. Here's the file structure:

📦catstronauts-demo
┣ 📂client
┃ ┣ 📂public
┃ ┣ 📂src
┃ ┃ ┣ 📂assets
┃ ┃ ┣ 📂components
┃ ┃ ┣ 📂containers
┃ ┃ ┣ 📂pages
┃ ┃ ┣ 📂utils
┃ ┃ ┣ 📄index.js
┃ ┃ ┗ 📄styles.js
┃ ┣ 📄README.md
┃ ┣ 📄package.json
┣ 📂server
┃ ┣ 📂src
┃ ┃ ┣ 📄index.js
┃ ┣ 📄README.md
┃ ┣ 📄package.json
┗ 📄README.md

Now, open the repository in your favorite IDE.

Note: The examples in this course use npm, but you're welcome to use yarn if you prefer.

Let's start with the server app.

In a terminal window, navigate to the repo's server/ directory and run the following to install dependencies and run the app:

npm install && npm start

If all goes well, you'll see installation complete and then no other output, because we don't have anything to run in our index.js file yet.

Task!

Next, the client app.

In a terminal window, navigate to the repo's client/ directory and run the following to install dependencies and start the app:

npm install && npm start

The console should show a bunch of output and a link to the running app at localhost:3000. You can navigate there and see that not much is rendered right now.

Task!

We're all set. Let's start building our full-stack Catstronauts app!

Next