🪄✨How I built this Twitter scheduler using React and Hasura🔥

TL;DR 🔥

In this tutorial, you'll learn how to build a tweet scheduler. Enter your Twitter credentials and select a time and a date and your tweet will be tweeted at that time.

Rocketgraph: An open-source replacement to Firebase 🚀

Just a quick background about us. Rocketgraph lets developers build web applications in minutes.
We do this by providing:

PostgresDB hosted on AWS RDS
Hasura console to GraphQLise your PostgresDB, manage your permissions, crons, schedulers and a lot more.
Built-in authentication that supports email/password, social, magic link and OTP
Serverless functions for any additional backend code.

Before we start

We are going to be using Hasura on-off schedulers to trigger Twitter API at the appropriate time and Rocketgraph's edge functions to setup the backend. So we need to create a project on Rocketgraph. It's free.

Signup

And create a project

It will setup a Hasura console. For now you don't need to know how to use it. Since we will be using it via the Hasura API.

Let's set it up 🆙

We'll be using React.js and shadcn UI for the front-end and Node.js for our serverless functions.

create a folder for project, client and server:

mkdir twitter-app && cd twitter-app
mkdir client server

Setting up Lambda functions

With Rocketgraph you can easily create lambda functions that act as your backend. To setup, note the project name from your project console on Rocketgraph:

npm init -y
npm install express body-parser axios axios-oauth-1.0a
npm install @codegenie/serverless-express

The last install is for express on the AWS Lambdas. You don't need to worry about that as Rocketgraph takes care of Lambda deployments.

Create a file index.js and add the following code

const serverlessExpress = require('@codegenie/serverless-express')
const app = require('./app')
exports.handler = serverlessExpress({ app })

Now create a file named app.js and add the following code:

// jshint esversion: 6

const express = require("express");
const bodyParser = require("body-parser");
const axios = require("axios");
const addOAuthInterceptor = require("axios-oauth-1.0a");

const app = express();
const port = 3000

app.use(express.json());

const APP_URL = "https://guhys2s4uv24wbh6zoxl3by4xa0im.lambda-url.us-east-2.on.aws/tweet";



app.post("/tweet", function (req, res) {
    // Create a client whose requests will be signed
    const client = axios.create();
    // Specify the OAuth options
    const payload = req.body.payload;
    const options = {
        algorithm: 'HMAC-SHA1',
        key: `${payload.key}`,
        secret: `${payload.secret}`,
        token: `${payload.token}`,
        tokenSecret: `${payload.tokenSecret}`,
    };

    const data = {
        "text": `${payload.tweet}`
    };

    console.log("addOAuthInterceptor is not a function: ", addOAuthInterceptor)
    // Add interceptor that signs requests
    addOAuthInterceptor.default(client, options);

    console.log("params: ", req.body);
    client.post("https://api.twitter.com/2/tweets", 
    data)
    .then(response => {
        console.log("resp: ", response, req.body.key);
        res.status(200).send(`<h2> the result is : Tweeted </h2>` );
    })
    .catch(err => {
        console.log(err);

        res.status(500).send(`<h2> the result is : Error </h2>` );
    });
});

app.post("/schedule-tweet", function (req, res) {
    const body = JSON.parse(req.body);
    console.log("body", body)
    const jsonb = {
        "type": "create_scheduled_event",
        "args": {
            "webhook": `${APP_URL}`,
            "schedule_at": `${body.schedule_at}`,
            "include_in_metadata": true,
            "payload": {
                "tweet": `${body.tweet}`,
                "algorithm": 'HMAC-SHA1',
                "key": `${body.key}`,
                "secret": `${body.secret}`,
                "token": `${body.token}`,
                "tokenSecret": `${body.tokenSecret}`,
            },
            "comment": "sample scheduled event comment"
        }
    }
    console.log(req.body);

    axios.post("https://hasura-vlklxvo.rocketgraph.app/v1/metadata", jsonb, {
        "headers" : {
            "Content-Type": "application/json",
            "X-Hasura-Role":"admin",
            "X-hasura-admin-secret":"********"
        },   
    }).then(function (response) {
        console.log("response: ", response);
        res.status(200).send({
            message: "Your result is tweeted"
        })
    }).catch(function (error) {
        console.log("Error from Hasura: ", error);
        res.status(500).send(error)
    });
})

app.listen(port, () => console.log(`calculator listening on port ${port}!`))

module.exports = app;

Notice the APP_URL? Leave it empty for now. We will get this URL once we deploy the function to prod. So now let's go ahead and do that.

Also replace X-hasura-admin-secret and HASURA_URL with the ones shown on your project's Hasura tab

Deploy the function ⛈️

Rgraph provides a cute CLI to assist you to develop your functions to AWS lambda:

npm install -g rgraph@0.1.10

