1. Project Setup
5m

Ready to get in the driver’s seat for your next mission?

lunar rover drive

In this project-focused activity, you’ll be using everything you’ve learned so far from our introductory Lift-off series, Parts I to III!

Before going any further, make sure you know:

  • how to build queries using arguments and variables
  • how to use the useQuery hook from Apollo Client

You’ll also need to use these technologies:

  • NodeJS
  • React
  • Reach Router (the routing concepts)

If you’re comfortable with those, great! You’ll be able to continue working on our learning platform for cat space explorers.

You’ll be diving into the server-side to update the schema, write data source methods to connect to a REST API and implement resolvers. You’ll also be working client-side to display the returned data by sending a query to the server.

This project picks up where Lift-off III finishes, but you can certainly jump right into it if you’re up for it!

The app so far...

The Catstronauts app currently shows a list of learning tracks. Clicking on a track shows more details about the track, including its list of modules.

Your mission will be to add a new page to the app showing the contents of that module and a way to navigate between all the modules of a learning track, so that aspiring catstronauts can finally read, watch and learn what they need to!

Project Setup

If you've completed the Lift-off III course, you can use your code as a starting point! This project picks up where Part III ended.

If you haven’t completed the course, clone the project starter repo below:

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

Project Structure

Our project is a full-stack app with the back-end app in the server/ directory and the front-end app in the client/ directory.

You'll also find a final/ folder that contains the final state of the project once you've completed this project. Feel free to use it as a guide!

Here's the file structure:

📦 odyssey-lift-off-lab
┣ 📂 client
┃ ┣ 📂 public
┃ ┣ 📂 src
┃ ┃ ┣ 📂 assets
┃ ┃ ┣ 📂 components
┃ ┃ ┣ 📂 containers
┃ ┃ ┣ 📂 pages
┃ ┃ ┣ 📂 utils
┃ ┃ ┣ 📄 index.js
┃ ┃ ┗ 📄 styles.js
┃ ┣ 📄 README.md
┃ ┣ 📄 package.json
┣ 📂 server
┃ ┣ 📂 src
┃ ┃ ┣ 📄 index.js
┃ ┃ ┣ 📄 schema.js
┃ ┣ 📄 README.md
┃ ┣ 📄 package.json
┣ 📂 final
┃ ┣ 📂 client
┃ ┣ 📂 server
┗ 📄 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 the installation complete and a message in the console indicating that the server is running.

Task!

Let’s set up Explorer with our development graph.

To test queries on our GraphQL server, let’s connect this development graph to Apollo Studio Explorer.

The Explorer is free to use, and it provides awesome development features like interactive query building, query history, and response hints. This will make building our queries fast and fun.

Already set up with Explorer? Check off the task below! If not, click the "Set-up Explorer" below and follow the steps.

Task!

Let’s try out a query to get a list of track titles. Copy the query below, paste it into the Explorer's Operations Panel, then run it. You should get a list of track titles in the response on the right-hand side.

query getTrackTitles {
tracksForHome {
title
}
}

You can also try building the query yourself by typing it out manually, or using the + buttons on the left sidebar to add each field.

Task!

Next, the client app.

In a new 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 to localhost:3000 in the browser and see our homepage, which shows a homepage filled with tracks.

Task!

If you click on a card, you’ll see the track page, with more information about the track. Try clicking on the Start Track button. What happens? It leads you to a completely blank page!

Your mission is to transform this blank page into a fully-functioning Modules page. Good luck!

Next