DEV Community: Sourab Pramanik

Event Driven services using Kafka, SurrealDB, Rust, and Go.

Sourab Pramanik — Tue, 04 Jun 2024 20:18:36 +0000

Kafka?

To understand the purpose of Kafka you need to experiment with it in various contexts and reason with it. This small project is a very slight overview of one of the use cases of Kafka: streaming messages to drive multiple service-agnostic applications. Streaming messages using Kafka is not required to specify the destination where these messages should land. Similarly, it is not relevant for the receiver to be aware of the sender in any context unless done manually.

Kafka assures the integrity of the messages in the stream in the face of system failure saving us from inconsistent data, data loss, or redundancy. It is much more powerful when used across systems and applications built upon different tech stacks, architecture, and purposes and is distributed over the network. To read more about it check out this eBook.

So to get a basic understanding of what Kafka is and how it operates, we will be creating two different applications and we will see how they can communicate with each other without making any HTTP request internally.

Event-driven services?

A service is a logical unit within a larger application, responsible for executing specific tasks based on given inputs. Each service can communicate with other services using either synchronous communication methods (such as HTTP/REST, gRPC, and GraphQL) or asynchronous communication methods (such as webhooks, message queues, and event streaming). In this article, we will focus on using an event-streaming communication pattern to coordinate various services and perform the necessary operations to achieve the desired outcomes.

Event-driven services are those that communicate with each other in response to specific events being triggered. This communication is independent of the sources generating the events and the entities reacting to them.

Overview

To simulate a real-life example we will be building an inventory service using Rust and Actix that should receive an HTTP request to check if the product with the required units is available in the inventory, if it exists then we take that many products from the whole stock of it and when the application has successfully finished its job then we will produce a message using Kafka.

Also to keep store the data of the products and their available units we will be using a database called SurrealDB. I have chosen SurrealDB because of a specific reason which we will explore later in this article.
Now that we have produced a message from the inventory we need a consumer to consume this message by connecting to the Kafka broker. So for this, we will create a shipment service using Go to simulate the shipping process when the products are released from the inventory but to keep this project short and concise we are not going to build the whole shipment system.

Prerequisites

Rust: Install, Book
Go: Install, Docs
Docker: Install, Docs
SurrealDB CLI: Install, Docs

Basic understanding of programming and a huge amount of curiosity to know the whys and hows. Nothing else.

If you want to refer to the source code while reading this article then here is the repository

Get started

Docker compose

We will be pulling the docker images of Kafka, Zookeeper, and SurrealDB to keep the setup process light and easy.

version: "3.8"

services:
  surrealdb:
    image: surrealdb/surrealdb:latest
    container_name: surrealdb
    command: start --auth --user root --pass root file:/container-dir/dev.db
    ports:
      - "8000:8000"
    volumes:
      - surrealdb-data:/container-dir
    user: root
    environment:
      - SURREALDB_ENV_USER=root
      - SURREALDB_ENV_PASS=root
    networks:
      - net

  zookeeper-1:
    container_name: zookeeper-1
    image: zookeeper
    restart: always
    ports:
      - 2181:2181
    environment:
      - ZOOKEEPER_CLIENT_PORT=2181
    volumes:
      - ./config/zookeeper-1/zookeeper.properties:/kafka/config/zookeeper.properties

  kafka-1:
    container_name: kafka-1
    image: bitnami/kafka
    restart: always
    depends_on:
      - zookeeper-1
    ports:
      - 9092:9092
    environment:
      - KAFKA_ZOOKEEPER_CONNECT=zookeeper-1:2181
      - KAFKA_ADVERTISED_LISTENERS=PLAINTEXT://localhost:9092
      - ALLOW_PLAINTEXT_LISTENER=yes
      - KAFKA_CFG_LISTENER_SECURITY_PROTOCOL_MAP=CONTROLLER:PLAINTEXT,PLAINTEXT:PLAINTEXT
      - KAFKA_AUTO_CREATE_TOPICS_ENABLE=true
      - KAFKA_CREATE_TOPICS=stock_update:1:3
    healthcheck:
      test: ["CMD-SHELL", "kafka-topics.sh --bootstrap-server kafka:9092 --list || exit 1"]
      interval: 5s
      timeout: 10s
      retries: 5

networks:
  net:
    name: "net"
    driver: bridge

volumes:
  surrealdb-data:

Upon execution of the compose file using this command the same directory:

docker compose up -d

the docker engine will start three different containers meant for each image and now you will have Kafka at port 9092 and SurrealDB at port 8000 running in your local machine.

Inventory service

Create a new Rust binary application and you can name it inventory_service. Add these dependencies to your Cargo.toml file:

