Freecom: Building Intercom with GraphQL and Apollo (Overview)

Last updated a day ago Edit this page

Full-stack tutorial series to build an Intercom-clone with React, Apollo & GraphQL.

Note: This guide is only applicable to legacy Console project. It doesn't work with the new Graphcool Framework which is based on the graphcool.yml service definition file.

An updated version of this guide is coming soon, stay tuned!

Created with Sketch.

Everybody loves the live chat experience of Intercom, but for many early-stage startups and projects the pricing can be a problem. To demonstrate how you can build a production-ready alternative to Intercom all by yourself, we're happy to announce a new full-stack tutorial series: Freecom 🎉🍾

#Learning by Building

In the next couple of weeks, we are going to release increments of the final product along with tutorial chapters, teaching you how to build a fully-fledged application from scratch. Freecom will be powered by a Graphcool backend, thus making it a perfect opportunity for you to get started with GraphQL while discovering all major functionality of the Graphcool platform!

The final project not only can be used in production, it also is a great reference project and starting point for your next GraphQL app! You can find the code for all the released chapters on GitHub.

#The "Stack"

As already mentioned, on the backend we are going to use a GraphQL API by Graphcool, connecting to its Simple API.

For the frontend, we are choosing a modern and easy-to-get-started set of technologies!

The view layer of Freecom will be implemented in React. Then, for the interaction with the GraphQL server we are using Apollo, a sophisticated GraphQL client that implements features like caching, optimistic UI and realtime subscriptions, thus making it perfect for our use case. React and Apollo play nicely together and make interaction with a GraphQL API a breeze 🚀

To have a head start with our project and save ourselves some configuration time, we'll be using create-react-app to create our initial project. This will generate a boilerplate React project with JSX, ES6 and Flow support as well as some other handy configurations.

#Demo: Try out the final product

As mentioned before, you'll be able to up your support game after this tutorial and use the final product in your own website to help your customers! You and your support agents will be able to answer customer questions through a dedicated Slack team.

If you want to get a taste of what the final version looks like, you can go here for a hosted demo, play the role of a customer and ask some support questions. If you'd like to put on the shoes of a support agent, you can log in to the Demo Slack account with the following data:

  • Email:
  • Password: freecom

Note (07-20-2017): The Slash command inside the Slack team currently doesn't work, so support agents aren't able to reply to customers with the current setup. This is because Slack has deprecated the use of single Slash commands in a team and instead requires a "Slack App" to be installed. We'll update the tutorial soon to make use of this new concept.

#Tutorial Curriculum

Here is a brief overview of the tutorial chapters to come:

In the 1st chapter, we start by discussing the concrete requirements for the app and develop a GraphQL schema that we can use to set up our API. Watch the video.

The 2nd chapter explains how to integrate the Apollo client into the app so that it can interact with our API using queries and mutations. Watch the video.

The 3rd chapter is all about bringing realtime functionality into our chat, this can be achieved using GraphQL subscriptions. We'll explain how you can integrate subscriptions in Freecom to make the messages appear without the user refreshing the page. Watch the video.

In the 4th chapter, we'll use the permission system to make sure customers can only ever view their own messages. Watch the video.

Our support chat will enable the support agents to chat with customers through Slack. In the 5th chapter, we'll therefore explain how to use serverless functions to integrate with the Slack API. Watch the video.

Finally, in the 6th chapter, we are going to cover how to upload files and do proper file management in a Graphcool backend.

#Getting Started 🚀

We already provide all needed UI components, so you can focus on using GraphQL with Apollo and implementing the business logic.

The chapters are deep dives into the relevant concepts that are needed to implement the required functionality. Our goal is to provide you with the right background information to be able to build the functionality yourself. To make this easier, there will be a starter and a final project for every chapter, so you'll have plenty of code to look at and draw inspiration from for your own projects!

If you're looking for a comprehensive step-by-step tutorial, definitely check out the Learn Apollo tutorial series.

Click here for the first chapter of your tutorial series where we analyse requirements and develop the data model for Freecom.

Was this page helpful?