And with your project name, execute this to deploy your function:

rgraph deploy <function name>

Build the frontend 👼

Create project

cd client
npx create-next-app@latest my-app --typescript --tailwind --eslint

Add shadcn ui

npx shadcn-ui@latest init

Add necessary components for our app

npx shadcn-ui@latest add button popover calendar card input label

Create UI

In src/app/page.tsx

"use client"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import React from "react"
import { useState } from "react"
import { DatePickerDemo } from "./date"


type ScheduleTweetInput = {
  key: String,
  secret: String,
  token: String,
  tokenSecret: String,
  tweet: String,
  date: any,
  time: any,
}

const sendTweet = async (twitterData: ScheduleTweetInput) => {
  const { date, time, tweet, key, secret, token, tokenSecret } = twitterData;
  console.log(time.split(":"))
  date.setHours(...time.split(":"))
  console.log(twitterData, date);
  const isoDate = date.toISOString()
  console.log(isoDate);
  const url = "https://guhys2s4uv24wbh6zoxl3by4xa0imsdb.lambda-url.us-east-2.on.aws/schedule-tweet"
  const postData = {
      "tweet": tweet,
      "schedule_at": isoDate,
      "key": key,
      "secret": secret,
      "token": token,
      "tokenSecret": tokenSecret
  }


  let headersList = {
    "Accept": "*/*",
    "User-Agent": "Thunder Client (https://www.thunderclient.com)",
    "Content-Type": "application/json"
   }

   let bodyContent = JSON.stringify(postData);

   let response = await fetch(url, { 
     method: "POST",
     body: bodyContent,
     headers: headersList,
     mode: "no-cors"
   });

   let data = await response.text();
   console.log(data, response.status, response.json);
   console.log("Status", response.status, response);
}

export default function DemoCreateAccount() {
  const [key, setKey] = useState("");
  const [token, setToken] = useState("");
  const [tokenSecret, setTokenSecret] = useState("");
  const [tweet, setTweet] = useState("");
  const [secret, setSecret] = useState("");
  const [date, setDate] = React.useState<Date>()
  const [time, setTime] = useState<any>('10:00');

  console.log(key, "key")

  return (
    <Card>
      <CardHeader className="space-y-1">
        <CardTitle className="text-2xl">Twitter scheduler</CardTitle>
        <CardDescription>
          Enter your credentials below to schedule a tweet
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4">
        <div className="grid gap-2">
          <Label htmlFor="email">API Key</Label>
          <Input id="email" type="email" placeholder="API Key" onChange={(e) => setKey(e.target.value)}/>
        </div>
        <div className="grid gap-2">
          <Label htmlFor="email">API Secret</Label>
          <Input id="email" type="email" placeholder="API Secret" onChange={(e) => setSecret(e.target.value)}/>
        </div>
        <div className="grid gap-2">
          <Label htmlFor="email">Access Token</Label>
          <Input id="email" type="email" placeholder="Access Token" onChange={(e) => setToken(e.target.value)} />
        </div>
        <div className="grid gap-2">
          <Label htmlFor="email">Access Secret</Label>
          <Input id="email" type="email" placeholder="Access Secret" onChange={(e) => setTokenSecret(e.target.value)}/>
        </div>
        <div className="grid gap-2">
          <Label htmlFor="email">Tweet</Label>
          <Input id="email" type="email" placeholder="Tweet your tweet here" onChange={(e) => setTweet(e.target.value)}/>
        </div>
        {DatePickerDemo(setDate, date)}
        <input aria-label="Time" type="time" onChange={(e) => setTime(e.target.value)}/>
      </CardContent>
      <CardFooter>
        <Button className="w-full" onClick={() => sendTweet({
          key,
          token,
          tokenSecret,
          date,
          time,
          tweet,
          secret,
        })}>Schedule tweet</Button>
      </CardFooter>
    </Card>
  )
}

Create a file called src/app/date.tsx

"use client"

import * as React from "react"
import { CalendarIcon } from "@radix-ui/react-icons"
import { format } from "date-fns"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export function DatePickerDemo(onChange: any, date: any) {

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant={"outline"}
          className={cn(
            "w-[240px] justify-start text-left font-normal",
            !date && "text-muted-foreground"
          )}
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="single"
          selected={date}
          onSelect={onChange}
          initialFocus
        />
      </PopoverContent>
    </Popover>
  )
}

Deploy

And deploy the front-end on Vercel. Hooray, your app is live 🥳

Top comments (3)

Pieces 🌟 • Jan 23

Great article. Well explained too! 👏

Kaushik Varanasi • Jan 23

Thank you. You might want to checkout Rocketgraph. If you have any trouble using it, please reach out to me at kaushik@rocketgraph.io and I will give you a lifetime discount on our platform.