actix-web = "4"
dotenv = "0.15.0"
futures-util = "0.3"
rdkafka = { version = "0.36", features = ["ssl-vendored"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
surrealdb = "1.5.1"
tokio = { version = "1", features = ["full", "macros", "rt-multi-thread"] }

To install them run this command:

cargo install

Create a new .env file in the same path, and add these variables:

SURREAL_URL=127.0.0.1:8000
SURREAL_DB=ecommerce
SURREAL_NS=foo
SURREAL_USER=root
SURREAL_PW=root

KAFKA_BROKER=localhost:9092
KAFKA_TOPIC=stock_update

If you have changed any of these values then make sure to change them in your .env file.

Now being in the root path create a file init.surql which will have all the queries to set up the inventory table, inventory_stock_events table, and seed some dummy products. Check this file here to get the queries you need to add. And once that is done run this command to execute all the statements by importing them using SurrealDB CLI

surreal import --conn http://localhost:8000 --user root --pass root --ns foo --db ecommerce ./ini
t.surql

One important note, we have created inventory_stock_events table that will record the logs for the events whenever there is a change in units for any of the products. This logging happens autonomously so that we don’t have to trigger the logging process manually.

Now let's create the schema of the tables inside the src/ directory. Ad this schema to your schema.rs file:

use serde::{Deserialize, Serialize};
use surrealdb::sql::{Datetime, Id};

#[allow(dead_code)]
#[derive(Debug, Deserialize, Serialize)]
pub struct ProductThing {
    id: Id,
}
#[derive(Debug, Deserialize, Serialize)]
pub struct Product {
    pub id: ProductThing,
    pub name: String,
    pub price: u16,
    pub units: u16,
}

#[derive(Debug, Deserialize)]
pub struct UpdateProductStock {
    pub units: u16,
}

#[allow(dead_code)]
#[derive(Debug, Deserialize, Serialize)]
pub struct EventThing {
    id: Id,
}
#[derive(Debug, Deserialize, Serialize)]
pub struct StockEvent {
    pub id: EventThing,
    pub time: Datetime,
    pub action: String,
    pub product: ProductThing,
    pub before_update: u16,
    pub after_update: u16,
}

Create a kafka.rs file and add the Kafka producer function. This can be used with different topics and brokers:

use rdkafka::{producer::FutureProducer, ClientConfig};

pub async fn producer(brokers: &str) -> FutureProducer {
    ClientConfig::new()
        .set("bootstrap.servers", brokers)
        .set("message.timeout.ms", "5000")
        .set("allow.auto.create.topics", "true")
        .create()
        .expect("Producer creation error")
}

Now that we have the base setup let's create handler functions in main.rs :

Get inventory products handler

This handler function will return us the list of products and their related attributes.

async fn get_inventory_products(state: web::Data<State>) -> impl Responder {
    let db = &state.db;

    let products: Vec<Product> = match db.select("inventory").await {
        Ok(val) => val,
        Err(e) => {
            dbg!(e);
            return HttpResponse::InternalServerError().body("Server problems!!");
        }
    };
    HttpResponse::Ok().json(products)
}

Update stock handler:

This handler function takes the product_id and units in the payload. It will check whether there is a product with this product_id, and units exist or not. And updates the stock units accordingly responding with appropriate messages and status

async fn update_stock(
    product_id: web::Path<String>,
    state: web::Data<State>,
    payload: web::Json<UpdateProductStock>,
) -> impl Responder {
    if product_id.is_empty() {
        return HttpResponse::BadRequest().body("Invalid Product Id");
    }

    let db = &state.db;
    let mut available_units: u16 = 0;

    if let Ok(mut query_product) = db
        .query(format!(
            "SELECT units FROM inventory:{} WHERE units>={}",
            product_id, payload.units
        ))
        .await
    {
        if let Ok(Value::Array(arr)) = query_product.take(0) {
            if !arr.is_empty() {
                if let Value::Object(obj) = &arr[0] {
                    if let Some(Value::Number(units)) = obj.get("units") {
                        available_units = units.to_usize() as u16;
                    }
                }
            } else {
                return HttpResponse::NotFound().body("Product not found or insufficient units");
            }
        } else {
            return HttpResponse::InternalServerError().body("Unexpected query response format");
        }
    } else {
        return HttpResponse::InternalServerError().body("Server Error");
    }

    if let Ok(mut update_product) = db
        .query(format!(
            "UPDATE inventory:{} SET units={}",
            product_id,
            available_units - payload.units,
        ))
        .await
    {
        if let Ok(Value::Array(arr)) = update_product.take(0) {
            if !arr.is_empty() {
                HttpResponse::Ok().body("Product stock updated")
            } else {
                HttpResponse::NotFound().body("Product not found or insufficient units")
            }
        } else {
            HttpResponse::InternalServerError().body("Unexpected query response format")
        }
    } else {
        HttpResponse::InternalServerError().body("Server Error")
    }
}

Stream stock change event handler

async fn stream_stock_changes(
    db: &Surreal<Client>,
    stock_producer: &FutureProducer,
) -> surrealdb::Result<()> {
    let kafka_topic = env::var("KAFKA_TOPIC").expect("KAFKA_TOPIC must be set.");

    if let Ok(mut stream) = db.select("inventory_stock_events").live().await {
        while let Some(result) = stream.next().await {
            let res: Result<Notification<StockEvent>> = result;
            let data = &res.unwrap().data;

            stock_producer
                .send(
                    FutureRecord::to(&kafka_topic)
                        .payload(&format!(
                            "Message {}",
                            &serde_json::to_string(data).unwrap()
                        ))
                        .key(&format!("Key {}", 1))
                        .headers(OwnedHeaders::new().insert(Header {
                            key: "header_key",
                            value: Some("header_value"),
                        })),
                    Duration::from_secs(0),
                )
                .await
                .expect("FAILED TO PRODUCE THE MESSAGE");
        }
    } else {
        println!("Failed to stream")
    }

    Ok(())
}

In this handler function, we have leveraged the power of the live query select statement of SurrealDB. Using live query we can capture real-time data changes in the inventory_stock_events table without any fail or manual trigger.

Here’s how it operates:

Event flow

When the user makes a change to stock units of any valid product in the inventory table it gets logged by the inventory event log table and when the logging of the record change is successful the application will automatically trigger an event, and when that happens a message with specific changes will be produced and streamed by Kafka broker.

Using all the handler functions we can update the main function to this:

async fn main() -> std::io::Result<()> {
    dotenv().ok();

    // LOAD ENV VARS
    let surreal_url = env::var("SURREAL_URL").expect("SURREAL_URL must be set.");
    let surreal_ns = env::var("SURREAL_NS").expect("SURREAL_NS must be set.");
    let surreal_db = env::var("SURREAL_DB").expect("SURREAL_DB must be set.");
    let surreal_user = env::var("SURREAL_USER").expect("SURREAL_USER must be set.");
    let surreal_password = env::var("SURREAL_PW").expect("SURREAL_PW must be set.");
    let kafka_broker = env::var("KAFKA_BROKER").expect("KAFKA_BROKER must be set.");

    // INIT DATABASE
    let db = Surreal::new::<Ws>(&surreal_url)
        .await
        .expect("Failed to connect to the Surreal client");
    db.signin(Root {
        username: &surreal_user,
        password: &surreal_password,
    })
    .await
    .expect("Failed to authenticate");
    db.use_ns(surreal_ns)
        .use_db(surreal_db)
        .await
        .expect("Failed to access the Database");

    let db_clone = db.clone();

    // CREATE KAFKA PRODUCER
    let stock_producer = producer(&kafka_broker).await;

    // SPAWN A NEW THREAD TO EXECUTE KAFKA PRODUCER
    task::spawn(async move {
        stream_stock_changes(&db_clone, &stock_producer)
            .await
            .expect("failed to stream");
    });

    // EXECUTE SERVER
    HttpServer::new(move || {
        App::new()
            .app_data(web::Data::new(State { db: db.to_owned() }))
            .service(
                web::scope("/inventory")
                    .service(web::resource("").route(web::get().to(get_inventory_products)))
                    .service(
                        web::scope("/{product_id}")
                            .service(web::resource("").route(web::patch().to(update_stock))),
                    ),
            )
    })
    .bind(("127.0.0.1", 3000))?
    .run()
    .await
}

Finally, your main.rs file should look like this here.

Shipping service

This service is not that functional it just consumes the messages by connecting to the Kafka broker. I have kept this application as simple as possible for this article but in real projects, you would be doing much more logical operations with the messages that this application receives.

Create a directory shipment_service , inside the directory and create a new Go binary:

go mod init shipment_service

Install packages:

go get -u github.com/segmentio/kafka-go
go get -u github.com/joho/godotenv

Create .env File

KAFKA_BROKER=localhost:9092
KAFKA_TOPIC=stock_update
KAFKA_GROUP_ID=shipment_service_group
POSTGRES_USER=yourusername
POSTGRES_PASSWORD=yourpassword
POSTGRES_DB=yourdatabase
POSTGRES_HOST=localhost
POSTGRES_PORT=5432

If you have changed any of these values then make sure to change them in your .env file.

Create a main.go file and add the following code:

package main

import (
    "context"
    "encoding/json"
    "log"
    "os"
    "os/signal"
    "strings"
    "syscall"

    "github.com/joho/godotenv"
    "github.com/segmentio/kafka-go"
)

type OriginalMessage struct {
    ID           IDWrapper `json:"id"`
    Time         string    `json:"time"`
    Action       string    `json:"action"`
    Product      IDWrapper `json:"product"`
    BeforeUpdate int       `json:"before_update"`
    AfterUpdate  int       `json:"after_update"`
}

type IDWrapper struct {
    ID IDStringWrapper `json:"id"`
}

type IDStringWrapper struct {
    String string `json:"String"`
}

type TransformedMessage struct {
    ID           string `json:"id"`
    ProductID    string `json:"productId"`
    BeforeUpdate int    `json:"before_update"`
    AfterUpdate  int    `json:"after_update"`
    Action       string `json:"action"`
    Time         string `json:"time"`
}

func main() {
    // Load environment variables
    err := godotenv.Load()
    if err != nil {
        log.Fatalf("Error loading .env file: %v", err)
    }

    // Kafka configuration
    kafkaBroker := os.Getenv("KAFKA_BROKER")
    kafkaTopic := os.Getenv("KAFKA_TOPIC")
    kafkaGroupID := os.Getenv("KAFKA_GROUP_ID")

    // Set up Kafka reader
    reader := kafka.NewReader(kafka.ReaderConfig{
        Brokers:  []string{kafkaBroker},
        GroupID:  kafkaGroupID,
        Topic:    kafkaTopic,
        MinBytes: 10e3, // 10KB
        MaxBytes: 10e6, // 10MB
    })

    // Create a channel to handle OS signals
    sigchan := make(chan os.Signal, 1)
    signal.Notify(sigchan, os.Interrupt, syscall.SIGTERM)

    // Start consuming messages
    go func() {
        for {
            m, err := reader.FetchMessage(context.Background())
            if err != nil {
                log.Printf("Error fetching message: %v", err)
                continue
            }

            rawMessage := string(m.Value)

            jsonMessage := strings.TrimPrefix(rawMessage, "Message ")

            var originalMessage OriginalMessage
            if err := json.Unmarshal([]byte(jsonMessage), &originalMessage); err != nil {
                log.Printf("Error unmarshaling message: %v", err)
                continue
            }

            transformedMessage := transformMessage(originalMessage)
            transformedMessageJSON, err := json.Marshal(transformedMessage)
            if err != nil {
                log.Printf("Error marshaling transformed message: %v", err)
                continue
            }

            log.Printf("Incoming message: %s", transformedMessageJSON)

            // Commit the message to mark it as processed
            if err := reader.CommitMessages(context.Background(), m); err != nil {
                log.Printf("Error committing message: %v", err)
            }
        }
    }()

    // Wait for a termination signal
    <-sigchan
    log.Println("Shutting down...")
    reader.Close()
}

func transformMessage(orig OriginalMessage) TransformedMessage {
    return TransformedMessage{
        ID:           orig.ID.ID.String,
        ProductID:    orig.Product.ID.String,
        BeforeUpdate: orig.BeforeUpdate,
        AfterUpdate:  orig.AfterUpdate,
        Action:       orig.Action,
        Time:         orig.Time,
    }
}

Running the services

Go inside the inventory_service directory and run the binary:

cargo run

Open another terminal window, go inside the shipment_service directory and run the binary:

go run main.go

Execution

Now on a new terminal window execute this CURL request:

curl --location --globoff --request PATCH 'http://localhost:3000/inventory/{product_id}' \
--header 'Content-Type: application/json' \
--data '{
    "units":2
}'

You will notice that messages are getting printed on the terminal window where you are running your Go binary(shipment service). It is consuming the changes in stock in real time without any HTTP communication between the services.

Final Output

Conclusion

I hope you enjoyed reading this article and learned something new. Though I have tried to explain one of the use cases of Kafka and the features of SurrealDB, there is so much more that can be achieved and a highly efficient application can built using tools and technologies like this that cannot be covered in one single article.

Signing Off!!

How do you understand what a Microservice or Monolith architecture is after all?

Sourab Pramanik — Sat, 01 Jun 2024 15:59:57 +0000

Recently, I have read some articles and books on microservices and how they may promise better results than monoliths regarding availability, network, scale, and management. All I understand, which I believe is fundamental to all these new architectures, is how you and your team maintain a code base, not in terms of “Clean Code,” but how you figure out that these many functionalities should belong to this or that module or component. It is a great observation to make when you finally understand that scaling is not always the solution to every problem that runs on a server and communicates via the network.

It is not trivial to convince people in tech that you may not have to rewrite the whole system because it is not coping with the traffic or the input. Start looking for places where you are doing expensive computes, and the logic may need some refactoring this time to get the same results. I have seen this in many projects where some pieces of code work as duct tape and now when we bring the whole system to play in the field, the tape is starting to widen open sooner or later. And I get it that sometimes, because of time constraints, or you don’t understand the fundamentals of the language and are not interested in it, or it was your last day at the company, or you don’t understand outcomes from a feature that is expected, whatever it may be, you did what you did. Still, now that is going to serve the people you don’t even know.

Now coming back to it, the first approach everyone should take is to build the monolithic system more modular and define the boundaries for each module in such a way that you know when something is off where you should be looking. Second, understand the process of every module and compare their performance after doing some fixes and removing those nested loops or recursive calls and throwing some caching in it, try reducing multiple database calls by doing many more optimized queries, making high compute operations asynchronous, split the operations, and etc. After that, if you still have problems, go ahead and pick one module that is having performance issues and fewer dependencies and start building the microservice by just replicating it and using a message broker like Kafka to communicate with the dependencies of the old system for that service to produce and consume the message triggered by some event asynchronously and observe the new microservice if it is working as expected. By doing so, you are having the same service working in both systems; this gives you insight into how performant the microservice will be, and not break the existing system by bringing a foreign architecture with no knowledge of where and when it may start showing some grey areas.

Building software is always about numbers, assumptions, precedence, resources, and rewrites. A microservice for a startup company where the number of people working on the software is fewer than 50 is not a very good choice. If you are doing this, then it is a clear sign that you don’t understand what the goal of the software is and how to use the resources you have. You are either exploiting the resources you have just because you can or you read an article about how monoliths can bring you unforeseen troubles. In any case, you are always responsible for every duct tape to every exploit.

In my conclusion, I can only state, build everything as simply as possible and this comes with failing experiences and not by writing more code the same way every time. State the boundaries very carefully and adhere to those to keep the parts and pieces decoupled as much as possible while doing the job they are responsible for. Read and watch people building software still alive for more than 10 years, because they may share some opinions that can be hard to digest but they have experienced the worst you could ever imagine (a world without AWS or Cloudflare). I like the benefits of monoliths and microservices and I can use both if I have to that gives me more control over making future decisions which is always the case in building software where people lose control and may get sidetracked.

So in the end, it is all up to the understanding, the ego, and the satisfaction, since we are human in the end and we have feelings. Every wrong decision is a step towards upskilling.

Good luck!

URL shortening using CLI

Sourab Pramanik — Mon, 15 Apr 2024 07:46:18 +0000

This project is built using Vercel, Neon, and Rust. It is a link-managing application that has a CLI to create, read, and delete short URLs. I have used Vercel to deploy a serverless function that is used for redirections. This whole setup is designed to be self-hosted which enables more control, complete customizations, and low-to-no cost on usage.

What is a URL shortener and why do we need it?

URL shortener is a service that is used to create short URLs that work as an alias for long URLs, this is important when you have a long URL (e.g. https://chart.apis.google.com/chart?chs=500x500&chma=0,0,100,100&cht=p&chco=FF0000%2CFFFF00%7CFF8000%2C00FF00%7C00FF00%2C0000FF&...) and sharing this is not that neat when it comes to branding, email marketing, and what if you snap out some characters at the end of the URL while copying? invalid URL now.

It becomes really hard this way, that is where we can use a URL-shortening service that can generate an alias for the long URLs having comparatively shorter lengths. The other benefits of having short URLs or aliases are you can customize how you want your URL to appear(e.g. https://foo.baz/2fGH553), generate analytics like the number of users clicked, country of origin, protect with passwords, and many more.

Many big companies like Twitter or X use this service for sharing any content outside their application. This helps them to maintain brand aesthetics, market themselves better, and keep things clean and concise.

How does it work?

The user enters the short URL, and every short URL must have a path, the path acts as a unique identifier, and using this we query the database to find the record.

If there exists a record then we will send the browser the long URL to the browser to redirect the user to the destination page, the redirection can be temporary or permanent there are trade-offs on using one over the other. Once the browser receives the it will open the redirected page.

If the record doesn't exist or the path is not what was expected then the user will get a 404 status page.

As simple as that!!!

Pre-requisites

NodeJS - Link
PNPM - Link (optional)
Rust - Link
Vercel CLI - Link

Setup

Open your terminal window, clone the repository at any desired location in your machine, and go inside the project folder using these commands:

git clone https://github.com/sourabpramanik/shorten-url.git
cd shorten-url

Create a Postgres database

I appreciate Neon and the team behind it, they ingeniously crafted everything around the standard Postgres database so neatly and expanded the scope to use Postgres in different domains without any overhead. Not to mention they also have a humble open-source community.

Go to their website, log in, or create an account.
Create a project and a database, name them whatever you want:

Go to your project dashboard, select your database, and copy the connection string, you will need this connection string later:

Deploy serverless function Vercel

Deploying projects on Vercel is completely free in hobby accounts, and you can add custom domains to your projects if you have however by default Vercel will generate a production URL for your project.

Build the serverless function:
```
vercel build --prod --cwd ./shorten-url-functions
```
--prod flag will build the function with all the configurations needed by Vercel to deploy and run this function in the production environment.

After the build is completed it generates .vercel directory in the root, which has all the directories and configuration files containing lots of information like the runtime, project name, entry point, filesystem mappings, target environment, packages used, commands to be executed and so on.

If you are curious to know more about it then go ahead and tweak things here and there (at your own risk) as long as everything works as expected.
Deploy the build output:
```
vercel deploy --prebuilt --prod --cwd ./shorten-url-functions
```
--prebuilt flag is for Vercel to locate the output directory inside the .vercel and deploy it to production

Only if this is the first time you are deploying this project then you have to answer some of the prompts. This is needed by Vercel to make sure your project is deployed properly with any alternate approach you may have.
Add environment variables:
```
vercel env add DATABASE_URL --cwd ./shorten-url-functions
```
a prompt will appear asking for the value, paste the database connection string copied from the Neon project dashboard.

You will need to deploy the function again using the command from step 2 so that the deployed function can use the newly added environment variable, most of the time it is not needed but it's better to make sure
That's it with the serverless function deployment, now we need to get the domain.

If you have a custom domain and want to use it as the domain for creating short URLs then follow this doc link

Or else if you want to use the domain generated by Vercel for your project then go to the project dashboard and copy the domain name.

Install and configure CLI

To install the CLI run this command:
```
cargo install --path ./shorten-url-cli
```
Configuring the CLI:
run the below command and use these when prompted:
```
shortenurl config
```
Get these:
- Postgres connection string from Neon projects dashboard
- Domain name of the deployed serverless function
And use it when prompted
```
? Provide postgres connection string:
? Provide primary domain configured in Vercel(e.g. foo.com):
```
After the migration completes, your config will be saved in a shortenurl.toml file inside the config directory. Look up at these locations depending on your Operation System to locate the config file:

Linux

vim /home/<username>/.config/shortenurl/shortenurl.toml

Windows

vim C:\Users\<username>\AppData\Roaming\shortenurl\shortenurl.toml

Mac

vim /Users/<username>/Library/Application Support/shortenurl/shortenurl.toml

That's it, we have finally completed the setup.

Usage

Create a short URL

shortenurl alias create <URL>

This will generate an alias for the short URL and creates a record in the database. If the provided URL already exists then it will throw an error.

Get long and short URLs by alias

shortenurl alias get <alias>

If you have an alias (e.g. U9uaR8C) but are not sure which long URL it belongs to then use this command.

List all records

shortenurl alias get-all

This command will list out all the short URLs and the respective long URLs

Remove a record by the alias

shortenurl alias remove-alias <alias>

To remove a short URL and its respective long URL, you can use this command by providing the alias(e.g. U9kHB4Z)

Remove all records

shortenurl alias flush

Like it says flushes out everything.

Be careful when you remove a record because you may have used these short URLs at some other places, removing them and using these short URLs again will give 404.

Conclusion

This was a fun project for me and has lots of scope for new features like analytics, caching, real-time logging, URL grouping by domain name, and so on. But for now, this is it, if you think this project can be used as an alternative to other similar products out there because of the control, minimal to no cost, and hell lot of customizations it provides then let me know here, I would be happy to craft this for production use.

Signing out!!!

Using Clerk authentication in React

Sourab Pramanik — Wed, 14 Feb 2024 02:10:46 +0000

Originally published at [Shuttle](https://www.shuttle.rs/blog/2024/02/13/clerk-in-react)

This two-part article covers how we can build an Issue tracking application using React for the frontend, and Shuttle and Actix web for the backend. It also uses Clerk for authentication in the frontend and protecting the Rest APIs in the backend.

This article covers the React frontend, and the first part covers the Rust backend.

Here is the source code of the complete project if you want to follow along, and a link to the demo.

Overview

In the frontend directory of the template we've been building from in Part 1, let’s explore some of the React libraries that the template has provided us.

Shadcn UI

Shadcn UI is a collection of reusable components that uses Tailwind CSS to build its components with great accessibility.

SWR

SWR is used to create hooks for data fetching and mutations by consuming the APIs we have created in the backend.

Lucide React

Lucide React has a wide range of icons that sits just right with Shadcn UI.

Build the frontend

Setting Environment Variable

You can find a .env.example file copy the content, create a new file .env in the same path, and paste the content in it. From your Clerk dashboard get the PUBLISHABLE_KEY and assign it to the variable VITE_CLERK_PUBLISHABLE_KEY in the .env file:

VITE_CLERK_PUBLISHABLE_KEY=pk_test_YW1xxxxxxxxxxxxxxxxxxxxxxxxxxxcy5kZXYk

Adding components from Shadcn UI

We already have table and avatar components in the /frontend/components/ui directory but we need a few more components to build this application. Run this command to add the components:

npx shadcn-ui@latest add badge button card dialog form input label select sonner

Schema

We need to represent the structure of the data we are going receive in response from the backend to keep our frontend application type safe and more predictable.

Create /frontend/lib/schema.ts and add IssueSchema and UserSchema interfaces:

export interface IssueSchema {
    id: string | undefined,
    title: string;
    description: string;
    status: "todo" | "inprogress" | "done" | "backlog";
    label: "bug" | "feature" | "documentation";
    author: string;
}

export interface UserSchema {
    id: string,
    first_name: string,
    last_name: string,
    username: string,
    profile_image_url: string,
}

In the IssueSchema, we have predefined the label and status field value because this helps keep different parts of our application well aware of the incoming data and restricts invalid data input or output.

Store

We will need to create two stores using Zustand. First, install Zustand:

npm install zustand

Store for issue id that has to be updated/edited

import { create } from 'zustand'

type IssueStore = {
    edit_issue_id: string,
    setEditIssueId: (id: string) => void
}
export const useIssueStore = create<IssueStore>((set) => ({
    edit_issue_id: "",
    setEditIssueId: (id: string) => set(() => ({ edit_issue_id: id })),
}))

Store for closing and opening the issue modal

type IssueModalStore = {
    isOpen: boolean,
    setOpen: () => void
    setClose: () => void
}
export const useIssueModalStore = create<IssueModalStore>((set) => ({
    isOpen: false,
    setOpen: () => set({ isOpen: true }),
    setClose: () => set({ isOpen: false }),
}))

Custom hooks

We will create the custom hooks using useSWR and userSWRMutation so that we can revalidate the data after any mutation happens and cache the stale data.

Create /frontend/lib/hooks.ts and let's start integrating all the APIs we have created in the backend. First let's bring all the required schema, hooks, and components into the scope:

import useSWR, { Fetcher, useSWRConfig } from "swr"
import useSWRMutation from 'swr/mutation'
import { IssueSchema, UserSchema } from "./schema";
import { toast } from "sonner";
import { useIssueModalStore } from "./store";

Get user hook

This hook will consume the get user by id API we have created before. The first parameter of useSWR is the key which is used as an identifier to cache the data and revalidate the data using that key, this key can be a subset of the URL path which can be passed to the fetcher function to fetch or mutate data as well. To know more about the arguments follow this documentation.

The hook returns an object where the isLoading property is a boolean property that sets to true while data is being fetched and a data property that is the returned value of the hook.

export const useGetUser = (user_id: string | undefined) => {
    const fetcher: Fetcher<UserSchema, string> = (url) => fetch(url).then(res => res.json())
    const { isLoading, data } = useSWR(`/api/user/${user_id}`, fetcher);
    return { isLoading, data };
}

Get issues hook

Fetches all the issues for the issues table, consuming get issues API, the response of this API on success will be an array of issues, that’s why we have passed IssuesSchema[] to the Fetcher type:

export const useGetIssues = () => {
    const fetcher: Fetcher<IssueSchema[], string> = (url) =>
        fetch(url).then((res) => res.json())
    const { isLoading, data } = useSWR('/api/issues', (url) => fetcher(url));
    return { isLoading, data };
}

Get issue by id hook

This hook uses the get issue by id API and returns the one single record that matches that id additionally, we have added a condition to call the fetcher function only when id is not empty:

export const useGetIssue = (id: string) => {
    const fetcher: Fetcher<{ data: IssueSchema }, string> = (url) =>
        fetch(url).then((res) => res.json())
    const { data } = useSWR(() => id !== "" ? `/api/issue/${id}` : null, fetcher);

    return { data: data?.data }
}

Create issue hook

This hook returns a trigger method from useSWRMutation hook which takes the data to be sent in the request body of the create issue API and an isMutating boolean property which we can use to show a loading animation and disable any mutation process while this property is true.

We use the setClose method from the useIssueModalStore to close the issue modal once the issue has been created successfully.

The data of the payload should match the IssueSchema but it should not have the id field as it is a new record, so to remove id field we use Omit<IssueSchema, "id"> which creates a new type with the id field omitted.

export const useCreateIssue = () => {
    const { setClose } = useIssueModalStore();

    const create = (url: string, { arg }: { arg: Omit<IssueSchema, "id"> }) => fetch(url, {
        method: "POST",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
        },
        body: JSON.stringify(arg),
    }).then(res => res.json())

    const { mutate: revalidateIssuesList } = useSWRConfig();

    const { isMutating, trigger } = useSWRMutation("/api/issue", create, {
        onSuccess() {
            toast.success("Issue has been created.");
            setClose();
            revalidateIssuesList("/api/issues")
        },
        onError(err) {
            if (err.message) {
                toast.error(err.message);
            } else {
                toast.error("Failed to create issue");
            }
        },
    })

    return { isMutating, trigger }
}

🗨️ We need to specify the content type header as application/json in the fetch calls because by default fetch API sets the content type header to text/plain which causes an incorrect content error as the backend we have created expects a JSON payload.

Update/Edit issue hook

This hook consumes the update issue by id API and similar to the create issue hook it also returns isMutating property and trigger method.

We use the setClose method from the useIssueModalStore to close the issue modal once the issue has been updated successfully.

export const useEditIssue = () => {
    const { setClose } = useIssueModalStore();

    const edit = (url: string, { arg }: { arg: IssueSchema }) => fetch(`${url}/${arg.id}`, {
        method: "PATCH",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
        },
        body: JSON.stringify(arg),
    }).then(res => res.json())

    const { mutate: revalidateIssuesList } = useSWRConfig();

    const { isMutating, trigger } = useSWRMutation("/api/issue", edit, {
        onSuccess() {
            toast.success("Issue has been updated.");
            setClose();
            revalidateIssuesList("/api/issues")
        },
        onError(err) {
            if (err.message) {
                toast.error(err.message);
            } else {
                toast.error("Failed to update issue");
            }
        },
    })

    return { isMutating, trigger }
}

Delete issue hook

One final API integration, the delete API takes the id and also returns an object with isMutating field and trigger method:

export const useDeleteIssue = () => {
    const { setClose } = useIssueModalStore();

    const remove = (url: string, { arg }: { arg: { id: string } }) => fetch(`${url}/${arg.id}`, {
        method: "DELETE",
    }).then(res => res.json())

    const { mutate: revalidateIssuesList } = useSWRConfig();

    const { isMutating, trigger } = useSWRMutation("/api/issue", remove, {
        onSuccess() {
            toast.success("Issue has been deleted.");
            setClose();
            revalidateIssuesList("/api/issues")
        },
        onError(err) {
            if (err.message) {
                toast.error(err.message);
            } else {
                toast.error("Failed to delete issue");
            }
        },
    })

    return { isMutating, trigger }
}

Issue modal

Create an issue modal in /frontend/components/issue-modal.tsx.

The issue modal will have a form with title, description, status select, and label select input fields.

Using Zod

First, we need to install Zod to define the schema for the form and add rules with helper messages to validate the user input:

npm install zod

Next, define the form schema:

import { z } from "zod";
//...rest of the imports

const status = ["todo", "inprogress", "done", "backlog"] as const;
const label = ["bug", "feature", "documentation"] as const;
const formSchema = z.object({
  title: z.string().min(3, {
    message: "title must be at least 3 characters.",
  }),
  description: z.string().min(5, {
    message: "title must be at least 5 characters.",
  }),
  status: z.enum(status, {
    required_error: "You need to select a status.",
  }),
  label: z.enum(label, {
    required_error: "You need to select a label.",
  }),
  author: z.string({ required_error: "Author is required" }),
});

In the above code, we have created a label and a status enum for the select input field option. It should be the same as the expected label and status field value of the IssueSchema.

Using React Hook Form

Now, we need to install React Hook Form for field validation and field state management:

npm install react-hook-form

React Hook Form has a useForm hook which is used to handle the onChange event and validate the form on the fly. It needs a type parameter which will be the form definition consisting of the details of each field the form is having. We can infer the type by using the formSchema we have defined using Zod.

useForm hook accepts two options a resolver and defaultValues. For the resolver, we need to integrate preferred schema validation. We will use Zod resolver for validation which will take the formSchema as a parameter to apply the validation rules.

For the defaultValues for the form, but for the author we will not create a form element rather we will provide the user id which we can get from useUser hook from Clerk because we only want the user who is creating the issue to be the author of.

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { useUser } from "@clerk/clerk-react";
//...rest of the imports

function IssueCard() {
  const { user } = useUser();
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: "",
      description: "",
      status: "todo",
      label: "bug",
      author: user?.id,
    },
  });

  //...rest of the code
}

