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 and s
  • how to use the useQuery hook from

You'll also need to use these technologies:

  • NodeJS
  • React
  • React (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 methods to connect to a REST API and implement . You'll also be working client-side to display the returned data by sending a 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

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

Note: This lab is available in both JavaScript and TypeScript. Confirm your language of choice at the top of the lesson before continuing.

If you haven't completed the course, clone the project starter repo using the command 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 command to install dependencies and run the app:

On MacOS/Linux
npm install && npm start

On Windows
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!

Setting up the Explorer

To test queries on our , let's open up at studio.apollographql.com/sandbox. When it loads, it should be connected to http://localhost:4000.

Task!

Let's try out a 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 yourself by typing it out manually, or using the + buttons on the left sidebar to add each .

Task!

Next, the client app.

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

On MacOS/Linux
npm install && npm start
On Windows
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