limited-urls

A URL redirect service with a maximum number of users per link.

Try it HERE.

Idea based on a tweet by @mattpocockuk

Usage

1. Generate a link to a URL. Choose max number of views: 1, 10, 25 or 50.
2. In the overview page, copy public URL and share with your friends (or foes)
3. Your friend clicks the link. They are either
   1. Redirected to your specified URL or
   2. Stopped, if the max number of views has been reached

Architecture and design overview

Notable libraries used

• AWS DynamoDB DocumentClient - for interacting with DynamoDB
• true-myth - for error handling in TypeScript, with Maybe and Result containers
• tRPC - For typesafe HTTP requests
• React-Query - Simplifies request handling from React
• Serverless Stack (SST) - A tool to simplify developing and deploying to AWS, built on top of CDK

Architecture

Stack

• A single page React app
  • uses construct SST ReactStaticSite
• A single Lambda function with public URL
  • uses SST Function
• A DynamoDB table to store and expire links
  • uses SST Table

DynamoDB table schema

{
  "id": "c1910355-cbd8-4f8e-b947-174bbfbf0207", // PK
  "updated_at": "2022-07-20T10:04:51.238Z",
  "remaining_forwards": 25,
  "created_at": "2022-07-20T10:04:51.238Z",
  "max_forwards": 25,
  "owner_client_id": "c8fadf25-cb99-453c-92a3-5b90f4acc166",
  "url": "https://wahlstrand.dev",
  "forwarded_at": {}            // Set
  "forwarded_client_ids": {}    // Set
}

Todo

• Allow URLs without protocol schema
• Store URL (or token) in local storage and use that in request
• Only allow overview for the admin
• Style the redirect page
  • During load
  • When link has expired
• Don't consume links for already redirected users
• Create a test link for admin
• Add screenshots or gif to documentation
• Update Logo and title
• Deploy to production
• Update documentation
• Refactor React components