Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:9Length:50 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 Project Overview

In this lesson, I’ll give you an overview of the finished app—a map and route planner for Finnish public transportation. I’ll also show you around the starter project so you can follow along.

Related Links

1.2 Project Overview

Hi, and welcome back to Using GraphQL on the Front-End with React. In this lesson, I'm giving you an overview of the React project we are building in this course. There are three parts to the application. Besides the Mutations section, it is built around the Helsinki Transport Authority's API, which is neatly documented and works quite well for our example. First, you can see that we have a map that shows the different stops as well as the lines stopping there, and some real-time information about the next service arriving. The route planner uses multiple queries to first get all the stops and then plan a route between them. It gets the individual legs of a journey and shows them nicely. The Mutations section is a little bit different. Since the API doesn't have mutations, I'm using the server I created in my other course about GraphQL, where we look at the back-end side of things. It has a mutation where I can add a human Star Wars character. This is exactly what's happening here. As I've mentioned, the API we are using is of the Finnish Transport Authority. It is well documented in English, and also has a graphical endpoint to explore it. I'm pretty impressed by them, because normally you don't get such modern interfaces from companies that aren't mainly in a tech-related field. Now, let's have a look at the code. I've provided you with the startup project since I don't want to waste too much time setting up webpack, React, and so on. I'll give you a brief introduction though what the different parts do. I'm using Express JS and webpack middleware to serve the packed asset files. This is setup in the server.js file in the project's root directory. The app will be served on port 4000. The webpack configuration is fairly simple as well. We are going to use the index.js file in the client directory as an endpoint. Every JavaScript file that isn't in node_modules will be ran through through babel. And I'm using the env and React presets for this. Style sheets will also be compiled. I'm storing them inside the client style folder. Finally, we're using the HTML webpack plugin to create the HTML file based on the client's index.html template. Moving on to the client files. In the HTML file, I'm just importing the bootstrap CSS file. And I also added a div with an id for our react-app to use as a root container. In the index.js file, I'm importing the style sheet first, which is important, so webpack includes it as well. Next we're importing the React-specific modules including React router. I'm rendering an app component in the root component, using a HashRouter for the routing, which I use for convenience. Finally I'm adding everything to the DOM using the container div I showed you before. Moving on to the app component. This is just a wrapper and switch for the different routes. You can already see the three features we are going to implement in this course. These files are all rendering some simple static text right now. You can find the startup package by going to the source repository and checking out the commit tag starter. You can also see that every lesson has its own tag, so you can start anywhere you like. In the next lesson, we'll get started with the Apollo project by setting up React with the Apollo client to be able to use GraphQL. See you there.