Conditional mutation and rendering for creation and update

So far we have added all the required hooks and components that can be used to create and update an issue. Now, we need to render the modal differently for the update than how it is for the creation.

For the update, we need the issue id from useIssueStore hook and fetch the issue first using useGetIssue once we have retrieved the issue successfully we can update the state of the form using useEffect hook and only allow the author to update their own created issues:

After that, we will define the onSubmit handler function to conditionally create an issue using useCreateIssue hook or update an issue using useEditIssue hook:

import { useIssueStore } from "@/lib/store";
import { useCreateIssue, useEditIssue, useGetIssue } from "@/lib/hooks";
//...rest of the imports

function IssueCard() {
  const { edit_issue_id } = useIssueStore();
  const { data: issue } = useGetIssue(edit_issue_id);

  const { isMutating: createMutating, trigger: createTrigger } =
    useCreateIssue();
  const { isMutating: editMutating, trigger: editTrigger } = useEditIssue();

  function onSubmit(values: z.infer<typeof formSchema>) {
    edit_issue_id === ""
      ? createTrigger(values)
      : editTrigger({ id: edit_issue_id, ...values });
  }

  //Check for the author is editing or not
  const noAuth = edit_issue_id !== "" && user?.id !== issue?.author;
}

Finally, your issue modal will look like this.

Issues table

Create a new directory inside the components directory issues-table, inside this directory create two files index.tsx, and row.tsx.

Edit the row.tsx file

We will define Row component which will take props having the type set to IssueSchema.

Each row will have 6 cells for the author, title, description (truncated), status, label, and last cell for edit and delete buttons.

The edit button will set the issue id to be edited using setEditIssueId from useIssueStore hook and open up the modal. The delete button will trigger the delete API in the useDeleteIssue hook.

Both of these buttons is conditionally rendered based on the condition that if the signed-in user is an author of the issue then they can mutate the issue or else they can just view the issue.

Please find the complete code here.

Edit the index.tsx file of the issue-table component

Here you can find the complete code for the issue table**.

Update `App.tsx` file

Now we can import our IssuesTable component and render it:

import { SignIn, SignedIn, SignedOut, UserButton } from "@clerk/clerk-react";
import IssuesTable from "@/components/issue-table";

function App() {
  return (
    <main>
      <SignedOut>
        <SignIn />
      </SignedOut>
      <SignedIn>
        <div className="p-20 flex flex-col items-center space-y-7">
          <div className="fixed top-6 right-6">
            <UserButton afterSignOutUrl="/" />
          </div>
          <IssuesTable />
        </div>
      </SignedIn>
    </main>
  );
}

export default App;

Update `main.tsx` file

Add the Toaster component from sonner and IssueModal:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { ClerkProvider } from "@clerk/clerk-react";
import { Toaster } from "@/components/ui/sonner";
import IssueModal from "@/components/issue-modal";

// Import your publishable key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;

if (!PUBLISHABLE_KEY) {
  throw new Error("Missing Publishable Key");
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <App />
      <Toaster />
      <IssueModal />
    </ClerkProvider>
  </React.StrictMode>
);

Run the application

First, build the frontend application using this command:

npm run build

This will generate an optimized build in the /frontend/dist directory.

Finally run the backend using:

cargo shuttle run

Open the highlighted URL in the browser window:

Deployment

Now you can deploy your app on the Shuttle platform by running cargo shuttle start and cargo shuttle deploy (with the --allow-dirty flag if you have uncommitted changes).

One important note is that the deployment using the development keys from Clerk will work just fine, but if you change to use the Production Instance of Clerk then you will need to update the keys with Live keys. Now since you have moved to production you will also need to set up the domain or subdomain of your application in Clerk and add the CNAME records that you will get from the Clerk dashboard to your DNS record for managing sessions, loading portal using your domain, sending verification emails, and using custom callback URL. Since this process can be different based on your domain provider and management system, I will leave a link to the Clerks documentation on Deploy to production.

Closing in

Thanks for reading!! That's a lot but I hope you have managed to deploy your application and had a good learning experience.

Using Clerk authentication in Rust

Sourab Pramanik — Wed, 14 Feb 2024 02:08:03 +0000

