Building URL shortener using React, Apollo and GraphQL — Part I

Photo by Kevin Ku

Table of Contents

• Part I: Setup and displaying short URLs using GraphQL (this post)
• Part II: Creating short URLs
• Part III: Creating serverless function for hashing
• Part IV: Short URL stats (number of clicks, etc.)
• Part V: User authentication

Part I: Setup and displaying short URLs using GraphQL

In this series of post I’ll explain how to build a simple URL shortener using React, Apollo and GraphQL (Graphcool). GitHub repo the project is located here.

The idea behind the URL shortener is simple — the shortener takes a long URL such as www.example.com/thisisalongurl and shortens it to http://goo.gl/ABC. When shortened URL is accessed, the service expands it to the original URL and redirects you there. The algorithm I’ll use to calculate the hash (short URL) is explained here.

Here are some of the bigger areas and features we will implement:

• Setup and displaying short URLs using GraphQL (this post)
• Creating short URLs
• Short URL stats (number of clicks, etc.)
• Expiring the URLs (e.g. no clicks…