Colorful Counter

upstash-rediss.deno.dev

counters may be dime a dozen however a vast space for creativity is there. serverless. Another page view counter in production.

Typescript with deno is straight forward.

// server.ts
Deno.serve((_request: Request) => {
  return new Response("serverless data with Upstash");
});

Wasting no time head over to Upstash create a Redis serverless database.

Once complete there are two key pieces of info were gonna grab for the project that make up the rest API were gonna use to access our data....

UPSTASH_REDIS_REST_URL

UPSTASH_REDIS_REST_TOKEN

copy them to a temporary file or leave a tab open then move them them directly to .env via playground.

deno runtime.

curl -fsSL https://deno.land/install.sh | sh

In the quickstarts we find the handler function. all the work is done here just grab this and start a new deno playground. Deno Playground

import { serve } from "https://deno.land/std@0.142.0/http/server.ts";
import { Redis } from "https://deno.land/x/upstash_redis@v1.14.0/mod.ts";

serve(async (_req: Request) => {

    if( ! _req.url.endsWith("favicon.ico") ) {
        const redis = new Redis({
            url: '**YOUR ENDPOINT**',
            token: '**YOUR TOKEN**',
        })

        const counter = await redis.incr("deno-counter");
        return new Response(JSON.stringify({ counter }), { status: 200 });
    }


});

save & deploy.

The url should now return a json.

{"count":197}

Json

Upstash endpoint and token moved to .env via playground settings.



        const token = Deno.env.get("UPSTASH_REDIS_TOKEN");

        const redisUrl = Deno.env.get("UPSTASH_REDIS_URL");

Then all were doing in that same space is rendering html with a tailwind CDN.

const counter = await redis.incr("deno-counter");
${counter}

//deno.json

{
  "tasks": {
    "dev": "deno run --watch main.ts"
  }
}

implement in production, another project, or keep creating.

export to GitHub direct from playground.

upstash-rediss.deno.dev

//Generating random colors

const randomColor = generateRandomHexColor();

function generateRandomHexColor() {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    return "#" + randomColor;
}

//html with tailwind CDN and GitHub buttons 

 <!DOCTYPE html>
            <html lang="en">
            <head>

                <script async defer src="https://buttons.github.io/buttons.js"></script>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Counter</title>
                <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
            </head>
            <body class="bg-gray-100 flex flex-col items-center justify-center h-screen">
                <div class="max-w-md w-full mx-auto rounded-lg p-6 mb-4" style="background-color: <u>${randomColor};</u>">
                    <div class="bg-white shadow-md rounded-lg p-6">
                        <h1 class="text-3xl font-semibold text-center mb-4 cursor-pointer text-green-500 hover:text-green-600" onclick="location.reload()">Counter</h1>
                        <div class="text-center">
                            <p class="text-5xl font-bold mb-4"><u>${counter}</u></p>
                            <p class="text-lg text-gray-500 mb-4">https://upstash-rediss.deno.dev</p>
                            <a class="github-button" href="https://github.com/sudo-self/upstash-deno" data-color-scheme="no-preference: dark; light: dark; dark: dark_high_contrast;" data-icon="octicon-star" data-size="large" aria-label="Star sudo-self/upstash-deno on GitHub">Star</a>
                            <p class="text-lg text-gray-500 mb-4">MAC address: ${macAddress}</p>
                        </div>
                    </div>
                </div>
            </body>
            </html>

Guthub.com/sudo-self/upstash-deno

Blog

sudo-self

Join Our Newsletter. No Spam, Only the good stuff.

Related