DEV Community: Vikash Rathee

I built an URL shortener with Cloudflare KV

Vikash Rathee — Sat, 09 Dec 2023 10:49:55 +0000

I am building an open source, highly scalable, and low-cost URL shortener with Cloudflare KV

By low-cost I mean, just $5 per month on Cloudflare worker and a free plan for basic requirement -

Idea

At DaySchedule, we had many customer upvoted for a URL shortener feature with auto-expirable links to book an appointment instead sharing their original URL.

So, I decided to try Cloudflare for this project -

By leveraging Cloudflare KV's capabilities, the goal was to develop a solution that offered not only URL shortening but also customization options, analytics, and scalability, all while maintaining a significantly lower cost compared to our established services on AWS.

Features

Expirable links using cacheTtl option on KV
Custom domain using Cloudflare for SaaS
Analytics using Worker analytics

API

I used hono.dev by @yusukebe for API routing, and it's blazing fast and offers Cloudflare pages template to build Edge projects quickly.

Here is an example of server.ts from their docs -

import { Hono } from 'hono'
const app = new Hono()

app.get('/', (c) => c.text('Hono!'))

export default app

Controller

The /links API is all I need to create, update and manage the short links.

const links = new Hono<{ Bindings: Bindings }>();

links.post(
  '/',
  validator('json', (value, c) => {
    const parsed = linkSchema.safeParse(value);
    if (!parsed.success) {
      return c.json(parsed, 400);
    }
    return parsed.data as ShortLink;
  }),
  async (ctx) => {
    const data = ctx.req.valid('json');
    // Set expire_at if given, or fallback to 1 month expiry
    const expireAt = data.expire_at
      ? dayjs(data.expire_at).unix()
      : dayjs().add(1, 'month').unix();
    if (expireAt <= dayjs().unix()) {
      return ctx.json(
        { message: 'The expire_at must be greater then current date time' },
        400
      );
    }

    let key = data.key || nanoid(7);
    let exists = await ctx.env.SHORTLINKS.get(key);
    while (exists) {
      key = nanoid(7);
      exists = await ctx.env.SHORTLINKS.get(key);
    }
    await ctx.env.SHORTLINKS.put(key, JSON.stringify(data), {
      expiration: expireAt,
    });
    return ctx.json(
      { ...data, key: key, short_url: `https://idm.in/${key}` },
      200
    );
  }
);

Code explanations -

This code is POST request to create short links. Here's a breakdown of the code to explain what all I am doing:

const links = new Hono<{ Bindings: Bindings }>(): It creates an instance of the Hono object.
Validation with zod - The validator('json', (value, c) => {...}): function is used as a middleware for validating the incoming JSON payload defined in linkSchema.
Set expiration: Checks if an expiry date is provided in the payload. If not, it sets an expiry date one month from the current date and time.
Generates a unique key for the link using nanoid(7) or uses the provided key from the payload if available.
Stores the link data (converted to a JSON string) in the Cloudflare KV (SHORTLINKS) with an expiration time based on the calculated expiry date.

Demo

The demo is available on IDM, it's free to use and open-sourced on Github to build your own custom URL shortener.

You can clone the repo to deploy on your Cloudflare account.

Star the repository on Github to show your support :-)

How to embed appointment scheduling widget on your website?

Vikash Rathee — Mon, 03 Apr 2023 12:02:57 +0000

Embedding a Dayschedule appointment scheduling widget on your website is a great way to simplify the appointment scheduling process for your clients. Here are the steps to follow:

Choose a appointment scheduling widget

There are many scheduling widgets available online, such as Calendly, Doodle, Acuity Scheduling and DaySchedule. Research different options and choose one that meets your business needs.

In this post, I am going to show you how to embed the dayschedule widget

Sign up for an account

Login to Dayschedule (or create a new account, it's free for basic use),
Create a resource
Set availability, questions etc.

Customize your scheduling widget

Customize your scheduling widget to fit the design and branding of your website. You can set color, upload logo etc.

Generate an embed code

Once your scheduling widget is customized, generate an embed code. This code is what you will use to add the widget to your website.

Add the embed code to your website

Install the package from NPM

npm i dayschedule-widget

Add the code to open appointment booking popup on click.

<button type="button" 
    onClick="bookAppointment()">
    Book an appointment
</button>

function bookAppointment(){
  daySchedule.initPopupWidget({
    "url": "https://demo.dayschedule.com",
    "type": "popup",
    "color": {
            "primary": "#0f0980",
        "secondary": "#afeefe"
    }
  })
}

See examples - https://stackblitz.com/@vickyRathee/collections/dayschedule-appointment-bookings

And paste the embed code into the HTML of your website where you want the scheduling widget to appear. This could be on a contact page, a services page, or a dedicated scheduling page.

Test your scheduling widget

Once you have added the scheduling widget to your website, test it out to make sure it is functioning properly. Schedule a test appointment to make sure the process works as expected.

Promote your scheduling widget

Now that your scheduling widget is embedded on your website, promote it to your clients and customers. Include a link to the scheduling widget in email signatures, social media posts, and other marketing materials.

Introducing Agenty "Agents for Machine Intelligence"

Vikash Rathee — Tue, 02 Apr 2019 15:33:06 +0000

Hi, Dev Community!

We have been working on Agenty from a long time, and today I am so excited to show it to the Dev community.

We are launching 4 agents today :

Scraping agents : Point-and-Click web scraping agent to extract data from websites of choices. Convert websites into api in lass then 2 minutes (see my video https://www.agenty.com/docs/video-tutorials.aspx ) or install the extension from Chrome store - https://chrome.google.com/webstore/detail/agenty-advanced-web-scrap/gpolcofcjjiooogejfbaamdgmgfehgff
Textract agents : Extract text and metadata from almost any documents in batch
OCR agents : Extract text from images and pdfs.
Bar code recognition agent - Recognize the bar code number and it's type from products photo captured by mobile or cameras.

All agents are API ready, see the documentation - https://www.agenty.com/docs/api

Go to our website and signup to get 100 pages credit free to try any agent you like. And you can go PRO anytime if you like it, the pricing plans just starts from $29 per month (10x lower then import.io for web scraping whose plans starts from $299)

I’ll keeps checking this page today to answer any comments, feedback you have, really looking forward to it :)