Overview

Let's get our project set up! In this course, we'll play the role of a backend developer using Apollo Federation to build a supergraph for an app called FlyBy.

But first, let's imagine we've been transported far into the future, where everyone can traverse the galaxy for fun and adventure... and this is where FlyBy comes in.

In this lesson, we will:

• Explore the features of FlyBy, the demo app for this course
• Set up the FlyBy starter code

What You'll Build: FlyBy

FlyBy is a web app that lets users review places they've visited on their intergalactic travels. They can browse a list of all the locations fellow space travelers have visited, see the details and reviews for each location, and submit reviews of their own.

Want a preview? You can explore the final version of the FlyBy app.

Like most apps, Flyby starts small. But by using a supergraph architecture right from the start, we can scale the FlyBy graph as the app and organization inevitably grow.

To build out the FlyBy supergraph, we will:

• Publish two subgraphs: locations and reviews (Lessons 4-6)
• Set up the router (Lessons 7-8)
• Update the subgraphs to share types between them (Lessons 9-14)
• See how everything fits together with the frontend (Lesson 14)

Let's get started!

Prerequisites

FlyBy uses Node.js on the backend and React on the frontend. We recommend using the latest LTS version of Node. To check your Node version, run node -v.

You'll also need to be comfortable with:

• Running commands in the terminal, such as navigating between directories.
• Basic JavaScript syntax, including writing functions and destructuring objects.
• GraphQL and Apollo basics, like how to define a schema, build resolver functions, and write GraphQL operations. (Need a refresher? Check out the Odyssey Lift-off series!)

✏️ Clone the repository

1. Open your preferred terminal in the directory of your choice.

2. Clone the FlyBy starter code repository by running the following command:

   git clone https://github.com/apollographql/odyssey-voyage-I

   Copy

3. Open the repository in your favorite IDE. (We use VS Code.)

Project structure

The FlyBy repo contains a full-stack app, with the frontend in the client/ directory and the backend split between three server directories. Each server runs on a different port, so you can run them all at the same time when you're developing on your local machine.

In this course, we'll focus entirely on the server-side code. (The client code has already been developed for you, so you won't need to touch it.)

The servers are split up as follows:

The starter code also includes a final/ directory that contains the final state of our supergraph at the end of the course. Feel free to use it as a reference!

✏️ Install project dependencies

To finish setting up the starter code, install the project dependencies for each of the subgraph servers.

1. From the command line, change directories into the subgraph-locations directory, and run npm install.

2. Change directories into the subgraph-reviews directory, then run npm install again.

Don't worry about the router directory for now. We'll talk about how to set up this piece in an upcoming lesson.

✏️ Apollo Studio Setup

This course uses managed federation, meaning that FlyBy uses Apollo Studio to handle updates to the router automatically. (More on this later in the course!)

To use managed federation, we'll need to have an Apollo Studio account. (If you completed our Lift-off series you might have already done this step! If not, register for a new account and complete the signup flow.)

Up next

In the next part, we'll check in with the frontend team to take a closer look at FlyBy's data requirements.