Originally published at [Shuttle](https://www.shuttle.rs/blog/2024/02/13/clerk-in-rust)

This article covers the Rust backend, and the second part covers the React frontend.

Here is the source code of the complete project if you want to follow along, and a link to the demo.

To start this project we will use the Clerk template from Shuttle’s example repository that has a barebone setup of Shuttle, Actix web, Vite (React), and Clerk.

The backend uses the clerk-rs community crate to create a connection between the backend application and Clerk project. This crate has many different APIs for different use cases. In the template there is an endpoint to fetch all user records using the clerk-rs user API. We can easily verify a user's identity when trying to access protected routes using the ClerkMiddleware from the crate.

We will use Postgres for the database which will run in a docker container so make sure you also have docker installed in your local machine.

Let's get started

First, we need to clone the template from the Shuttle’s example repository using Shuttle CLI:

cargo shuttle init --from shuttle-hq/shuttle-examples --subfolder actix-web/clerk

You will get a few prompts to create a new project using this template. Make sure you provide a unique name because when you deploy this project on Shuttle this project name will become the sub-domain. And once a name is taken it cannot be used for any other projects

After that, cd into the project directory.

Setup a new application in Clerk

Head on to Clerk’s official website, sign in or sign up if you don’t have an account, and create a new project in the dashboard. Give a name to your project and select the providers using which users can sign-in or sign-up in your application.

After that, you will get a Publishable Key and a Secret key which we will use later in our application.

Build the backend

Now we can start updating the existing backend code to write and build the Rest APIs for our application.

cd into the backend, and rename the Secrets.example.toml file to Secrets.toml:

cd backend
mv Secrets.example.toml Secrets.toml

Copy the Secret key from the Clerk's dashboard and add it to the Secrets.toml file:

CLERK_SECRET_KEY = "sk_test_vsWrxxxxxxxxxxxxxxxxxxxxxxxxxtfTr"

⚠️ Do not commit this file, so make sure you have added this file in the .gitignore.

Now, we need to write a new migration in a schema.sql file which will create a new issues table in our Postgres database.

Create schema.sql and add the schema:

CREATE TABLE IF NOT EXISTS issues (
  id SERIAL PRIMARY KEY,
  title VARCHAR(100) NOT NULL,
  description VARCHAR(300) NOT NULL,
  status VARCHAR(10) NOT NULL,
  label VARCHAR(10) NOT NULL,
  author VARCHAR NOT NULL
);

We can migrate this schema using SQLX. So add the SQLX crate to your dependency:

cargo add sqlx

To connect to a shared Postgres database managed by Shuttle you need to add the crate with features specific to Postgres and SQLX to your dependencies:

cargo add shuttle-shared-db -F shuttle-shared-db/postgres -F shuttle-shared-db/sqlx

Connect to the shared Postgres DB

Let’s edit the main.rs file.

First, we need to bring SQLX into the scope:

use sqlx::{Executor, FromRow, PgPool};

Add the pool field to the AppState struct to share the Postgres pool instance in our whole application:

struct AppState {
    client: Clerk,
    pool: PgPool,
}

Next, pass the #[shuttle_shared_db::Postgres] pool: PgPool argument to your shuttle_runtime::main function and connect to Postgres using SQLX connect pool PgPool.

#[shuttle_runtime::main]
async fn actix_web(
    #[shuttle_secrets::Secrets] secrets: SecretStore,
    #[shuttle_shared_db::Postgres] pool: PgPool,
) -> ShuttleActixWeb<impl FnOnce(&mut ServiceConfig) + Send + Clone + 'static> {
    // DB Pool
    pool.execute(include_str!("../schema.sql"))
        .await
        .map_err(CustomError::new)?;

    // Clerk integration
    let clerk_secret_key = secrets
        .get("CLERK_SECRET_KEY")
        .expect("Clerk Secret key is not set");
    let clerk_config = ClerkConfiguration::new(None, None, Some(clerk_secret_key), None);
    let client = Clerk::new(clerk_config.clone());

    // Create new app state
    let state = web::Data::new(AppState { client, pool });

    let app_config = move |cfg: &mut ServiceConfig| {
        cfg.service(
            web::scope("/api")
                .wrap(ClerkMiddleware::new(clerk_config, None, true))
                .service(get_user)
        )
        .service(actix_files::Files::new("/", "./frontend/dist").index_file("index.html"))
        .app_data(state);
    };

    Ok(app_config.into())
}

The above function call will create the Postgres pool, and then SQLX will migrate the schema we have created before. The Clerk configuration is already defined in the template for us which uses the CLERK_SECRET_KEY we got from the Clerk project we have created earlier.

The Clerk middleware protects all the paths under /api, so that only signed in users can access them.

Try running the application using Shuttle CLI:

cargo shuttle run

🗨️ Make sure docker is running in your local machine because after you run the above command Shuttle will pull the Postgres docker image and start a docker container.

The backend application can now query the Postgres database using SQLX. Let's create some CRUD endpoints for our application.

Issue structs

To define the fields of an issue we will create an Issue struct that is used to define the response and request payload of our Read, Update, and Delete requests, and a NewIssue struct for the Create requests:

#[derive(Serialize, Deserialize, FromRow)]
struct Issue {
    id: i32,
    title: String,
    description: String,
    status: String,
    label: String,
    author: String,
}

#[derive(Serialize, Deserialize, FromRow)]
struct NewIssue {
    title: String,
    description: String,
    status: String,
    label: String,
    author: String,
}

Extract the Clerk JWT claim from a request

In some of the endpoints we need to check for the user's authorization. For that we will look for a user id which can be found in the JWT claim sub property:

async fn get_jwt_claim(service_request: &ServiceRequest, clerk_client: &Clerk) -> Option<ClerkJwt> {
    let claim = clerk_authorize(service_request, clerk_client, true).await;

    match claim {
        Ok(value) => Some(value.1),
        Err(_) => None,
    }
}

CRUD endpoints

Add the create issue endpoint which can query our database to insert a new issue into the table like this:

#[post("/issue")]
async fn add_issue(payload: web::Json<NewIssue>, state: web::Data<AppState>) -> impl Responder {
    let create_query: Result<Issue, sqlx::Error> = sqlx::query_as(
        "INSERT INTO issues (title, description, status, label, author) VALUES ($1, $2, $3, $4, $5) RETURNING *"
    )
    .bind(&payload.title)
    .bind(&payload.description)
    .bind(&payload.status)
    .bind(&payload.label)
    .bind(&payload.author)
    .fetch_one(&state.pool)
    .await;

    if create_query.is_err() {
        return HttpResponse::InternalServerError().json(serde_json::json!({
            "status":"FAILED",
            "message":"Failed to create an issue"
        }));
    }

    HttpResponse::Ok().json(serde_json::json!({
        "status":"SUCCESS",
        "message":"Created the issue successfully"
    }))
}

This endpoint will retrieve all the issues from the database:

#[get("/issues")]
async fn get_issues(state: web::Data<AppState>) -> impl Responder {
    let query: Result<Vec<Issue>, sqlx::Error> = sqlx::query_as("SELECT * FROM issues")
        .fetch_all(&state.pool)
        .await;

    let issues = match query {
        Ok(value) => value,
        Err(e) => {
            return HttpResponse::InternalServerError().json(serde_json::json!({
                "status": "FAILED",
                "message": e.to_string(),
            }));
        }
    };

    HttpResponse::Ok().json(issues)
}

This endpoint function will extract the issue_id slug from the path using the Path extractor from Actix web and query our database where the issue id is equal to the issue_id slug of the path.

#[get("/issue/{issue_id}")]
async fn get_issue(state: web::Data<AppState>, path: web::Path<i32>) -> impl Responder {
    let issue_id = path.into_inner();

    let query: Result<Issue, sqlx::Error> = sqlx::query_as("SELECT * FROM issues WHERE id=$1")
        .bind(issue_id)
        .fetch_one(&state.pool)
        .await;

    let issue = match query {
        Ok(value) => value,
        Err(_) => {
            return HttpResponse::InternalServerError().json(serde_json::json!({
                "status":"FAILED",
                "message":"Something went wrong."
            }));
        }
    };

    HttpResponse::Ok().json(serde_json::json!({
        "status": "SUCCESS",
        "data": issue,
    }))
}

To update an issue by id we will use slug from the path which will contain the issue_id to query our database and update the record if it exists in the database. Before updating the record we can query if the record exists in the database or not:

#[patch("/issue/{issue_id}")]
async fn update_issue(
    payload: web::Json<NewIssue>,
    state: web::Data<AppState>,
    path: web::Path<i32>,
    req: HttpRequest,
) -> impl Responder {
    let issue_id = path.into_inner();

    let service_req = ServiceRequest::from_request(req);

    let claim = get_jwt_claim(&service_req, &state.client).await;

    if claim.is_none() {
        return HttpResponse::Forbidden().json(serde_json::json!({
            "status":"FAILED",
            "message":"Not authorized to update the issue."
        }));
    }

    let query: Result<Issue, sqlx::Error> = sqlx::query_as("SELECT * FROM issues WHERE id=$1")
        .bind(issue_id)
        .fetch_one(&state.pool)
        .await;

    match query {
        Ok(issue) => {
            if issue.author != claim.unwrap().sub {
                return HttpResponse::Unauthorized().json(serde_json::json!({
                    "status":"FAILED",
                    "message":"Not authorized to update the issue."
                }));
            }
        }
        Err(_) => {
            return HttpResponse::NotFound().json(serde_json::json!({
                "status":"FAILED",
                "message":"Issue does not exist."
            }));
        }
    }

    let update_query: Result<Issue, sqlx::Error> = sqlx::query_as(
        "UPDATE issues SET title=$1, description=$2, status=$3, label=$4 WHERE id=$5",
    )
    .bind(&payload.title)
    .bind(&payload.description)
    .bind(&payload.status)
    .bind(&payload.label)
    .bind(issue_id)
    .fetch_one(&state.pool)
    .await;

    if update_query.is_err() {
        return HttpResponse::InternalServerError().json(serde_json::json!({
            "status":"FAILED",
            "message":"Failed to update the issue"
        }));
    }

    HttpResponse::Ok().json(serde_json::json!({
        "status": "SUCCESS",
        "message":"Updated successfully"
    }))
}

This endpoint is for deleting the issue by id from the database:

#[delete("/issue/{issue_id}")]
async fn delete_issue(
    state: web::Data<AppState>,
    path: web::Path<i32>,
    req: HttpRequest,
) -> impl Responder {
    let service_req = ServiceRequest::from_request(req);

    let claim = get_jwt_claim(&service_req, &state.client).await;

    if claim.is_none() {
        return HttpResponse::Forbidden().json(serde_json::json!({
            "status":"FAILED",
            "message":"Not authorized to delete the issue."
        }));
    }

    let issue_id = path.into_inner();

    let query: Result<Issue, sqlx::Error> = sqlx::query_as("SELECT * FROM issues WHERE id=$1")
        .bind(issue_id)
        .fetch_one(&state.pool)
        .await;

    match query {
        Ok(issue) => {
            if issue.author != claim.unwrap().sub {
                return HttpResponse::Unauthorized().json(serde_json::json!({
                    "status":"FAILED",
                    "message":"No authorized to delete the issue."
                }));
            }
        }
        Err(_) => {
            return HttpResponse::NotFound().json(serde_json::json!({
                "status":"FAILED",
                "message":"Issue does not exist."
            }));
        }
    }

    let delete_query: Result<Issue, sqlx::Error> = sqlx::query_as("DELETE FROM issues WHERE id=$1")
        .bind(issue_id)
        .fetch_one(&state.pool)
        .await;

    if delete_query.is_err() {
        return HttpResponse::InternalServerError().json(serde_json::json!({
            "status":"FAILED",
            "message":"Failed to delete the issue"
        }));
    }

    HttpResponse::Ok().json(serde_json::json!({
        "status": "SUCCESS",
        "message":"Deleted successfully"
    }))
}

User endpoints

The template provides a get_user handler function and a UserModel struct.
We will edit the handler function to use the get_jwt_claim function:

#[get("/user/me")]
async fn get_user(state: web::Data<AppState>, req: HttpRequest) -> impl Responder {
    let service_req = ServiceRequest::from_request(req);

    let claim = get_jwt_claim(&service_req, &state.client).await;

    if claim.is_none() {
        return HttpResponse::Forbidden().json(serde_json::json!({
            "status":"FAILED",
            "message":"Not authorized to update the issue."
        }));
    }

    let Ok(user) = User::get_user(&state.client, &claim.unwrap().sub).await else {
        return HttpResponse::InternalServerError().json(serde_json::json!({
            "message": "Unable to retrieve user",
        }));
    };

    HttpResponse::Ok().json(Into::<UserModel>::into(user))
}

We need one last endpoint which can fetch the user details by their user_id. This endpoint will be used to fetch issue author metadata from Clerk:

#[get("/user/{user_id}")]
async fn get_user_by_id(state: web::Data<AppState>, path: web::Path<String>) -> impl Responder {
    let user_id = path.into_inner();
    let Ok(user) = User::get_user(&state.client, &user_id).await else {
        return HttpResponse::InternalServerError().json(serde_json::json!({
            "status": "FAILED",
            "message": "Unable to retrieve all users",
        }));
    };

    HttpResponse::Ok().json(Into::<UserModel>::into(user))
}

Now, let’s add all these endpoints to our main function under the /api scope which is wrapped by Clerk middleware for protecting our endpoint routes and only allowing authenticated users to access these routes. After adding all the endpoints the main function you should have something like this.

Building the frontend and deploying

One important thing to notice is that this piece of code

.service(actix_files::Files::new("/", "./frontend/dist").index_file("index.html"))

is going the serve the static pages of the frontend application located in the ./frontend/dist directory whenever we build our Vite application, and this final output is optimized for production.

Task tracker application using NextJS and SurrealDB

Sourab Pramanik — Sun, 21 Jan 2024 12:34:57 +0000

In this article, I have shared how I have built a simple task-tracking full-stack application using NextJS and SurrealDB.

I wanted to explore SurrealDB and all of its features by building this task-tracking application. In this application, all the tasks can be stored, fetched, updated, and deleted in the SurrealDB. On top of it, I have also used NextAuth to authenticate users and store the user records in SurrealDB.

All these features can be achieved using any database but I specifically used SurrealDB to test their Live Query feature and SurrealQL which is their query language.

SurrealQL is just like SQL with similar syntax but with a better approach to writing query statements which is very straightforward. Especially when writing statements for creating relations between records is very easy and intuitive. They use graph relations to relate the records which is very interesting to me.

