Start here to learn how to build full-stack apps with Apollo
Welcome! This tutorial guides you through building a full-stack, GraphQL-powered app with the Apollo platform.
We want you to feel empowered to build your own production-ready app with Apollo, so we're skipping "Hello World" in favor of an example that's closer to "Real World", complete with authentication, pagination, testing, and more.
Ready? Let's dive in!
In this tutorial, we'll build an interactive app for reserving a seat on an upcoming SpaceX launch. Think of it as an Airbnb for space travel! All of the data is real, thanks to the SpaceX-API.
Here's what the finished app will look like:
The app includes the following views:
- A login page
- A list of upcoming launches
- A detail view for an individual launch
- A user profile page
- A cart
To populate these views, our app's data graph will connect to two data sources: a REST API and a SQLite database. (Don't worry, you don't need to be familiar with either of those technologies to complete the tutorial.)
As mentioned, we want this example to resemble a real-world Apollo app, so we'll also add common useful features like authentication, pagination, and state management.
Building your frontend with React is not a requirement for using the Apollo platform, but it is the primary view layer supported by Apollo. If you use another view layer (such as Angular or Vue), you can still apply this tutorial's concepts to it.
Before we begin, make sure you have the following installed:
Although it isn't required, we also recommend using VS Code as your editor so you can use Apollo's helpful VS Code extension.
Now the fun begins! From your preferred development directory, clone this repository:
git clone https://github.com/apollographql/fullstack-tutorial.git
The repository contains two top-level directories:
final. During the
tutorial you'll edit the files in
start, and at the end they'll match the
completed app in
Each top-level directory contains two directories of its own:
client. We'll be working in the
server directory first. If you're already comfortable
building a graph API and you want to skip to the
client portion, navigate to the second half of the tutorial.
Learning a new technology can be overwhelming sometimes, and it's common to get stuck! If that happens, we recommend joining the Apollo Spectrum community and posting in the relevant channel (either
#apollo-client) for assistance from friendly fellow developers.
If anything in the tutorial seems confusing or contains an error, we'd love your feedback! Click the Edit on GitHub link on the right side of the page to open a new pull request, or open an issue on the repository.