Make your links human-friendly

VNadygin — Wed, 06 Jul 2022 11:22:19 +0000

The reality of long URLs is supposed to be light years behind us. However, I still encounter them on almost every website. It is hard to figure out the best URL-shortener code that would also track how many times the link was opened.

Using Redwood JS Framework which combines some of the most popular and advanced frameworks, I am going to create such a service.

Initialise the project by following the official Get Started tutorial:

Initialize git

git init

The first step is to add a new data table to api/db/schema.prisma

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

generator client {
  provider      = "prisma-client-js"
  binaryTargets = "native"
}

model WebLink {
  id           Int    @id @default(autoincrement())
  shortId      String @unique
  url          String
  viewedAmount Int    @default(0)
}

Next, the Prisma framework can help us create a SQL migration for the sqlite. I recommend using postgresql in production.

yarn rw prisma migrate dev

Redwood did a great job with the scaffold feature that generates a CRUD (Create, Retrieve, Update, Delete) code for React by running just one command.

yarn rw g scaffold web-link

Run the development mode
yarn redwood dev

You will see that we have not finished the home page yet; however, four pages have already been generated:
/web-links/new
/web-links/{id:Int}/edit
/web-links/{id:Int}
/web-links

Let's open http://localhost:8910/web-links and create a new data record.

Now we want to add a new query to the Graphql API:
api/src/graphql/webLinks.sdl.js

Add webLinkByShortId(shortId: String!): WebLink @requireAuth to the SDL schema

export const schema = gql`
  type WebLink {
    id: Int!
    shortId: String!
    url: String!
    viewedAmount: Int!
  }

  type Query {
    webLinks: [WebLink!]! @requireAuth
    webLink(id: Int!): WebLink @requireAuth
+   webLinkByShortId(shortId: String!): WebLink @requireAuth
  }

  input CreateWebLinkInput {
    shortId: String!
    url: String!
    viewedAmount: Int!
  }

  input UpdateWebLinkInput {
    shortId: String
    url: String
    viewedAmount: Int
  }

  type Mutation {
    createWebLink(input: CreateWebLinkInput!): WebLink! @requireAuth
    updateWebLink(id: Int!, input: UpdateWebLinkInput!): WebLink! @requireAuth
    deleteWebLink(id: Int!): WebLink! @requireAuth
  }

The next step is creating a function that will resolve this for us:
open api/src/services/webLinks/webLinks.js

import { db } from 'src/lib/db'

export const webLinks = () => {
  return db.webLink.findMany()
}

export const webLink = ({ id }) => {
  return db.webLink.findUnique({
    where: { id },
  })
}

export const createWebLink = ({ input }) => {
  return db.webLink.create({
    data: input,
  })
}

export const updateWebLink = ({ id, input }) => {
  return db.webLink.update({
    data: input,
    where: { id },
  })
}

export const deleteWebLink = ({ id }) => {
  return db.webLink.delete({
    where: { id },
  })
}

+ export const webLinkByShortId = async ({ shortId }) => {
+   await db.webLink.update({
+     where: { shortId },
+     data: { viewedAmount: { increment: 1 } },
+   })
+   return db.webLink.findUnique({ where: { shortId } })
+ }

I used the Redwood generator to generate a page.
yarn redwood g page Redirect

Update web/src/Routes.js. Make sure that the new route is the last on the list since it uses dynamic params.

  - <Route path="/redirect" page={RedirectPage} name="redirect" />
  + <Route path="/{shortId}" page={RedirectPage} name="redirect" />

Now we want to generate a cell. This is the way Redwood recommends working with data:
yarn redwood g cell redirect

Modify web/src/components/RedirectCell/RedirectCell.js

- export const QUERY = gql`
-  query FindRedirectQuery($id: Int!) {
-    redirect: redirect(id: $id) {
-      id
-    }
-  }
- `

+ export const QUERY = gql`
+   query FindWebLink($shortId: String!) {
+     link: webLinkByShortId(shortId: $shortId) {
+       id
+       url
+     }
+   }
+ `

- export const Success = ({ redirect }) => {
-   return <div>{JSON.stringify(redirect)}</div>
- }


+ export const Success = ({ link }) => {
+   React.useEffect(() => {
+     if (!link) return
+
+     window.location = link.url
+   }, [link])
+
+   return 'redirecting...'
+ }

As a result, if you click on [/kcuobL](http://localhost:8910/kcuobL), the link will take you to https://google.com.

Voila. There is more than just a URL shortener in your hands. It is a marketing tool that can help your company's specialists to organise a huge part of their work online.

Save your users from notification overload

VNadygin — Wed, 06 Jul 2022 11:11:20 +0000

Nobody wants to be spammed with notifications. Recently while working on social media app, I ran into that exact problem. Every time a user would get a follow, they would be notified with a simple: “@Username started following you”. Every single time. Of course, some users get hundreds and thousands of new followers every day, so the situation quickly became extremely annoying for them.

After some thought, I decided to create a solution that would group these notifications into one. The resulting code was supposed to let users know something along the lines of "Username1, Username2, and other 7 followed you".

Managing all the moving parts of an app, such as this one, is not easy. So, we needed a scalable, long-term solution. Next came searching for a platform that would help automate the process. We needed a system that would help orchestrate the process and optimise this frequently occurring process. I stumbled across Temporal.io.

The open source platform allows for a reliable and scalable function execution. Solutions built via Temporal are also durable, meaning there is no time limit. Whether my code was supposed to execute for seconds or years, the platform was supposed to help me make it run forever. And here’s how I did it:

Here’s how developing the code for a single user follow went done:
Next was implementing an activity that could execute a send notification code. Workflow code cannot use 3rd party API or have access to the file system. So we need to implement it in activities and to pass a client as a dependancy injection.
Later I had to proxy activities in order to use them in a workflow:
A two hour period was picked for grouping notifications. Use a utility function from Temporal to make a time based condition:
The next step includes adding a worker that will execute tasks from the queue:

And here it is. We are ready to run the Temporal workflow.

DEV Community: VNadygin

Make your links human-friendly

Save your users from notification overload