The Live Query feature helps get real-time updates whenever a CREATE, UPDATE, or DELETE event is triggered.

Interesting right!!

Setup SurrealDB server

There are many ways you can install and run SurrealDB server based on your operating system so please check the documentation. I am going to use Docker to run the SurrealDB server for this project.

To run SurrealDB server using docker you first need docker to be installed in your machine so check the process of installation.

Run the below command to run the SurrealDB server on port 8000.



docker run --rm --pull always -p 8000:8000 -u root surrealdb/surrealdb:latest start --auth --user root --pass root file:/container-dir/dev.db

This command will run the server which will have a database with the name dev, the username of the admin is root and the password is also root

After the server has successfully started you will see this in your terminal window.

Project setup

Install and configure NextJS application

Run this command to create a new NextJS application



npx create-next-app@latest task-tracker --typescript --tailwind --eslint

Configure your application by selecting these options when prompted



Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
What import alias would you like configured? @/*

And go inside the project



cd task-tracker

Install and configure Shandcn UI

I have used Shadcn UI in this project for creating components. I like Shadcn UI because it offers lots of components with minimal setup, great looking elements and uses Tailwind.

To setup Shadcn UI run the below command



npx shadcn-ui@latest init

Configure Shadcn by selecting these options when prompted



Would you like to use TypeScript (recommended)? yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › yes
Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
Where is your tailwind.config.js located? › tailwind.config.ts
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › yes

Add components from Shadcn

Runs these commands to add all the components I have used in this project



npx shadcn-ui@latest add form button avatar dropdown-menu sonner table badge checkbox command popover separator select radio-group

Install JavaScript SDK for SurrealDB

Run this below command to install JavaScript SDK for SurrealDB



npm install --save surrealdb.js

Install NextAuth

I am using NextAuth to create and authenticate the users with the help of GitHub, Google, and Email providers. It has a wide range of authentication providers and since it is an open-source project I use it for most of my projects.

Run the below command to install NextAuth in your application



npm install next-auth

Install SurrealDB adapter for NextAuth

Adapters are used to connect your databases to NextAuth so that we don’t have to write any queries to store or access user data during authentication process. NextAuth will create a non-existing user in our database and creates a session for the user.

Run the below command to install the adapter



npm install @auth/surrealdb-adapter

Install other required packages

Zod and react-hook-form are used to define schemas, validate user input in the forms, and handle form submissions.



npm install zod react-hook-form

To create the task table I have used [@tanstack/react-table](https://tanstack.com/table/v8) as it has many features like searching, pagination, sorting, and filtering. As it is a Headless table library it handles most of the complex tasks on its own.



npm install @tanstack/react-table

Zustand for global state management and syncing state during hydration



npm install zustand

SWR for client-side data fetching and revalidation. It has a good caching strategy.



npm i swr

Nanoid for generation unique short ID



npm i nanoid

I have used Lucide icons for icons



npm install lucide

Next themes is used for themes switching



npm install next-themes

These are all the dependencies that I have used in this project.

Connect NextJS application to SurrealDB server

Now we need to connect the NextJS application to the SurrealDB server instance running on port 8000.

Create .env.local in the root of your project and add these variables



NEXT_PUBLIC_DB_CONNECTION_URL=http://localhost:8000
NEXT_PUBLIC_NAMESPACE=dev
NEXT_PUBLIC_DB_NAME=dev
NEXT_PUBLIC_DB_USER=root
NEXT_PUBLIC_DB_PASSWORD=root

Make sure to use the same values you used for running the SurrealDB server

Create /app/api/lib/surreal.ts



import { Surreal } from "surrealdb.js";

const connectionString = process.env.NEXT_PUBLIC_DB_CONNECTION_URL as string;
const user = process.env.NEXT_PUBLIC_DB_USER as string;
const pass = process.env.NEXT_PUBLIC_DB_PASSWORD as string;
const ns = process.env.NEXT_PUBLIC_NAMESPACE as string;
const db = process.env.NEXT_PUBLIC_DB_NAME as string;

export const surrealDatabase = new Surreal();

export const surrealConnection = new Promise<Surreal>(async (resolve, reject) => {

    try {
        await surrealDatabase.connect(`${connectionString}/rpc`, {
            ns, db, auth: { user, pass }
        })
        resolve(surrealDatabase)
    } catch (e) {
        reject(e)
    }
});

That’s it the NextJS application is now connected to the SurrealDB server.

Setup NextAuth in your application

Setup GitHub for authentication

Create a new GitHub application for authentication and generate a Client ID and Client Secret by following this documentation.

Setup Google for authentication

Create a new project in the Google Cloud console for authentication and generate a Client ID and Client Secret by following this documentation.

Add Authorized redirect URIs
For production: https://{YOUR_DOMAIN}/api/auth/callback/google

For development: http://localhost:3000/api/auth/callback/google

Add the credential to .env.local



NEXTAUTH_SECRET=gsfasd4234523dffsds21q1
NEXTAUTH_URL=http://localhost:3000

NEXT_PUBLIC_BASE_URL=http://localhost:3000

GOOGLE_CLIENT_ID=17855432281717-cor3fulo8g9gxxxxxxxxxxxvk775h.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-YmfXBxxxxxxxxxxuctcpx0uoo

GITHUB_CLIENT_ID=6438xxxxxxxa0b
GITHUB_CLIENT_SECRET=d09d35bf86fcxxxxxxxxxxx498dc62690ad

Create an authentication route handler

Create a new route handler which will be used by NextAuth to create and authenticate users. I have used the JWT strategy to validate user sessions

Add GitHub and Google providers by using the credentials generated earlier and also add an Email provider to let the users create and access their account using only their email address.

Usually when using Email provider we have to send a verification link to the users email address to verify the user if the user does not exists in our database. But in this case we will print the verification link in the terminal window to keep the process short.

I will create another article later on how to setup email provider to send verification links to user’s email address.

Create /app/api/auth/[…nextauth]/route.ts



import NextAuth, { AuthOptions, User } from "next-auth"

import GoogleProvider from "next-auth/providers/google";
import GitHubProvider from "next-auth/providers/github";
import EmailProvider from "next-auth/providers/email";
import { SurrealDBAdapter } from "@auth/surrealdb-adapter"
import { surrealConnection } from "../../lib/surreal";

export const authOptions: AuthOptions = {
    pages: {
        error: "/auth",
        signIn: '/auth',
    },
    providers: [
        GitHubProvider({
            clientId: process.env.GITHUB_CLIENT_ID as string,
            clientSecret: process.env.GITHUB_CLIENT_SECRET as string
        }),
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID as string,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
        }),
        EmailProvider({
            async sendVerificationRequest({ url }) {
                console.log(url);
            },
        }),
    ],
    adapter: SurrealDBAdapter(surrealConnection),
    session: { strategy: "jwt" },
    cookies: {
        sessionToken: {
            name: `next-auth.session-token`,
            options: {
                httpOnly: true,
                sameSite: "lax",
                path: "/",
                domain: undefined,
                secure: false,
            },
        },
    },
    callbacks: {
        jwt: async ({ token, user }) => {
            if (!token.email) {
                return {};
            }
            if (user) {
                token.user = user;
            }
            return token;
        },
        session: async ({ session, token }) => {
            (session.user as User) = {
                id: token.sub,
                // @ts-ignore
                ...(token || session).user,
            };
            // console.log("session", session);
            return session;
        },
    },
};

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

You can see that I have used an option adapter and provided SurrealDB adapter which takes the connection configuration we created earlier so that now NextAuth can create, read, update, and delete users and manage their sessions.

Cool right!!

Create /types/nextauth.d.ts to update the Session interface used by NextAuth



import NextAuth from "next-auth"

declare module "next-auth" {
    interface Session {
        user: {
            id: string
            email: string,
            name: string,
            image: string,
        }
    }
}

Create authentication form

Create /components/form/user-auth-form.tsx



"use client";

import * as React from "react";

import { signIn } from "next-auth/react";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import * as z from "zod";

import { cn } from "@/lib/utils";
import { Github, Loader } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import {
  FormField,
  FormItem,
  FormControl,
  FormMessage,
  Form,
} from "../ui/form";

interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {
  next: any;
}

const formSchema = z.object({
  email: z.string().min(2).max(50).email("Invalid email address"),
});

export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
  const [isLoginWithEmail, setIsLoginWithEmail] =
    React.useState<boolean>(false);
  const [isLoginWithGithub, setIsLoginWithGithub] =
    React.useState<boolean>(false);
  const [isLoginWithGoogle, setIsLoginWithGoogle] =
    React.useState<boolean>(false);

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
    },
  });

  function onSubmit(values: z.infer<typeof formSchema>) {
    setIsLoginWithEmail(true);
    signIn("email", {
      email: values.email,
      redirect: false,
      ...(props.next && props.next.length > 0
        ? { callbackUrl: props.next }
        : {}),
    }).then((res) => {
      if (res?.ok && !res?.error) {
        toast.success("Check your terminal");
      } else {
        toast.error("Something went wrong");
      }
      setIsLoginWithEmail(false);
    });
  }

  function onLoginWithGoogle() {
    setIsLoginWithGoogle(true);
    signIn("google", {
      redirect: false,
      ...(props.next && props.next.length > 0
        ? { callbackUrl: props.next }
        : {}),
    })
      .then(() => {
        toast.success("Redirecting...");
      })
      .catch(() => {
        toast.error("Something went wrong.");
      })
      .finally(() => {
        setIsLoginWithGoogle(false);
      });
  }

  function onLoginWithGithub() {
    setIsLoginWithGithub(true);
    signIn("github", {
      redirect: false,
      ...(props.next && props.next.length > 0
        ? { callbackUrl: props.next }
        : {}),
    })
      .then(() => {
        toast.success("Redirecting...");
      })
      .catch(() => {
        toast.error("Something went wrong.");
      })
      .finally(() => {
        setIsLoginWithGoogle(false);
      });
  }

  return (
    <div className={cn("grid gap-6", className)} {...props}>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input placeholder="Enter your email" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button disabled={isLoginWithEmail} className="w-full">
            {isLoginWithEmail && (
              <Loader className="mr-2 h-4 w-4 animate-spin" />
            )}
            Sign In with Email
          </Button>
        </form>
      </Form>
      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <span className="w-full border-t" />
        </div>
        <div className="relative flex justify-center text-xs uppercase">
          <span className="bg-background px-2 text-muted-foreground">
            Or continue with
          </span>
        </div>
      </div>
      <Button
        onClick={() => onLoginWithGoogle()}
        variant="outline"
        type="button"
        disabled={isLoginWithGoogle}
      >
        {isLoginWithGoogle ? (
          <Loader className="mr-2 h-4 w-4 animate-spin" />
        ) : (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 488 512"
            fill="currentColor"
            className="mr-2 h-4 w-4"
          >
            <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
          </svg>
        )}{" "}
        Google
      </Button>
      <Button
        onClick={() => onLoginWithGithub()}
        variant="outline"
        type="button"
        disabled={isLoginWithGithub}
      >
        {isLoginWithGithub ? (
          <Loader className="mr-2 h-4 w-4 animate-spin" />
        ) : (
          <Github className="mr-2 h-4 w-4" />
        )}{" "}
        GitHub
      </Button>
    </div>
  );
}

Create a new route for the authentication page /app/auth/page.tsx



import { Metadata } from "next";

import { UserAuthForm } from "@/components/forms/user-auth-form";
import { useParams } from "next/navigation";

export const metadata: Metadata = {
  title: "Authentication",
  description: "Authentication forms built using the components.",
};

export default function AuthenticationPage() {
  const { next } = useParams as { next?: string };

  return (
    <>
      <div className="container relative h-screen flex items-center justify-center">
        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
          <div className="flex flex-col space-y-2 text-center">
            <h1 className="text-2xl font-semibold tracking-tight">
              Get Started
            </h1>
            <p className="text-sm text-muted-foreground">
              Enter your email below to get started
            </p>
          </div>
          <UserAuthForm next={next} />
        </div>
      </div>
    </>
  );
}

Protecting routes using middleware

Middleware is used to run any code before any requests or responses can be completed, make modifications to their headers, rewrite the response body, and redirect to another route. In this project I have created a middleware to check if a user has a valid session then they are allowed to access protected routes like the task board page, create and edit task pages, or else they will be redirected to the login page.

Create /lib/app-middleware.ts



import { NextRequest, NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

export default async function AppMiddleware(req: NextRequest) {
    const path = req.nextUrl.pathname;
    const token = (await getToken({
        req,
        secret: process.env.NEXTAUTH_SECRET,
    })) as {
        email?: string;
        user?: {
            createdAt?: string;
        };
    };

    if (!token?.email && path !== "/auth") {
        return NextResponse.redirect(
            new URL(
                `/auth${path !== "/" ? `?next=${encodeURIComponent(path)}` : ""}`,
                req.url,
            ),
        );

        // if there's a token
    } else if (token?.email) {
        if (
            token?.user?.createdAt &&
            new Date(token?.user?.createdAt).getTime() > Date.now() - 10000 &&
            path !== "/"
        ) {
            return NextResponse.redirect(new URL("/", req.url));

        } else if (path === "/auth") {
            return NextResponse.redirect(new URL("/", req.url));
        }
    }
}

Create /middleware.ts and import AppMiddleware



import { NextRequest } from "next/server";
import AppMiddleware from "./lib/app-middleware";

export const config = {
    matcher: [
        "/((?!api/|_next/|_proxy/|_auth/|_static|_vercel|favicon.ico|sitemap.xml).*)",
    ],
};

export default async function middleware(req: NextRequest) {

    return AppMiddleware(req);
}

Use session provider to get user session on the client side

Create /lib/provider/nextAuthSessionProvider.ts



"use client";
import React from "react";
import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

const NextAuthSessionProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  return <SessionProvider>{children}</SessionProvider>;
};
export default NextAuthSessionProvider;

Update /app/layout.tsx to use session provider wrapper



import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

import NextAuthSessionProvider from "@/lib/provider/nextAuthSessionProvider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <NextAuthSessionProvider>{children}</NextAuthSessionProvider>
      </body>
    </html>
  );
}

Create logout and theme toggle components

Logout component using sign-out function from NextAuth

Create /components/profile.tsx



"use client";

import { signOut, useSession } from "next-auth/react";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import { Button } from "./ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "./ui/dropdown-menu";

export default function Profile() {
  const { data: session, status } = useSession();
  return (
    status === "authenticated" && (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="relative h-8 w-8 rounded-full">
            <Avatar className="h-8 w-8">
              <AvatarImage
                src={session?.user?.image ?? ""}
                alt={session?.user?.name ?? ""}
              />
              <AvatarFallback>
                {session?.user?.name
                  ? session?.user?.name.slice(0, 2).toUpperCase()
                  : ""}
              </AvatarFallback>
            </Avatar>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56" align="end" forceMount>
          <DropdownMenuLabel className="font-normal">
            <div className="flex flex-col space-y-1">
              <p className="text-sm font-medium leading-none">
                {session?.user?.name}
              </p>
              <p className="text-xs leading-none text-muted-foreground">
                {session?.user?.email}
              </p>
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            onClick={() =>
              signOut({
                callbackUrl: `${window.location.origin}`,
              })
            }
          >
            Log out
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    )
  );
}

Create theme toggle (optional)

Use next-theme to create a theme provider and wrap the root layout with it and then create a new toggle component to switch themes

Create /lib/provider/theme-provider.tsx



"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

Create theme toggle /components/theme-toggle.tsx



"use client";

import * as React from "react";
import { useTheme } from "next-themes";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./ui/dropdown-menu";
import { MoonIcon, SunIcon } from "lucide-react";

export default function ThemeToggle() {
  const { setTheme } = useTheme();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Add theming and logout feature to your application

Update /app/layout.tsx to use ThemeProvider and theme-toggle component



import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

import { ThemeProvider } from "@/lib/provider/theme-provider";
import ThemeToggle from "@/components/theme-toggle";
import NextAuthSessionProvider from "@/lib/provider/nextAuthSessionProvider";
import Profile from "@/components/profile";
import { Toaster } from "@/components/ui/sonner";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <NextAuthSessionProvider>
            <div className="fixed top-8 right-8 z-20 flex items-center gap-5">
              <Profile />
              <ThemeToggle />
            </div>
            <main className="bg-background text-foreground">{children}</main>
            <Toaster />
          </NextAuthSessionProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

To test the authentication is working, start the NextJS application using npm run dev command. It should run at port 3000 and open the URL in your browser.

Add schemas for the table in the database and keep our application type safe

Create /lib/schema.ts



import { z } from "zod"

export function record<Table extends string = string>(table?: Table) {
    return z.custom<`${Table}:${string}`>(
        (val) =>
            typeof val === 'string' && table
                ? val.startsWith(table + ':')
                : true,
        {
            message: ['Must be a record', table && `Table must be: "${table}"`]
                .filter((a) => a)
                .join('; '),
        }
    );
}

export const taskSchema = z.object({
    id: z.string().optional(),
    title: z.string().min(2, "Add a descriptive title"),
    description: z.string().optional(),
    status: z.enum(["todo", "inprogress", "canceled", "done"], {
        required_error: "You need to select a status.",
    }),
    label: z.enum(["bug", "feature", "documentation"], {
        required_error: "You need to select a label.",
    }),
    priority: z.enum(["high", "low", "moderate"], {
        required_error: "You need to set the priority.",
    }),
    author: record('user'),
})

export const userSchema = z.object({
    id: z.string().readonly(),
    name: z.string().optional().readonly(),
    email: z.string().readonly(),
    image: z.string().optional().readonly(),
})

export type Task = z.infer<typeof taskSchema>
export type User = z.infer<typeof userSchema>

To set the author from the user table in the database for each task I have used a record() which creates a custom type using Zod and this was taken from SurrealDB’s example repo in GitHub

Create task request route handlers

Create /app/api/task/route.ts to create a new task and fetch all tasks



import { Task } from "@/lib/schema";
import { surrealDatabase } from "../lib/surreal";
import { nanoid } from "nanoid";
import { NextResponse } from "next/server";
import { getServerSession } from "next-auth";
import { authOptions } from "../auth/[...nextauth]/route";

// Create new task
export async function POST(request: Request) {
    const payload = await request.json();
    const taskId = nanoid(5)
    const session = await getServerSession(authOptions);

    const response = await surrealDatabase.query<[Task]>(
        `CREATE task:${taskId} SET title='${payload.title}', description='${payload.description}', status='${payload.status}', label='${payload.label}', priority='${payload.priority}', author='user:${session?.user.id}';`
    );

    return NextResponse.json({
        success: true,
        data: response[0],
    });
}

// Fetch all tasks
export async function GET() {
    const response = await surrealDatabase.query<Task[]>(
        "SELECT * FROM type::table($tb);",
        {
            tb: "task",
        }
    );

    return NextResponse.json({
        success: true,
        data: response[0].result,
    });
}

Create /app/api/task/[id]/route.ts to fetch, update, and delete tasks by the ID



import { Task } from "@/lib/schema";
import { surrealDatabase } from "../../lib/surreal";
import { NextResponse } from "next/server";

// Fetch task by id
export async function GET(_: Request, { params }: { params: { id: string } }) {

    const response = await surrealDatabase.select<Task>(
        'task:' + params.id
    );

    return NextResponse.json({
        success: true,
        data: response[0],
    });
}

// Update task by id
export async function PATCH(request: Request, { params }: { params: { id: string } }) {
    const payload = await request.json();

    const response = await surrealDatabase.merge<Task>(
        'task:' + params.id, payload
    );

    return NextResponse.json({
        success: true,
        data: response[0],
    });
}

// Delete task by id
export async function DELETE(_: Request, { params }: { params: { id: string } }) {
    const response = await surrealDatabase.delete<Task>(
        'task:' + params.id
    );

    return NextResponse.json({
        success: true,
        data: response[0],
    });
}

Create task API handlers

Create /lib/task/handler.ts to consume all the APIs created earlier and abstract away the internal working.



import { Task } from "../schema";

const endpoint = process.env.NEXT_PUBLIC_BASE_URL + '/api/task'
// Create a new task
export const createTask = async (payload: Task) => {
    const res: {
        success: boolean;
        data?: Task;
    } = await (
        await fetch(endpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload),
        })
    ).json();

    return res;
}

// Fetch all tasks
export const getAllTasks = async () => {
    const res: {
        success: boolean;
        data?: Task[];
    } = await (
        await fetch(endpoint)
    ).json();

    return res;
};

// Fetch task by id
export const getTaskById = async (id: string) => {
    const res: {
        success: boolean;
        data?: Task;
    } = await (
        await fetch(endpoint + "/" + id)
    ).json();

    return res;
};

// Update task by id
export const updateTaskById = async (id: string, payload: Task) => {
    console.log(id);

    const res: {
        success: boolean;
        data?: Task;
    } = await (
        await fetch(endpoint + "/" + id, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload),
        })
    ).json();

    return res;
};

// Delete task by id
export const deleteTaskById = async (id: string) => {
    await fetch(endpoint + "/" + id, { method: "DELETE" })
};

Create user request route handler

Create /app/api/user/[id]/route.ts to fetch user by the ID



import { User } from "@/lib/schema";
import { surrealDatabase } from "../../lib/surreal";
import { NextResponse } from "next/server";

export async function GET(_: Request, { params }: { params: { id: string } }) {

    const response = await surrealDatabase.select<User>(
        params.id
    );

    return NextResponse.json({
        success: true,
        data: response[0],
    });
}

Create author API handler and hook

Create /lib/author/handler.ts this uses the user API created before.



import { User } from "../schema";

const endpoint = process.env.NEXT_PUBLIC_BASE_URL + '/api/user'

export const getAuthorById = async (id: string) => {
    const res: {
        success: boolean;
        data?: User;
    } = await (
        await fetch(endpoint + "/" + id)
    ).json();

    return res;
};

Create /lib/author/hook.ts this uses the getAuthorById handler function as a fetcher in the useSWR hook. So that we can fetch user data on the client side and also cache the data.



import useSWR from "swr";
import { getAuthorById } from "./handler";

export const useAuthor = (id: string) => {
    return useSWR(`/api/user/${id}`, async () => await getAuthorById(
        id
    ));
};

Create a Zustand store to sync server and client-side

I have created a hook to read the state from the server on the client before hydration and synchronization between the server/client.

Create /lib/store/zustand.ts



import { StoreApi, UseBoundStore, create } from 'zustand'
import { useMemo, useRef } from 'react';

export const useStoreSync = <T>(
    useStore: UseBoundStore<StoreApi<T>>,
    state: T
): UseBoundStore<StoreApi<T>> => {
    const unsynced = useRef(true);
    const useServerStore = useMemo(() => create<T>(() => state), []);

    if (unsynced.current) {
        useStore.setState(state);
        unsynced.current = false;
    }
    return window !== undefined ? useStore : useServerStore;
};

Setup SurrealDB Live Query using Zustand

I have created a Zustand store for tasks. In this store, the state will be updated whenever the task is CREATED, UPDATED, or DELETED. live function from SurrealDB SDK is used for listening to these events and for each event different state setters are called to update the state instantly.

Create /lib/store/task.ts



import { surrealDatabase } from '@/app/api/lib/surreal';
import { Task } from '../schema';
import { create } from 'zustand';

type TaskStore = {
    tasks: Task[],
    appendTask?: (newTasks: Task) => void,
    removeTask?: (newTask: Task) => void,
    updateTask?: (newTask: Task) => void,
}

export const useTaskStore = create<TaskStore>((set) => {
    const store = {
        tasks: [],
        appendTask: (newTask: Task) => set((state) => ({ tasks: [...state.tasks, newTask] })),
        removeTask: (removedTask: Task) => set((state) => ({
            tasks: state.tasks.reduce((arr: Task[], task) => {
                if (task.id !== removedTask.id) {
                    arr.push(task)
                }
                return arr
            }, [])
        })),
        updateTask: (modifiedTask: Task) => set((state) => ({
            tasks: state.tasks.reduce((arr: Task[], task) => {
                if (task.id === modifiedTask.id) {
                    arr.push(modifiedTask)
                } else {
                    arr.push(task)
                }
                return arr
            }, [])
        })),
    }

    surrealDatabase.live<Task>('task', ({ action, result }) => {
        switch (action) {
            case 'CREATE':
                store.appendTask(result);
                break;
            case 'DELETE':
                store.removeTask(result);
                break;
            case 'UPDATE':
                store.updateTask(result);
                break;

        }
    });
    return store;
});

Create a task form and pages

Create /components/forms/task-form that can be reused in both create task and edit task page



"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import { Button } from "../ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "../ui/form";
import { Input } from "../ui/input";
import { Textarea } from "../ui/textarea";
import { toast } from "sonner";
import { Task, record, taskSchema } from "@/lib/schema";
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
import { useState } from "react";
import { Loader, SquarePen } from "lucide-react";
import { createTask, updateTaskById } from "@/lib/task/handler";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";

interface TaskFormProps {
  editRecord?: Task;
}

export function TaskForm(props: TaskFormProps) {
  const { editRecord } = props;

  const form = useForm<Task>({
    resolver: zodResolver(taskSchema),
    defaultValues: editRecord,
    mode: "onChange",
  });
  const [isSubmitting, setSubmitting] = useState<boolean>(false);
  const router = useRouter();
  const { data: session } = useSession();

  async function onSubmit(data: Task) {
    setSubmitting(true);
    try {
      if (editRecord?.id) {
        await updateTaskById(editRecord.id.replace("task:", ""), data);
        toast.success("Task updated successfully!");
      } else {
        await createTask({
          ...data,
          author: record("user").parse("user:" + session?.user.id),
        });
        toast.success("Task created successfully!");
      }
    } catch (error) {
      console.log(error);
      toast.success("Something went wrong. Try again");
    } finally {
      setSubmitting(false);
      router.push("/");
    }
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="title"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Title</FormLabel>
              <FormControl>
                <Input placeholder="Enter title" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="description"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Description</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Enter a brief description about the task"
                  className="resize-none"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="status"
          render={({ field }) => (
            <FormItem className="space-y-3">
              <FormLabel>Select a status</FormLabel>
              <FormControl>
                <RadioGroup
                  onValueChange={field.onChange}
                  defaultValue={field.value}
                  className="flex flex-col space-y-1"
                >
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="todo" />
                    </FormControl>
                    <FormLabel className="font-normal">Todo</FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="inprogress" />
                    </FormControl>
                    <FormLabel className="font-normal">Inprogress</FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="done" />
                    </FormControl>
                    <FormLabel className="font-normal">Done</FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="canceled" />
                    </FormControl>
                    <FormLabel className="font-normal">Cancel</FormLabel>
                  </FormItem>
                </RadioGroup>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="label"
          render={({ field }) => (
            <FormItem className="space-y-3">
              <FormLabel>Select a label</FormLabel>
              <FormControl>
                <RadioGroup
                  onValueChange={field.onChange}
                  defaultValue={field.value}
                  className="flex flex-col space-y-1"
                >
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="bug" />
                    </FormControl>
                    <FormLabel className="font-normal">Bug</FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="feature" />
                    </FormControl>
                    <FormLabel className="font-normal">Feature</FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="documentation" />
                    </FormControl>
                    <FormLabel className="font-normal">Documentation</FormLabel>
                  </FormItem>
                </RadioGroup>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="priority"
          render={({ field }) => (
            <FormItem className="space-y-3">
              <FormLabel>Set priority for the task</FormLabel>
              <FormControl>
                <RadioGroup
                  onValueChange={field.onChange}
                  defaultValue={field.value}
                  className="flex flex-col space-y-1"
                >
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="high" />
                    </FormControl>
                    <FormLabel className="font-normal">High</FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="moderate" />
                    </FormControl>
                    <FormLabel className="font-normal">Moderate</FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="low" />
                    </FormControl>
                    <FormLabel className="font-normal">Low</FormLabel>
                  </FormItem>
                </RadioGroup>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit" disabled={isSubmitting} className="float-end">
          {isSubmitting ? (
            <Loader className="mr-2 h-4 w-4 animate-spin" />
          ) : (
            <SquarePen className="mr-2 h-4 w-4" />
          )}
          {editRecord?.id ? "Update task" : "Create task"}
        </Button>
      </form>
    </Form>
  );
}

Create /components/nav-back.tsx



"use client";

import { ChevronLeft, Home } from "lucide-react";
import { useRouter } from "next/navigation";
import React from "react";
import { Button } from "./ui/button";

const NavBack = () => {
  const router = useRouter();
  return (
    <div className="w-full flex items-center justify-start -ml-5 my-3">
      <Button onClick={() => router.back()} variant={"ghost"}>
        <ChevronLeft className="h-4 w-4" />
      </Button>
      <Button onClick={() => router.push("/")} variant={"ghost"}>
        <Home className="h-4 w-4" />
      </Button>
    </div>
  );
};

export default NavBack;

Create /app/task/new/page.tsx



import { TaskForm } from "@/components/forms/task-form";
import { Separator } from "@/components/ui/separator";

export default function Page() {
  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium">Create Task</h3>
        <p className="text-sm text-muted-foreground">
          Enter all the details below.
        </p>
      </div>
      <Separator />
      <TaskForm />
    </div>
  );
}

Create /app/task/edit/[id]/page.tsx



import { TaskForm } from "@/components/forms/task-form";
import { Separator } from "@/components/ui/separator";
import { getTaskById } from "@/lib/task/handler";
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";
import React from "react";

export default async function EditTaskPage({
  params,
}: {
  params: { id: string };
}) {
  const { data } = await getTaskById(params.id);
  const session = await getServerSession();

  if (!data || session?.user.id !== data.author.replace("user:", "")) {
    redirect("/");
  }

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-medium">Edit Task:{params.id}</h3>
        <p className="text-sm text-muted-foreground">Edit the details below.</p>
      </div>
      <Separator />
      <TaskForm editRecord={data} />
    </div>
  );
}

Here I have added extra check to allow authors to edit their created own tasks.

Build the table

Create table components

Create column header /components/task-table/column-header.tsx



import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react";
import { Column } from "@tanstack/react-table";

import { cn } from "@/lib/utils";
import { Button } from "../ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";

interface DataTableColumnHeaderProps<TData, TValue>
  extends React.HTMLAttributes<HTMLDivElement> {
  column: Column<TData, TValue>;
  title: string;
}

export function DataTableColumnHeader<TData, TValue>({
  column,
  title,
  className,
}: DataTableColumnHeaderProps<TData, TValue>) {
  if (!column.getCanSort()) {
    return <div className={cn(className)}>{title}</div>;
  }

  return (
    <div className={cn("flex items-center space-x-2", className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className="-ml-3 h-8 data-[state=open]:bg-accent"
          >
            <span>{title}</span>
            {column.getIsSorted() === "desc" ? (
              <ArrowDown className="ml-2 h-4 w-4" />
            ) : column.getIsSorted() === "asc" ? (
              <ArrowUp className="ml-2 h-4 w-4" />
            ) : (
              <ChevronsUpDown className="ml-2 h-4 w-4" />
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
            <ArrowUp className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
            Asc
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
            <ArrowDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
            Desc
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
            <EyeOff className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
            Hide
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

Create columns /components/task-table/columns.tsx to define the structure and content of each column



"use client";

import { ColumnDef } from "@tanstack/react-table";
import { Badge } from "../ui/badge";
import { labels, priorities, statuses } from "./data";
import { DataTableColumnHeader } from "./column-header";
import { DataTableRowActions } from "./row-actions";
import { Task } from "@/lib/schema";
import { Avatar, AvatarImage } from "../ui/avatar";
import { useAuthor } from "@/lib/author/hook";
import { Loader } from "lucide-react";

export const columns: ColumnDef<Task>[] = [
  {
    accessorKey: "author",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Author" />
    ),
    cell: ({ row }) => {
      const userId = row.original.author as string;
      const { data, isLoading } = useAuthor(userId);

      return (
        <div className="w-[30px]">
          {isLoading ? (
            <Loader className="w-5 h-5 animate-spin" />
          ) : (
            <>
              {data && (
                <Avatar className="h-8 w-8">
                  <AvatarImage
                    src={
                      data.data?.image ?? "https://avatar.vercel.sh/" + userId
                    }
                    alt={userId + " image"}
                  />
                </Avatar>
              )}
            </>
          )}
        </div>
      );
    },
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "id",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Task" />
    ),
    cell: ({ row }) => <div className="w-[80px]">{row.getValue("id")}</div>,
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "title",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Title" />
    ),
    cell: ({ row }) => {
      const label = labels.find((label) => label.value === row.original.label);

      return (
        <div className="flex space-x-2 w-[100px] lg:w-[500px]">
          {label && <Badge variant="outline">{label.label}</Badge>}
          <span className="max-w-[300px] truncate font-medium">
            {row.getValue("title")}
          </span>
        </div>
      );
    },
  },
  {
    accessorKey: "status",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    cell: ({ row }) => {
      const status = statuses.find(
        (status) => status.value === row.getValue("status")
      );

      if (!status) {
        return null;
      }

      return (
        <div className="flex w-[100px] items-center">
          {status.icon && (
            <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />
          )}
          <span>{status.label}</span>
        </div>
      );
    },
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id));
    },
  },
  {
    accessorKey: "priority",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Priority" />
    ),
    cell: ({ row }) => {
      const priority = priorities.find(
        (priority) => priority.value === row.getValue("priority")
      );

      if (!priority) {
        return null;
      }

      return (
        <div className="flex items-center">
          {priority.icon && (
            <priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
          )}
          <span>{priority.label}</span>
        </div>
      );
    },
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id));
    },
  },
  {
    id: "actions",
    cell: ({ row }) => <DataTableRowActions row={row} />,
  },
];

Create filter data /components/task-table/data.ts



import {
  ArrowDownIcon,
  ArrowRightIcon,
  ArrowUpIcon,
  CheckCircle2,
  CircleIcon,
  XCircle,
  Timer,
} from "lucide-react";

export const labels = [
  {
    value: "bug",
    label: "Bug",
  },
  {
    value: "feature",
    label: "Feature",
  },
  {
    value: "documentation",
    label: "Documentation",
  },
];

export const statuses = [
  {
    value: "todo",
    label: "Todo",
    icon: CircleIcon,
  },
  {
    value: "in progress",
    label: "In Progress",
    icon: Timer,
  },
  {
    value: "done",
    label: "Done",
    icon: CheckCircle2,
  },
  {
    value: "canceled",
    label: "Canceled",
    icon: XCircle,
  },
];

export const priorities = [
  {
    label: "Low",
    value: "low",
    icon: ArrowDownIcon,
  },
  {
    label: "Medium",
    value: "medium",
    icon: ArrowRightIcon,
  },
  {
    label: "High",
    value: "high",
    icon: ArrowUpIcon,
  },
];

Create filter component /components/task-table/faceted-filter.tsx to filter based on the task label, status, and priority



import * as React from "react";
import { CheckIcon, PlusCircle } from "lucide-react";
import { Column } from "@tanstack/react-table";

import { cn } from "@/lib/utils";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "../ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Separator } from "../ui/separator";

interface DataTableFacetedFilterProps<TData, TValue> {
  column?: Column<TData, TValue>;
  title?: string;
  options: {
    label: string;
    value: string;
    icon?: React.ComponentType<{ className?: string }>;
  }[];
}

export function DataTableFacetedFilter<TData, TValue>({
  column,
  title,
  options,
}: DataTableFacetedFilterProps<TData, TValue>) {
  const facets = column?.getFacetedUniqueValues();
  const selectedValues = new Set(column?.getFilterValue() as string[]);

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="sm" className="h-8 border-dashed">
          <PlusCircle className="mr-2 h-4 w-4" />
          {title}
          {selectedValues?.size > 0 && (
            <>
              <Separator orientation="vertical" className="mx-2 h-4" />
              <Badge
                variant="secondary"
                className="rounded-sm px-1 font-normal lg:hidden"
              >
                {selectedValues.size}
              </Badge>
              <div className="hidden space-x-1 lg:flex">
                {selectedValues.size > 2 ? (
                  <Badge
                    variant="secondary"
                    className="rounded-sm px-1 font-normal"
                  >
                    {selectedValues.size} selected
                  </Badge>
                ) : (
                  options
                    .filter((option) => selectedValues.has(option.value))
                    .map((option) => (
                      <Badge
                        variant="secondary"
                        key={option.value}
                        className="rounded-sm px-1 font-normal"
                      >
                        {option.label}
                      </Badge>
                    ))
                )}
              </div>
            </>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0" align="start">
        <Command>
          <CommandInput placeholder={title} />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup>
              {options.map((option) => {
                const isSelected = selectedValues.has(option.value);
                return (
                  <CommandItem
                    key={option.value}
                    onSelect={() => {
                      if (isSelected) {
                        selectedValues.delete(option.value);
                      } else {
                        selectedValues.add(option.value);
                      }
                      const filterValues = Array.from(selectedValues);
                      column?.setFilterValue(
                        filterValues.length ? filterValues : undefined
                      );
                    }}
                  >
                    <div
                      className={cn(
                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                        isSelected
                          ? "bg-primary text-primary-foreground"
                          : "opacity-50 [&_svg]:invisible"
                      )}
                    >
                      <CheckIcon className={cn("h-4 w-4")} />
                    </div>
                    {option.icon && (
                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
                    )}
                    <span>{option.label}</span>
                    {facets?.get(option.value) && (
                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
                        {facets.get(option.value)}
                      </span>
                    )}
                  </CommandItem>
                );
              })}
            </CommandGroup>
            {selectedValues.size > 0 && (
              <>
                <CommandSeparator />
                <CommandGroup>
                  <CommandItem
                    onSelect={() => column?.setFilterValue(undefined)}
                    className="justify-center text-center"
                  >
                    Clear filters
                  </CommandItem>
                </CommandGroup>
              </>
            )}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

Create row action component /components/task-table/row-actions.tsx to edit, delete and copy tasks



"use client";

import { CopyPlusIcon, EditIcon, Loader, Trash2 } from "lucide-react";
import { Row } from "@tanstack/react-table";

import { Button } from "../ui/button";

import { Task, record, taskSchema } from "@/lib/schema";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { createTask, deleteTaskById } from "@/lib/task/handler";
import { toast } from "sonner";
import { useSession } from "next-auth/react";

interface DataTableRowActionsProps<TData> {
  row: Row<TData>;
}

export function DataTableRowActions<TData>({
  row,
}: DataTableRowActionsProps<TData>) {
  const task: Task = taskSchema.parse(row.original);
  const router = useRouter();
  const [isCopying, setCopying] = useState<boolean>(false);
  const [isDeleting, setDeleting] = useState<boolean>(false);
  const { data: session } = useSession();

  const isAuthor = task.author.replace("user:", "") === session?.user.id;

  const handleEditClick = () => {
    task.id && router.push("/task/edit/" + task.id.replace("task:", ""));
  };

  const handleCreateCopy = async () => {
    setCopying(true);
    try {
      await createTask({
        title: task.title,
        description: task.description,
        status: task.status,
        label: task.label,
        priority: task.priority,
        author: record("user").parse("user:" + session?.user.id),
      });
      toast.success("Created a copy successfully!");
    } catch (error) {
      console.log(error);
      toast.success("Failed to copy!");
    } finally {
      setCopying(false);
    }
  };

  const handleDelete = async () => {
    setDeleting(true);
    if (task.id) {
      try {
        await deleteTaskById(task.id.replace("task:", ""));
        toast.success("Successfully deleted!");
      } catch (error) {
        console.log(error);
        toast.success("Failed to delete!");
      } finally {
        setDeleting(false);
      }
    } else {
      toast.success("Trouble deleting!");
    }
  };

  return (
    <div className="flex items-center">
      {isAuthor && (
        <Button variant={"ghost"} onClick={handleEditClick}>
          <EditIcon className="w-4 h-4" />
        </Button>
      )}
      {isAuthor && (
        <Button className="relative min-w-14" variant={"ghost"}>
          {isDeleting ? (
            <Loader className="w-4 h-4 absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 animate-spin" />
          ) : (
            <Trash2 className="w-4 h-4" onClick={handleDelete} />
          )}
        </Button>
      )}

      <Button className="relative min-w-14" variant={"ghost"}>
        {isCopying ? (
          <Loader className="w-4 h-4 absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 animate-spin" />
        ) : (
          <CopyPlusIcon className="w-4 h-4" onClick={handleCreateCopy} />
        )}
      </Button>
    </div>
  );
}

Create pagination component /components/task-table/table-pagination.tsx



import {
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronsLeft,
  ChevronsRight,
} from "lucide-react";
import { Table } from "@tanstack/react-table";

import { Button } from "../ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";

interface DataTablePaginationProps<TData> {
  table: Table<TData>;
}

export function DataTablePagination<TData>({
  table,
}: DataTablePaginationProps<TData>) {
  return (
    <div className="flex items-center justify-between px-2">
      <div className="flex-1 text-sm text-muted-foreground">
        {table.getFilteredSelectedRowModel().rows.length} of{" "}
        {table.getFilteredRowModel().rows.length} row(s) selected.
      </div>
      <div className="flex items-center space-x-6 lg:space-x-8">
        <div className="flex items-center space-x-2">
          <p className="text-sm font-medium">Rows per page</p>
          <Select
            value={`${table.getState().pagination.pageSize}`}
            onValueChange={(value) => {
              table.setPageSize(Number(value));
            }}
          >
            <SelectTrigger className="h-8 w-[70px]">
              <SelectValue placeholder={table.getState().pagination.pageSize} />
            </SelectTrigger>
            <SelectContent side="top">
              {[10, 20, 30, 40, 50].map((pageSize) => (
                <SelectItem key={pageSize} value={`${pageSize}`}>
                  {pageSize}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
          Page {table.getState().pagination.pageIndex + 1} of{" "}
          {table.getPageCount()}
        </div>
        <div className="flex items-center space-x-2">
          <Button
            variant="outline"
            className="hidden h-8 w-8 p-0 lg:flex"
            onClick={() => table.setPageIndex(0)}
            disabled={!table.getCanPreviousPage()}
          >
            <span className="sr-only">Go to first page</span>
            <ChevronsLeft className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            className="h-8 w-8 p-0"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            <span className="sr-only">Go to previous page</span>
            <ChevronLeftIcon className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            className="h-8 w-8 p-0"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
          >
            <span className="sr-only">Go to next page</span>
            <ChevronRightIcon className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            className="hidden h-8 w-8 p-0 lg:flex"
            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
            disabled={!table.getCanNextPage()}
          >
            <span className="sr-only">Go to last page</span>
            <ChevronsRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}

Create table toolbar component /components/task-table/table-toolbar.tsx



"use client";

import { Cross, Plus } from "lucide-react";

import { Table } from "@tanstack/react-table";

import { Button } from "../ui/button";

import { Input } from "../ui/input";

import { priorities, statuses } from "./data";

import { DataTableFacetedFilter } from "./faceted-filter";

import { useRouter } from "next/navigation";

interface DataTableToolbarProps<TData> {

  table: Table<TData>;

}

export function DataTableToolbar<TData>({

  table,

}: DataTableToolbarProps<TData>) {

  const isFiltered = table.getState().columnFilters.length > 0;

  const router = useRouter();

return (

    <div className="flex items-center justify-between">

      <div className="flex flex-1 items-center space-x-2">

        <Input

          placeholder="Filter tasks..."

          value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}

          onChange={(event) =>

            table.getColumn("title")?.setFilterValue(event.target.value)

          }

          className="h-8 w-[150px] lg:w-[250px]"

        />

        {table.getColumn("status") && (

          <DataTableFacetedFilter

            column={table.getColumn("status")}

            title="Status"

            options={statuses}

          />

        )}

        {table.getColumn("priority") && (

          <DataTableFacetedFilter

            column={table.getColumn("priority")}

            title="Priority"

            options={priorities}

          />

        )}

        {isFiltered && (

          <Button

            variant="ghost"

            onClick={() => table.resetColumnFilters()}

            className="h-8 px-2 lg:px-3"

          >

            Reset

            <Cross className="ml-2 h-4 w-4" />

          </Button>

        )}

      </div>

      <Button

        variant="default"

        onClick={() => router.push("/task/new")}

        className="h-8 px-2 lg:px-3"

      >

        <Plus className="mr-2 h-4 w-4" />

        Create a new task

      </Button>

    </div>

  );

}

Bringing all the pieces together to build the whole table

Create /components/task-table/index.tsx



"use client";

import * as React from "react";

import {

  ColumnDef,

  ColumnFiltersState,

  SortingState,

  VisibilityState,

  flexRender,

  getCoreRowModel,

  getFacetedRowModel,

  getFacetedUniqueValues,

  getFilteredRowModel,

  getPaginationRowModel,

  getSortedRowModel,

  useReactTable,

} from "@tanstack/react-table";

import {

  Table,

  TableBody,

  TableCell,

  TableHead,

  TableHeader,

  TableRow,

} from "../ui/table";

import { DataTablePagination } from "./table-pagination";

import { DataTableToolbar } from "./table-toolbar";

import { useStoreSync } from "@/lib/store/zustand";

import { useTaskStore } from "@/lib/store/task";

import { z } from "zod";

import { Task, taskSchema } from "@/lib/schema";

import { columns } from "./columns";

interface TableProps {

  data: Task[];

}

export default function TaskTable({ data }: TableProps) {

  const taskStore = useStoreSync(useTaskStore, { tasks: data })();

  const tasks = z.array(taskSchema).parse(taskStore.tasks);

  return <DataTable data={tasks} columns={columns} />;

}

interface DataTableProps<TData, TValue> {

  columns: ColumnDef<TData, TValue>[];

  data: TData[];

}

export function DataTable<TData, TValue>({

  columns,

  data,

}: DataTableProps<TData, TValue>) {

  const [rowSelection, setRowSelection] = React.useState({});

  const [columnVisibility, setColumnVisibility] =

    React.useState<VisibilityState>({});

  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(

    []

  );

  const [sorting, setSorting] = React.useState<SortingState>([]);

const table = useReactTable({

    data,

    columns,

    state: {

      sorting,

      columnVisibility,

      rowSelection,

      columnFilters,

    },

    enableRowSelection: true,

    onRowSelectionChange: setRowSelection,

    onSortingChange: setSorting,

    onColumnFiltersChange: setColumnFilters,

    onColumnVisibilityChange: setColumnVisibility,

    getCoreRowModel: getCoreRowModel(),

    getFilteredRowModel: getFilteredRowModel(),

    getPaginationRowModel: getPaginationRowModel(),

    getSortedRowModel: getSortedRowModel(),

    getFacetedRowModel: getFacetedRowModel(),

    getFacetedUniqueValues: getFacetedUniqueValues(),

  });

return (

    <div className="space-y-4">

      <DataTableToolbar table={table} />

      <div className="rounded-md border">

        <Table>

          <TableHeader>

            {table.getHeaderGroups().map((headerGroup) => (

              <TableRow key={headerGroup.id}>

                {headerGroup.headers.map((header) => {

                  return (

                    <TableHead key={header.id} colSpan={header.colSpan}>

                      {header.isPlaceholder

                        ? null

                        : flexRender(

                            header.column.columnDef.header,

                            header.getContext()

                          )}

                    </TableHead>

                  );

                })}

              </TableRow>

            ))}

          </TableHeader>

          <TableBody>

            {table.getRowModel().rows?.length ? (

              table.getRowModel().rows.map((row) => {

                return (

                  <TableRow

                    key={row.id}

                    data-state={row.getIsSelected() && "selected"}

                  >

                    {row.getVisibleCells().map((cell) => (

                      <TableCell key={cell.id}>

                        {flexRender(

                          cell.column.columnDef.cell,

                          cell.getContext()

                        )}

                      </TableCell>

                    ))}

                  </TableRow>

                );

              })

            ) : (

              <TableRow>

                <TableCell

                  colSpan={columns.length}

                  className="h-24 text-center"

                >

                  No results.

                </TableCell>

              </TableRow>

            )}

          </TableBody>

        </Table>

      </div>

      <DataTablePagination table={table} />

    </div>

  );

}

Add the table to the homepage

Update /app/page.tsx



import { getAllTasks } from "@/lib/task/handler";

import TaskTable from "@/components/task-table";

import { surrealDatabase } from "./api/lib/surreal";

export default async function Home() {

  const { data } = await getAllTasks();

return (

    <div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">

      <div className="flex items-center justify-between space-y-2">

        <div>

          <h2 className="text-2xl font-bold tracking-tight">Bonjour!</h2>

        </div>

      </div>

  <span class="p">&lt;</span><span class="nc">TaskTable</span> <span class="na">data</span><span class="p">=</span><span class="si">{</span><span class="nx">data</span> <span class="o">??</span> <span class="p">[]</span><span class="si">}</span> <span class="p">/&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>



);

}

That’s it now run the server and use the application!!!

Thank you for reading and coding till the end. Peace out ✌️

Here's the GitHub repository for the whole project

Deploy your React App using Docker and Nginx

Sourab Pramanik — Mon, 27 Nov 2023 17:26:29 +0000

Hello reader, it's Sourab here. Recently in one of my projects I used Docker and Nginx for deploying a React App to a front-end server. Let's see how I did it.

First, we will need a React project so you can skip creating a new React project if you already have one.

Create a new React project and spin it up



npx create-react-app with-docker
cd with-docker
npm start

It will start your react app at port 3000 and open up in the browser with this interface below

Our app is running fine. So let's close it now and move to the next step.

Create a Dockerfile
In the root directory of your project, we will create a new file and name it Dockerfile. It will look something like this in your project directory

and add this code to that Dockerfile



#React app image
FROM node:lts-alpine as build

WORKDIR /app

COPY package*.json ./

RUN npm ci

COPY . .

RUN npm run build

FROM node:lts-alpine as build will tell docker to download a slim LTS(Long Term Support) version of Node image from Docker Hub and set up a Node environment with all base requirements needed to run a Node project in our case a React project for production that.

WORKDIR /app will tell the docker that in that image we need a dedicated director i.e. /app where the whole project will sit. And whatever changes we make using the steps in this Dockerfile will only affect that /app directory nothing else.

COPY package*.json ./ will copy all the files having the prefix package and suffix .json into the working directory.

RUN npm ci will install all the packages specified in the package.json file of our project into the image.

COPY . . will copy the source directory in the working directory.

RUN npm run build will execute the npm run build script from package.json which will then generate a build directory and all our code will be minified, streamlined, and bundled together into static HTML, CSS, and JavaScript files. This build is highly compressed, optimized, and ready for production. We will use this build to serve.

Nginx Configuration
In the root directory of our project, we will create one file named nginx.conf and paste this code:



http {

  include mime.types;

  set_real_ip_from        0.0.0.0/0;
  real_ip_recursive       on;
  real_ip_header          X-Forward-For;
  limit_req_zone          $binary_remote_addr zone=mylimit:10m rate=10r/s;

  server {
    listen 80;
    server_name localhost;
    root /proxy;
    limit_req zone=mylimit burst=70 nodelay;

    location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri /index.html;   
        }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
  }
}

events {}

Nginx will need this configuration to listen for any connection at port 80 and serve the contents of /usr/share/nginx/html. This configuration may change based on your requirements.

Update the Dockerfile for Nginx
For now, our Dockerfile is only going to build a React app image but we can also create another image for Nginx which will save us from manual setup of Nginx on any target machine and configure it for our app.
So open up the Dockerfile again and add these steps at the bottom of the file.



FROM nginx:latest as prod

COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80/tcp

CMD ["/usr/sbin/nginx", "-g", "daemon off;"]

FROM nginx:latest as prod gets the latest Nginx docker image and annotates it as prod for production usage.

COPY --from=build /app/build /usr/share/nginx/html from the build stage of the image copy the build directory contents from /app/build to /usr/share/nginx/html which is the default directory for Nginx to server html contents but it can be changed if needed.

COPY nginx.conf /etc/nginx/nginx.conf This will copy the nginx.conf file created earlier and replace the contents of the /etc/nginx/nginx.conf in the target machine.

EXPOSE 80/tcp exposes port 80 and listens for incoming connections and serves the React app.

CMD ["/usr/sbin/nginx", "-g", "daemon off;"] fire up the nginx server and keep it alive.

NOTE: These types of images where we have two different stages of builds (i.e. React app and Nginx) are called Multi-stage builds

Finally build a docker image and run the docker container

To build the docker image use this command



docker build -t with-docker:1.0.0-prod .

After the image build is complete run the container using this image with this command



docker run -d -p 80:80 --name react-server with-docker

Now your Nginx server is listening at port 80 and will serve your React app.

Thank you for reading. Peace out.

DEV Community: Sourab Pramanik

Event Driven services using Kafka, SurrealDB, Rust, and Go.

Kafka?

Event-driven services?

Overview

Prerequisites

Get started

Docker compose

Inventory service

Shipping service

Running the services

Execution

Final Output

Conclusion

How do you understand what a Microservice or Monolith architecture is after all?

URL shortening using CLI

What is a URL shortener and why do we need it?

How does it work?

Pre-requisites

Setup

Create a Postgres database

Deploy serverless function Vercel

Install and configure CLI

Usage

Create a short URL

Get long and short URLs by alias

List all records

Remove a record by the alias

Remove all records

Conclusion

Using Clerk authentication in React

Overview

Build the frontend

Setting Environment Variable

Adding components from Shadcn UI

Schema

Store

Custom hooks

Issue modal

Issues table

Update App.tsx file

Update main.tsx file

Run the application

Deployment

Closing in

Using Clerk authentication in Rust

Let's get started

Setup a new application in Clerk

Build the backend

Connect to the shared Postgres DB

Issue structs

Extract the Clerk JWT claim from a request

CRUD endpoints

User endpoints

Building the frontend and deploying

Task tracker application using NextJS and SurrealDB

Setup SurrealDB server

Project setup

Install and configure NextJS application

Install and configure Shandcn UI

Add components from Shadcn

Install JavaScript SDK for SurrealDB

Install NextAuth

Install SurrealDB adapter for NextAuth

Install other required packages

Connect NextJS application to SurrealDB server

Setup NextAuth in your application

Setup GitHub for authentication

Setup Google for authentication

Add the credential to .env.local

Create an authentication route handler

Create authentication form

Protecting routes using middleware

Use session provider to get user session on the client side

Create logout and theme toggle components

Logout component using sign-out function from NextAuth

Create theme toggle (optional)

Add theming and logout feature to your application

Add schemas for the table in the database and keep our application type safe

Create task request route handlers

Update `App.tsx` file

Update `main.tsx` file