DEV Community: PARTHIV SAIKIA

Tanstack Form is still the best way to handle complex validations in React. If you haven't switched from React Hook Form yet, here is why you should.

PARTHIV SAIKIA — Thu, 29 Jan 2026 09:53:04 +0000

How to build a professional sign up page using tanstack form and react?

PARTHIV SAIKIA ・ Aug 4 '25

Learn Shell scripting by building a project scaffolding CLI

PARTHIV SAIKIA — Mon, 26 Jan 2026 09:06:56 +0000

Introduction

We all know setting up a programming project is very tedious. Many programming languages and tools require some files to be present at the root of the project directory to work (e.g. package.json in typescript projects, go.mod in golang projects). As we go on increasing the number of dependencies the number of these configuration files also increases. Most of our projects follow the same folder structure so creating the same folders and files for each project is cumbersome.

So to make our life easier we will build a CLI tool to scaffold golang projects using shell scripting.

By the end of this tutorial you should be able to understand how to write shell scripts and automate repetitive tasks like scaffolding a project.

Shell scripting is valuable for developers because it automates repetitive tasks, allowing them to focus on more strategic work, which enhances productivity. Additionally, it simplifies processes like software deployment and testing, making workflows more efficient and reducing the potential for human error.

Problems in setting up a Golang project

Most golang projects follow a standard project structure which may look like this:

project-name/
├── cmd/
│   └── project-name/
│       └── main.go
├── internal/
├── .gitignore
├── go.mod
├── README.md
├── Makefile
└── LICENSE

Creating these folders and files with same name and same content for multiple projects is really boring.

Every time you create a new project you need to run the same set of commands. e.g.

go mod init project-name
git init
mkdir internal cmd cmd/project-name
touch .gitignore

This is not only slow but also prone to human error. Sometimes we may forget to initialize the go module or sometimes to create the .gitignore file.

To remove all of these mental overhead let's create Scaffold CLI which will create the folder structure, initialize git and create a github repository with just one command.

Scaffold CLI: An Introduction

Scaffold CLI will be used to setup a go project with the folder structure as shown above. It will prompt the user about what is the project name and whether they want to initialize git or not. If they want to initialize git Scaffold CLI will create a github repository with the same name and will make a commit to it.

Getting Started

Let's start building the CLI.

Prerequisites

Before we start, make sure you have:

Basic command line knowledge - You should be comfortable navigating directories and running commands.
Bash/Zsh shell - Available by default on macOS and Linux
Go installed - Download here if you don't have it.
GitHub CLI (optional) - Only needed if you want automatic GitHub repo creation. Install guide.

Quick check: Run these commands to verify your setup:

go version    # Should show Go 1.x or higher
gh --version  # Should show gh version (if using git integration)

GitHub CLI Authentication (one-time setup):
If you plan to use the git integration feature, authenticate the GitHub CLI:

gh auth login

Follow the prompts to authenticate via your browser. You only need to do this once.

Also change the default branch name globally as main as it is more common for new projects.

git config --global init.defaultBranch main

Creating the file structure

Create the folder in your desired location using mkdir scaffold. Now move to the scaffold directory using cd scaffold.

We will split the script into different files based on the function. Our workflow consists of three steps:

Initializing the folder.
Build the folder structure.
Initialize git.

So we will have 3 files namely

init.sh: This will create the project directory and create files such as README.md, LICENSE, Makefile.
structure_folders.sh: This will create folders such as internal/, cmd/.
git.sh: This will initialize a git repository and will create and commit to a github repository.

Along with these 3 helper scripts we will have a main.sh which will take user input, validate them and then call these helper scripts.

Writing the helper scripts

Let's get started with the first helper script init.sh. The purpose of this script is to create the project folder and write some basic files.

Create the file using touch init.sh.

The first line of a shell script should always be

#!/bin/bash

The character sequence #! is called shebang. It tells the operating system about which interpreter should it use to execute the script. In this case we are telling the OS to use the bash interpreter.

Next we need to create the project folder. We cannot use a hard coded string with the command mkdir because the project name will be given by the user as a prompt. So to get the name of the project from the user prompt we will use arguments.

# This script will take the project name as the argument. Hence ${1} is the project name.

#Create directory 
mkdir -p ${1}
echo "Created directory ${1}"

Here ${1} represents the first argument to the script. So now we can call the script with an argument such as

./init.sh cool-go-project

This will execute the command

mkdir -p cool-go-project

This will create a directory named cool-go-project. We can refer to more arguments like ${2}, ${3} and so on. If we need to refer to every argument we can use ${@}.

// Change ${1} to ${@} in init.sh
mkdir -p ${@}

./init.sh cool-go-project cooler-go-project not-so-cool-project

Running this script will result in the execution of the command

mkdir -p cool-go-project cooler-go-project not-so-cool-project

Hence it will create three different folders namely cool-go-project, cooler-go-project, not-so-cool-project.

P.S.: Before executing the script you will need to give it executable permissions by running chmod +x ./init.sh

After the directory is created we would want to move into that directory and initialize go module and create files such as README.md, LICENSE, etc.

The full init.sh will look like this

#!/bin/bash

# This script will take the project name as the argument. Hence ${1} is the project name.

#Create directory 
mkdir -p ${1}
echo "Created directory ${1}"

# Move into the folder
cd ${1}

# Initialise go.mod 
go mod init github.com/parthivsaikia/${1}

# Create Readme
echo "${1} is a cool golang project." > README.md

# Create License
echo "MIT License

Copyright (c) 2026 PARTHIV PRATIM SAIKIA

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the \"Software\"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE." > LICENSE


# Add Makefile

echo "
.PHONY: run test lint clean


run: 
    go run cmd/${1}/main.go

build: 
    go build -o bin/${1} cmd/${1}/main.go

test: 
    go test -v -race ./...

lint: 
    golangci-lint run

clean: 
    go clean
    rm -f bin/${1}
" > Makefile

We move into the project directory using cd ${1} and then write into the files README.md, LICENSE, Makefile using the structure

echo "TEXT" > filename

The > operator redirects the standard output to a file. So in this case the output of echo is redirected to the respective files.

After initializing the folder we need to create folders such as internal/, cmd/ inside the project directory. So let's write the next helper script structure_folders.sh.

touch structure_folders.sh

#!/bin/bash

# This script takes the project name as the argument and create the folder structure

# Create necessary folders and files
mkdir -p internal cmd cmd/${1}
touch cmd/${1}/main.go

This script will result in the following structure which is very standard for a go project.

project-name/
├── cmd/
│   └── project-name/
│       └── main.go
├── internal/
├── .gitignore
├── go.mod
├── README.md
├── Makefile
└── LICENSE

The remaining step is to initialize git in our project directory so create a new file git.sh

touch git.sh

This script should do the following things in order:

Initialize git repository.
Create a github repository with the name same as that of the project.
Create a .gitignore file.
Stage the changes and commit to git.
Push the changes to the remote origin.

We will pass the name of the project as the argument again.

#!/bin/bash

# Script initialising git repository and creating repository in github.

git init 
gh repo create ${1} --public --source=. --remote=origin

# Add .gitignore

echo "# If you prefer the allow list template instead of the deny list, see community template:
# https://github.com/github/gitignore/blob/main/community/Golang/Go.AllowList.gitignore
#
# Binaries for programs and plugins
*.exe
*.exe~
*.dll
*.so
*.dylib

*.test

# Code coverage profiles and other test artifacts
*.out
coverage.*
*.coverprofile
profile.cov

# Dependency directories (remove the comment below to include it)
# vendor/

# Go workspace file
go.work
go.work.sum

# env file
.env

# Editor/IDE
# .idea/
# .vscode/
# Added by goreleaser init:
dist/" > .gitignore

git add . 
git commit -m "chore: initiliase folder structure"
git push origin main

The command gh repo create ${1} --public --source=. --remote=origin creates a public github repository in the current directory and add it as origin.

Note that to use the github-cli you need to authenticate with Github as discussed in the prerequisites section.

We are done with the helper scripts. In the main.sh script we will read user inputs and call the helper scripts. Create the file by running

touch main.sh

This script should do the following tasks in order

Ask the user the name of the project.
Validate if the input is empty.
If the input is empty warn the user and ask the name again.
If name is non-empty run init.sh and structure_folders.sh with project name as argument.
Ask user if they wants to initialize git.
If no then end the process.
If yes then run git.sh with the project name as argument.

#!/bin/bash

# The main script that runs the cli

printf "\033[0;31m
███████╗ ██████╗ █████╗ ███████╗███████╗ ██████╗ ██╗     ██████╗      ██████╗██╗     ██╗
██╔════╝██╔════╝██╔══██╗██╔════╝██╔════╝██╔═══██╗██║     ██╔══██╗    ██╔════╝██║     ██║
███████╗██║     ███████║█████╗  █████╗  ██║   ██║██║     ██║  ██║    ██║     ██║     ██║
╚════██║██║     ██╔══██║██╔══╝  ██╔══╝  ██║   ██║██║     ██║  ██║    ██║     ██║     ██║
███████║╚██████╗██║  ██║██║     ██║     ╚██████╔╝███████╗██████╔╝    ╚██████╗███████╗██║
╚══════╝ ╚═════╝╚═╝  ╚═╝╚═╝     ╚═╝      ╚═════╝ ╚══════╝╚═════╝      ╚═════╝╚══════╝╚═╝
                                                                                        \033[0m\n"


read -p "Enter the project name: " projectName

To give a cool look I am adding an ascii art which will be shown when someones run Scaffold CLI. You can create your own ascii art here.

To make the ASCII art red, we use backslash escapes. Here's how it works:

ESC Character
\033 - This is the ESC character (escape) in octal
- Signals the start of an escape sequence
Color Code
[0;31m - The actual color code
- [ - Starts the CSI (Control Sequence Introducer)
- 0 - Reset all attributes (bold, underline, etc.)
- ; - Separator
- 31 - Red foreground color
- m - Ends the color code
Your Text
ASCII art (now in red)
Reset Code
\033[0m - Reset to default color
- 0 - Reset all attributes
- m - End code
- This prevents the red from bleeding into subsequent output

Example

echo -e "\033[0;31mThis is red text\033[0m"

The ascii art will look like this in the terminal

We prompt the user to input the project name and store it in the variable projectName using the command

read -p "Enter the project name: " projectName

Now we need to validate this input by checking if it is empty. Bash provide a default conditional to check if the length of a string is empty. The syntax is

-z string

    True if the length of string is zero.

To check if the variable projectName is empty we can use it inside a while loop like this

while [[ -z ${projectName} ]]
do
    echo -e "\033[0;31mError: Project name cannot be empty!!\033[0m"
    read -p "Enter the project name: " projectName
done

We refer the variable projectName by ${projectName}. Note that the spaces around the condition -z ${projectName} are not just necessary and not just decorative. Until this condition is false the user will be prompted to enter a non-empty project name.

Now we ask the user if they want to initialize git and store the result in the variable initialiseGit.

read -p "Do you want to initialise a git repo? (y or n): " initialiseGit

while [[ "${initialiseGit}" != "y" && "${initialiseGit}" != "n" ]]
do
    echo -e "\033[0;31mError: Invalid input! Please select y or n!!\033[0m"
    read -p "Do you want to initialise a git repo? (y or n): " initialiseGit
done

We perform the same validation steps here too.

The helper scripts init.sh and structure_folders.sh needs to run always independent of the variable initialiseGit so we execute them first.

~/repos/scaffold/init.sh ${projectName}
cd ${projectName}
~/repos/scaffold/structure_folders.sh ${projectName}

We execute the scripts init.sh and structure_folders.sh with the variable projectName as argument.

Since Scaffold CLI can be called from anywhere so we are providing the absolute location of the scripts. Change the location accordingly in your code.

We create the folder using init.sh and then move into the newly created folder using cd ${projectName}. Then we execute structure_folders.sh from inside of the project folder.

IMPORTANT: You might be confused that why are we using cd again to move into the project folder when we have already move into it in the init.sh file. This is because a script is executed in its own context, meaning that any directory changes (like cd) made within that script only apply while the script is running. Once init.sh finishes, control returns to the parent shell, reverting back to its original working directory. Therefore, if you want to ensure that your subsequent commands operate within the desired project folder, you need to issue the cd command again in your current shell. This guarantees that you are indeed in the right directory before running any further commands.

Based on the variable initialiseGit we need to execute the script git.sh.

if [[ ${initialiseGit} == "y" ]]
then
    ~/repos/scaffold/git.sh ${projectName}
fi

This is the syntax of if statement in bash. The keyword fi marks the end of the if block. In this block we are checking if the variable initialiseGit is equal to "y" i.e. if the user prompted yes when it was asked whether they want to initialize git. If that condition is true we execute the script git.sh with the argument ${projectName}.

With this our CLI is complete. Make all scripts executable by running:

chmod +x ./init.sh
chmod +x ./structure_folders.sh
chmod +x ./git.sh
chmod +x ./main.sh

To execute this script with just one command we need to add it as an alias in our shell config. Add this line in your shell config. Since I use zsh I will add it to ~/.zshrc. If you use bash you need to add it to ~/.bashrc.

alias scaffold="~/repos/scaffold/main.sh"

Adjust the location of the script according to your setup.

NOTE: You can find out your shell by running.

echo $SHELL
#output: /bin/zsh

Scaffold CLI is now ready to use. Let's create one project using it.

Demo of Scaffold CLI

Start Scaffold CLI by running scaffold. You will see the ascii art and you will be prompted to enter the project name.

Once you give a project name you will be asked whether you want to initialize git or not.

Once you enter "y" the project folder will be created and the changes will be pushed to github.

Now move to the project folder by cd test-project.

~/repos/test-project main -> tree
.
├── cmd
│   └── test-project
│       └── main.go
├── go.mod
├── internal
├── LICENSE
├── Makefile
└── README.md

You can see that the folder structure is same with the folder structure discussed above.

You can also verify the creation of the test-project repository in Github.

Conclusion

Shell scripting might seem intimidating at first, but as you've seen, it's incredibly powerful for automating everyday development tasks. What started as a simple idea—"I'm tired of manually setting up projects"—turned into a useful tool that saves time and reduces errors.
The beauty of shell scripting is that it's accessible. You don't need to learn a new programming language or install heavy frameworks. With just bash and some creativity, you can automate almost anything in your development workflow.
What repetitive tasks are you tired of doing manually? Challenge yourself to automate one this week. Start small, keep it simple, and iterate as you learn. Share your automation scripts in the comments—I'd love to see what you build!

Building a Full-Stack App with Turborepo, React, and Hono (Part 3: Developing the UI)

PARTHIV SAIKIA — Sun, 28 Dec 2025 20:23:49 +0000

In the previous two blog posts, we completed the project scaffolding and developed the APIs. In this installment, we will complete the project by building the user interface. As discussed previously, we will use React Router v7 for building the frontend.

Getting Started

Clone the repository by running this command in your terminal:

git clone https://github.com/parthivsaikia/todo-turbo

Navigate to the todo-turbo folder:

cd todo-turbo

Install and build all dependencies:

pnpm i && pnpm build

Developing the Frontend with React Router v7

Overview of the UI

Our todo application will allow users to create, delete, and edit todos. The web page will have two main sections: one for user management and another for todo management.

The user section will include a form to create new users and a dropdown menu to select the active user. The todo section will feature a form to create new todos for the selected user, along with a list displaying all todos for that user. Each todo will have two action buttons: one to update the todo and another to delete it.

The application will utilize all of the API endpoints we built previously:

The user creation form will use POST /users to create new users
The dropdown menu will use GET /users to retrieve all users
The todo creation form will use POST /todos to create new todos
The todo list will use GET /todos/:userId to retrieve todos for a specific user
The update and delete buttons will use PUT /todos/:id and DELETE /todos/:id respectively

Let's begin.

Understanding the Frontend Package

From the root directory, run pnpm run dev and visit http://localhost:5173. You will see the welcome message from React Router.

All pages in React Router are defined in the app/routes directory. If you examine the app/routes directory, you will find one file: home.tsx. This file is responsible for rendering the message currently displayed.

Let's review this file:

import type { Route } from "./+types/home";
import { Welcome } from "../welcome/welcome";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

export default function Home() {
  return <Welcome />;
}

As you can see, it returns a component called Welcome. This component is imported from the welcome folder, which contains two SVGs for dark and light mode along with the Welcome component itself. Since we don't need any of these files, we can safely delete the welcome folder.

Run the following command from inside the todo-turbo/apps/frontend/app/ folder:

rm -rf welcome

Since the Welcome component was imported in home.tsx, TypeScript will throw an error stating "Cannot find module '../welcome/welcome' or its corresponding type declarations."

Simply remove that import line and remove the Welcome component from the return statement of the Home function component. Your home.tsx should now look like this:

import type { Route } from "./+types/home";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

export default function Home() {
  return <div></div>;
}

Setting Up CORS

Before we start building our UI components, we need to configure CORS (Cross-Origin Resource Sharing) to allow our frontend to communicate with our backend. Since browsers enforce the same-origin policy for security reasons, this configuration is essential for cross-origin requests.

Open todo-turbo/apps/backend/src/index.ts and add the following lines:

import { serve } from "@hono/node-server";
import { Hono } from "hono";
import { cors } from "hono/cors";
import userRouter from "./routes/user.js";
import todoRouter from "./routes/todo.js";

const app = new Hono();

// Configure CORS
app.use(
  cors({
    origin: "http://localhost:5173",
  }),
);

app.get("/", (c) => {
  return c.text("Hello Hono!");
});

app.route("/users", userRouter);
app.route("/todos", todoRouter);

serve(
  {
    fetch: app.fetch,
    port: 3000,
  },
  (info) => {
    console.log(`Server is running on http://localhost:${info.port}`);
  },
);

With this configuration, our frontend running on port 5173 can now make requests to our backend running on port 3000.

Creating the Signup Page

Since we don't have any users yet, let's first create a signup page that will allow users to register. For the sake of simplicity, we're keeping the signup process straightforward without password authentication.

Create a new file signup.tsx in the todo-turbo/apps/frontend/app/routes/ folder. On this page, we will implement a simple Form component with an input field and a submit button. The input will capture the user's name and the button will submit the form.

import type { Route } from "./+types/signup";
import axios from "axios";
import { Form, redirect } from "react-router";

export async function clientAction({ request }: Route.ClientActionArgs) {
  const formData = await request.formData();
  const data = Object.fromEntries(formData);
  const response = await axios.post("http://localhost:3000/users", data);
  console.log(response.data);
  return redirect("/");
}

export default function SignupForm() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-600 via-blue-600 to-indigo-700 flex items-center justify-center p-4">
      <div className="bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl p-8 w-full max-w-md border border-white/20">
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-white mb-2">Create Account</h1>
        </div>
        <Form method="post" className="space-y-6">
          <div>
            <label htmlFor="name" className="block text-white text-sm font-medium mb-2">
              Username
            </label>
            <input
              type="text"
              id="name"
              name="name"
              required
              className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition"
              placeholder="Enter your username"
            />
          </div>
          <button
            type="submit"
            className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transform hover:scale-105 transition shadow-lg"
          >
            Create User
          </button>
        </Form>
      </div>
    </div>
  );
}

Let's examine the clientAction function. We're using clientAction here because we have a separate backend with Hono. For more information about actions, you can refer to the React Router documentation.

First, we extract the formData, which contains the inputs we provided. Then we create an object from this formData, which will be sent as the payload to our API. We make a POST request to http://localhost:3000/users, which is the route we defined for creating new users. After receiving the response, we redirect the user to the home page.

We're importing three dependencies: redirect, axios, and the type Route. The redirect utility is built into React Router, but we need to install axios separately. From the frontend folder, run:

pnpm add axios

Now add this route to the app/routes.ts file to configure it:

import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.tsx"),
  route("/signup", "routes/signup.tsx"),
] satisfies RouteConfig;

With the server running, visit http://localhost:5173/signup and you should see the signup form.

Building the User Dropdown Component

Now let's create a dropdown menu for selecting users. We will use the Form component from React Router. It's good practice to create separate files for larger components, so let's create a new folder called components inside the todo-turbo/apps/frontend/app/ folder.

Create a new file userDropDown.tsx in this components folder.

First, let's define the User interface to ensure type safety:

import { Form } from "react-router";

interface User {
  id: string;
  name: string;
}

export default function UserDropDownMenu({
  users,
  selectedUser,
  onUserChange,
}: {
  users: User[];
  selectedUser: string | null;
  onUserChange: (userId: string) => void;
}) {
  // Filter out any null or undefined values from the users array
  const validUsers = users?.filter((user) => user != null) || [];

  // Handle the case when there are no valid users
  if (validUsers.length === 0) {
    return (
      <div className="space-y-4">
        <div className="bg-yellow-500/20 border border-yellow-500/30 rounded-lg p-4">
          <p className="text-white/90 text-sm">
            No users found. Please create a user first to get started.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <label htmlFor="user-select" className="block text-white text-sm font-medium">
        Select User
      </label>
      <select
        id="user-select"
        value={selectedUser || ""}
        onChange={(e) => onUserChange(e.target.value)}
        className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition"
      >
        <option value="" disabled>
          Choose a user
        </option>
        {validUsers.map((user) => (
          <option key={user.id} value={user.id}>
            {user.name}
          </option>
        ))}
      </select>
    </div>
  );
}

The component accepts three props: an array of users, the currently selected user ID, and a callback function to handle user selection changes.

Handling the Empty Users Case: We've added protection against null or undefined values at multiple levels. First, we filter out any null or undefined values from the users array using users?.filter((user) => user != null) || []. This prevents the "TypeError: can't access property 'id', user is null" error that would occur if the array contains null elements. Then we check if there are any valid users remaining. If no valid users are available, the component displays a friendly message prompting the user to create an account first, instead of showing an empty dropdown. This provides better user experience and clear guidance.

When valid users are available, we iterate through the filtered array to render each user as an option in the dropdown.

Creating the Todo Form Component

Now let's create a form for adding new todos. Create a new file todoForm.tsx in the components folder:

import { Form } from "react-router";

export default function TodoForm({ userId }: { userId: string | null }) {
  if (!userId) {
    return (
      <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 border border-white/20 text-center">
        <p className="text-white/70">Please select a user to create todos</p>
      </div>
    );
  }

  return (
    <div className="bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl p-6 border border-white/20">
      <h2 className="text-2xl font-bold text-white mb-6">Create New Todo</h2>
      <Form method="post" className="space-y-4">
        <input type="hidden" name="userId" value={userId} />
        <div>
          <label htmlFor="task" className="block text-white text-sm font-medium mb-2">
            Task
          </label>
          <input
            type="text"
            id="task"
            name="task"
            required
            className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition"
            placeholder="Enter your task"
          />
        </div>
        <div>
          <label htmlFor="dueDate" className="block text-white text-sm font-medium mb-2">
            Due Date
          </label>
          <input
            type="date"
            id="dueDate"
            name="dueDate"
            required
            className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition"
          />
        </div>
        <button
          type="submit"
          className="w-full bg-gradient-to-r from-green-500 to-emerald-500 text-white py-3 rounded-lg font-semibold hover:from-green-600 hover:to-emerald-600 transform hover:scale-105 transition shadow-lg"
        >
          Add Todo
        </button>
      </Form>
    </div>
  );
}

This component checks whether a user is selected before rendering the form. If no user is selected, it displays a message prompting the user to select one. The form includes inputs for the task description and due date, along with a hidden input field for the userId.

Creating the Todo List Component

Now let's create a component to display the list of todos. Create a new file todoList.tsx in the components folder:

import { Form } from "react-router";
import { useState } from "react";

interface Todo {
  id: string;
  task: string;
  dueDate: string;
  userId: string;
}

export default function TodoList({ todos }: { todos: Todo[] }) {
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editTask, setEditTask] = useState("");
  const [editDueDate, setEditDueDate] = useState("");

  const handleEdit = (todo: Todo) => {
    setEditingId(todo.id);
    setEditTask(todo.task);
    setEditDueDate(todo.dueDate.split("T")[0]);
  };

  const cancelEdit = () => {
    setEditingId(null);
    setEditTask("");
    setEditDueDate("");
  };

  if (todos.length === 0) {
    return (
      <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20 text-center">
        <p className="text-white/70 text-lg">No todos yet. Create your first one!</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <h2 className="text-2xl font-bold text-white mb-4">Your Todos</h2>
      {todos.map((todo) => (
        <div
          key={todo.id}
          className="bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20 hover:bg-white/15 transition"
        >
          {editingId === todo.id ? (
            <Form method="post" className="space-y-4">
              <input type="hidden" name="intent" value="update" />
              <input type="hidden" name="id" value={todo.id} />
              <input
                type="text"
                name="task"
                value={editTask}
                onChange={(e) => setEditTask(e.target.value)}
                className="w-full px-3 py-2 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"
              />
              <input
                type="date"
                name="dueDate"
                value={editDueDate}
                onChange={(e) => setEditDueDate(e.target.value)}
                className="w-full px-3 py-2 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"
              />
              <div className="flex gap-2">
                <button
                  type="submit"
                  className="flex-1 bg-gradient-to-r from-green-500 to-emerald-500 text-white py-2 rounded-lg font-semibold hover:from-green-600 hover:to-emerald-600 transition"
                >
                  Save
                </button>
                <button
                  type="button"
                  onClick={cancelEdit}
                  className="flex-1 bg-gradient-to-r from-gray-500 to-gray-600 text-white py-2 rounded-lg font-semibold hover:from-gray-600 hover:to-gray-700 transition"
                >
                  Cancel
                </button>
              </div>
            </Form>
          ) : (
            <div className="space-y-3">
              <div className="text-white text-lg font-medium">{todo.task}</div>
              <div className="text-white/70 text-sm">
                Due: {new Date(todo.dueDate).toLocaleDateString()}
              </div>
              <div className="flex gap-2 mt-4">
                <button
                  onClick={() => handleEdit(todo)}
                  className="flex-1 bg-gradient-to-r from-yellow-500 to-orange-500 text-white py-2 rounded-lg font-semibold hover:from-yellow-600 hover:to-orange-600 transition"
                >
                  Edit
                </button>
                <Form method="post" className="flex-1">
                  <input type="hidden" name="intent" value="delete" />
                  <input type="hidden" name="id" value={todo.id} />
                  <button
                    type="submit"
                    className="w-full bg-gradient-to-r from-red-500 to-rose-500 text-white py-2 rounded-lg font-semibold hover:from-red-600 hover:to-rose-600 transition"
                  >
                    Delete
                  </button>
                </Form>
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

This component displays all todos in a card layout. Each todo can be edited or deleted. When the user clicks the Edit button, the todo transforms into an editable form. We use React state to manage which todo is being edited and to store the temporary values during editing.

Completing the Home Page

Now let's bring everything together in the home page. We need to add a clientLoader to fetch users and todos, and a clientAction to handle todo creation, updates, and deletions.

Update your home.tsx:

import type { Route } from "./+types/home";
import axios from "axios";
import { Link, redirect } from "react-router";
import { useState } from "react";
import UserDropDownMenu from "../components/userDropDown";
import TodoForm from "../components/todoForm";
import TodoList from "../components/todoList";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "Todo App - Home" },
    { name: "description", content: "Manage your todos efficiently" },
  ];
}

export async function clientLoader() {
  try {
    const response = await axios.get("http://localhost:3000/users");
    const users = await response.data;
    // Ensure we always return an array, even if the response is null or undefined
    return { users: users || [], todos: [] };
  } catch (error) {
    // If there's an error (like no users exist yet), return an empty array
    // instead of throwing an error
    console.error("Error fetching users:", error);
    return { users: [], todos: [] };
  }
}

export async function clientAction({ request }: Route.ClientActionArgs) {
  const formData = await request.formData();
  const intent = formData.get("intent");

  try {
    if (intent === "update") {
      const id = formData.get("id");
      const task = formData.get("task");
      const dueDate = formData.get("dueDate");
      await axios.put(`http://localhost:3000/todos/${id}`, {
        task,
        dueDate: new Date(dueDate as string).toISOString(),
      });
    } else if (intent === "delete") {
      const id = formData.get("id");
      await axios.delete(`http://localhost:3000/todos/${id}`);
    } else {
      // Create new todo
      const task = formData.get("task");
      const dueDate = formData.get("dueDate");
      const userId = formData.get("userId");
      await axios.post("http://localhost:3000/todos", {
        task,
        dueDate: new Date(dueDate as string).toISOString(),
        userId,
      });
    }
    return redirect("/");
  } catch (error) {
    const errorMessage =
      error instanceof Error
        ? `Error processing todo: ${error.message}`
        : `Unknown error processing todo`;
    throw new Error(errorMessage);
  }
}

export default function Home({ loaderData }: Route.ComponentProps) {
  const [selectedUser, setSelectedUser] = useState<string | null>(null);
  const [todos, setTodos] = useState([]);

  const handleUserChange = async (userId: string) => {
    setSelectedUser(userId);
    try {
      const response = await axios.get(`http://localhost:3000/todos/${userId}`);
      setTodos(response.data);
    } catch (error) {
      console.error("Error fetching todos:", error);
      setTodos([]);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-600 via-blue-600 to-indigo-700 p-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12">
          <h1 className="text-5xl font-bold text-white mb-4">Todo Manager</h1>
          <p className="text-white/80 text-lg">Organize your tasks efficiently</p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 mb-8">
          <div className="bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl p-8 border border-white/20">
            <h2 className="text-2xl font-bold text-white mb-6">User Management</h2>
            <UserDropDownMenu
              users={loaderData.users}
              selectedUser={selectedUser}
              onUserChange={handleUserChange}
            />
            <Link
              to="/signup"
              className="mt-4 block w-full text-center bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transform hover:scale-105 transition shadow-lg"
            >
              Create New User
            </Link>
          </div>

          <TodoForm userId={selectedUser} />
        </div>

        <TodoList todos={todos} />
      </div>
    </div>
  );
}

Let's understand what's happening here:

clientLoader: Fetches all users when the page loads and initializes the component with the necessary data. We've updated this to gracefully handle the case when no users exist yet by returning an empty array instead of throwing an error. This ensures the application doesn't crash on first load when the database is empty.
clientAction: Handles three types of actions: creating, updating, and deleting todos. We use an "intent" field to distinguish between these actions
State Management: We use React state to track the selected user and their todos, ensuring the UI remains responsive
handleUserChange: When a user is selected from the dropdown, this function fetches their todos from the backend and updates the state

The UI is now organized into two main sections:

User management section at the top with the dropdown and "Create New User" button
Todo management section below with the form and list displayed side by side

Additionally, the TodoList component is rendered below these sections to display all todos for the selected user. The layout uses a grid system where the user management and todo form are side by side on medium and larger screens, with the todo list spanning the full width below them.

Testing the Application

Now let's test the complete application. Ensure both your frontend and backend servers are running:

From the root directory, run pnpm run dev
Visit http://localhost:5173
Click "Create New User" to create a few users
Select a user from the dropdown menu
Create some todos for that user
Try editing and deleting todos

Your complete todo application is now functional. The application fetches data from your Hono backend, displays it in an attractive interface, and enables full CRUD operations on both users and todos.

What's Next?

Congratulations! You've successfully built a full-stack monorepo application using Turborepo, React Router v7, and Hono. Here are some ideas to enhance the application further:

Add authentication with JWT tokens for secure user sessions
Implement todo completion status with visual indicators
Add todo categories or tags for better organization
Implement todo filtering and sorting capabilities
Add due date notifications to remind users of upcoming tasks
Implement todo priority levels to help users focus on important tasks
Add a dark/light mode toggle for user preference

The complete source code for this section is available on GitHub.

Conclusion

This concludes our three-part series on building a full-stack application with Turborepo, React Router, and Hono. You now have a solid foundation for building scalable monorepo applications with modern tools and industry best practices. Happy coding!

Building a Full-Stack App with Turborepo, React, and Hono (Part 2: Developing the API)

PARTHIV SAIKIA — Sun, 21 Dec 2025 13:59:53 +0000

In the last blog we completed the setup for our monorepo todo list. In this one we will develop the API using hono. If you can't find the folder in your computer you can clone it from this repo by running this command from the terminal.

git clone https://github.com/parthivsaikia/todo-turbo

Now cd into this folder using cd todo-turbo.

Now to install and build all the dependencies run

pnpm i && pnpm build

Developing API using hono

We will first develop the APIs. Create a new folder named /routes inside the /src folder in /backend directory. In this /routes folder we will create our API endpoints.

The app will have two main entities - users and todos. Each user can create multiple todos. The API related to each entity will reside in their respective files in the /routes folder.

Creating API endpoints for users.

Create a user.ts file in the /routes folder. This file will contain the CRUD APIs related to the user entity.

import prisma from "@repo/db";
import { Hono } from "hono";

Import the shared Prisma client and hono instance at the top of user.ts. Notice that we import the prisma client from the internal package @repo/db package. Hono represents the app instance that we will create. A Hono instance is already present in the src/index.ts of the same folder. This is the main Hono app instance and all the other instances such as user, todo, will be added to it.

Create a new Hono instance.

const userRouter = new Hono();

While Hono allows any name we will use the suffix "Router" to distinguish these sub-applications from our main application defined at src/index.ts.

Let's define the route to handle user creation. The route will take the name of the user and will store it in the database.

userRouter.post("/", async (c, next) => {
  try {
    const { name } = await c.req.json();
    const user = await prisma.user.create({
      data: {
        name,
      },
    });
    return c.json({
      id: user.id.toString(),
      name: user.name,
    }, 201);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `error in creating user: ${error.message}`
        : `unknown error in creating user.`;
    throw new Error(errorMsg);
  }
});

The endpoint accepts a name from the request body and uses it to create a new user through the Prisma client. The created user object is stored in a variable and returned as a JSON response using c.json(). Note that we're converting the user's ID to a string before sending the response—this is necessary because JSON cannot serialize BigInt values, which is the data type Prisma uses for ID fields. We return 201 Created as the status code cause a new user is created.

The try-catch block handles error management in this endpoint. The try block contains the code that might fail i.e parsing the request body and creating the user in the database. If everything executes successfully, the user data is returned. However, if an error occurs at any point (such as invalid input, database connectivity issues, or constraint violations), the catch block intercepts it. We then check whether the error is an Error instance to extract a meaningful error message, format it appropriately, and throw a new Error that can be handled by downstream error middleware.

Now let's create an endpoint which returns a list of all the users created.

userRouter.get("/", async (c, next) => {
  try {
    const users = await prisma.user.findMany({});
    const usersWithIdAsString = users.map((user) => ({
      id: user.id.toString(),
      name: user.name,
    }));
    return c.json(usersWithIdAsString, 200);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `error in fetching user: ${error.message}`
        : `unknown error in fetching user.`;
    throw new Error(errorMsg);
  }
});

We use the findMany method which returns all the user objects stored in the database. In this route we are returning 200 OK status code since the route successfully returns the requested data.

Your final user.ts should look like this

import prisma from "@repo/db";
import { Hono } from "hono";

const userRouter = new Hono();

userRouter.post("/", async (c, next) => {
  try {
    const { name } = await c.req.json();
    const user = await prisma.user.create({
      data: {
        name,
      },
    });
    return c.json({
      id: user.id.toString(),
      name: user.name,
    }, 201);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `error in creating user: ${error.message}`
        : `unknown error in creating user.`;
    throw new Error(errorMsg);
  }
});

userRouter.get("/", async (c, next) => {
  try {
    const users = await prisma.user.findMany({});
    const usersWithIdAsString = users.map((user) => ({
      id: user.id.toString(),
      name: user.name,
    }));
    return c.json(usersWithIdAsString, 200);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `error in fetching user: ${error.message}`
        : `unknown error in fetching user.`;
    throw new Error(errorMsg);
  }
});

export default userRouter;

In the last line we are exporting the userRouter so that it can be added to the main Hono app.

Adding userRouter to main Hono app

The src/index.ts inside the /backend folder should look like this.

import { serve } from '@hono/node-server'
import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

serve({
  fetch: app.fetch,
  port: 3000
}, (info) => {
  console.log(`Server is running on http://localhost:${info.port}`)
})

It defines a Hono app and at the root path shows the text "Hello Hono" at the port 3000. To verify this run pnpm run dev in the root directory of our monorepo and then visit http://localhost:3000. You should see the output text "Hello Hono" there.

Now to add the userRouter to this Hono app we need to do some modification to the index.ts .

Import the userRouter to src/index.ts.

import userRouter from "./routes/user.js"

Then add it to the Hono app using this line.

app.route("/users", userRouter)

The full index.ts should look like

import { serve } from "@hono/node-server";
import { Hono } from "hono";
import userRouter from "./routes/user.js";

const app = new Hono();

app.get("/", (c) => {
  return c.text("Hello Hono!");
});




serve(
  {
    fetch: app.fetch,
    port: 3000,
  },
  (info) => {
    console.log(`Server is running on http://localhost:${info.port}`);
  },
);

Now the requests to create and get users can be made to http://localhost:3000/users.

Creating API endpoint for todos

Now let's create endpoints for todos. Since todos need to be created as well as deleted we are going to create all of the four "CRUD" endpoints.

First create a new file todo.ts in the /routes folder and import prisma client and Hono similar to user.ts . Then create a Hono app with the name todoRouter.

import prisma from "@repo/db";
import { Hono } from "hono";

const todoRouter = new Hono();

Now create a route to handle creation of todo. This is similar to the endpoint POST /users. We are taking the task, the ISO string of the dueDate and the userId as the inputs and using them to create a new todo with the help of prisma. We are changing the types of dueDate and userId because we have them as strings but prisma want them as date and BigInt respectively.

todoRouter.post("/", async (c, next) => {
  try {
    const { task, dueDate, userId } = await c.req.json();
    const validatedUserId = BigInt(userId);
    const validatedDueDate = new Date(dueDate);
    const todo = await prisma.todo.create({
      data: {
        task,
        dueDate: validatedDueDate,
        userId: validatedUserId,
      },
    });
    return c.json({
      task,
      dueDate,
      id: todo.id.toString(),
      userId,
    }, 201);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `error in creating todo: ${error.message}`
        : `unknown error in creating todo.`;
    throw new Error(errorMsg);
  }
});

We also need an endpoint to list all the todos. In case of users we can fetch all of them and send them but for todos we shouldn't show all the todos to all the users. A user should only see the todos which are created by them. To solve this problem we will use params. To give you a better picture let me give you an example. Consider there is a user John with userId 1 and then another user James with userId 2. If we make a GET request to http://localhost:3000/todos/1 we should get the todos created by John and if we make the request to http://localhost:3000/todos/2 we should get the todos created by James. Here the userId is called the param. Let's see it in action.

todoRouter.get("/:userId", async (c) => {
  try {
    const userId = BigInt(c.req.param("userId"));

    const todos = await prisma.todo.findMany({
      where: {
        userId,
      },
    });

    // Map BigInts to strings for JSON serialization
    const todosSuitableForJson = todos.map((todo) => ({
      ...todo,
      id: todo.id.toString(),
      userId: todo.userId.toString(),
    }));

    return c.json(todosSuitableForJson, 200);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `Error in fetching todos: ${error.message}`
        : `Unknown error in fetching todos.`;
    throw new Error(errorMsg);
  }
});

Here we are defining an endpoint :/userId which takes a request with a GET method and return the todos created by the user with id as userId.

The userId is provided as the param of the url and is extracted using c.req.param method. We have received this id as a string from the url but to use it with prisma we need it as a bigint, so we store it in the variable userId by converting it into bigInt.
By using prisma we get all the todos which has userId as userId.
These todos have two fields with the type bigint - id and userId which can't be serialized with json, so we create a new array todosSuitableForJson by mapping each todo and converting the id and userId to string. Then we export this new array todosSuitableForJson.

After these two endpoints we need to define two more endpoint to update and delete todos. Let's get started with the "update" endpoint.

The update endpoint will take id as the param and the changed data as input. It will find the todo with the given id and will update the todo with the new data. There are two HTTP methods for updating data : PUT and PATCH. The main difference between these two methods are that PUT replaces the old data with the new one completely but PATCH only changes the values where there is a change while keeping the unchanged ones untouched.

todoRouter.put("/:id", async (c) => {
  try {
    const { task, dueDate } = await c.req.json();
    const validatedDueDate = new Date(dueDate);
    const id = BigInt(c.req.param("id"));
    const todo = await prisma.todo.update({
      where: { id },
      data: { task, dueDate: validatedDueDate },
    });
    return c.json({
      task,
      id: id.toString(),
      userId: todo.userId,
      dueDate,
    }, 200);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `error in updating todo: ${error.message}`
        : `unknown error in updating todo.`;
    throw new Error(errorMsg);
  }
});

The logic used in this route mirrors the other routes discussed so far, the key difference being we've used the PUT method to ensure idempotent updates.

The delete endpoint will be created using the HTTP DELETE method. We need to identify the todo which is to be deleted using its id. So we will using the param id to find the todo.

todoRouter.delete("/:id", async (c) => {
  try {
    const id = BigInt(c.req.param("id"));
    await prisma.todo.delete({
      where: {
        id,
      },
    });
    return c.text(`successfully deleted todo with id ${id.toString()}`);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `error at deleting todo: ${error.message}`
        : `unknown error at deleting todo.`;
    throw new Error(errorMsg);
  }
});

To delete a todo we extract the id from the param and call the prisma.todo.delete() method with it. It deletes the todo from the database and returns the text response back to the client.

With this we can say that the APIs are enough for our simple to-do list. The full todo.ts is

import prisma from "@repo/db";
import { Hono } from "hono";

const todoRouter = new Hono();

// 1. Create a new Todo
todoRouter.post("/", async (c) => {
  try {
    const { task, dueDate, userId } = await c.req.json();

    // Conversion for Prisma types
    const validatedUserId = BigInt(userId);
    const validatedDueDate = new Date(dueDate);

    const todo = await prisma.todo.create({
      data: {
        task,
        dueDate: validatedDueDate,
        userId: validatedUserId,
      },
    });

    return c.json({
      task,
      dueDate,
      id: todo.id.toString(),
      userId,
    }, 201);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `Error in creating todo: ${error.message}`
        : `Unknown error in creating todo.`;
    throw new Error(errorMsg);
  }
});

// 2. GET Todos by User ID
todoRouter.get("/:userId", async (c) => {
  try {
    const userId = BigInt(c.req.param("userId"));

    const todos = await prisma.todo.findMany({
      where: {
        userId,
      },
    });

    // Map BigInts to strings for JSON serialization
    const todosSuitableForJson = todos.map((todo) => ({
      ...todo,
      id: todo.id.toString(),
      userId: todo.userId.toString(),
    }));

    return c.json(todosSuitableForJson, 200);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `Error in fetching todos: ${error.message}`
        : `Unknown error in fetching todos.`;
    throw new Error(errorMsg);
  }
});

// 3. Update a Todo
todoRouter.put("/:id", async (c) => {
  try {
    const { task, dueDate } = await c.req.json();
    const validatedDueDate = new Date(dueDate);
    const id = BigInt(c.req.param("id"));

    const todo = await prisma.todo.update({
      where: { id },
      data: { task, dueDate: validatedDueDate },
    });

    return c.json({
      task,
      id: id.toString(),
      userId: todo.userId.toString(),
      dueDate,
    }, 200);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `Error in updating todo: ${error.message}`
        : `Unknown error in updating todo.`;
    throw new Error(errorMsg);
  }
});

// 4. Delete a Todo
todoRouter.delete("/:id", async (c) => {
  try {
    const id = BigInt(c.req.param("id"));

    await prisma.todo.delete({
      where: {
        id,
      },
    });

    return c.text(`Successfully deleted todo with id ${id.toString()}`, 200);
  } catch (error) {
    const errorMsg =
      error instanceof Error
        ? `Error in deleting todo: ${error.message}`
        : `Unknown error in deleting todo.`;
    throw new Error(errorMsg);
  }
});

export default todoRouter;

Now add todoRouter to the main Hono instance at src/index.ts. Import todoRouter into the file by adding this line at the top.

import todoRouter from "./routes/todo.js"

Then add the router instance to the main instance by adding

app.route("/todos", todoRouter);

What's Next?

With the User and Todo APIs complete, our backend logic is fully operational. We’ve successfully handled creating, reading, updating, and deleting resources while managing tricky edge cases like BigInt serialization.

In the next part, we will close the loop by connecting this API to our React frontend. You can find the complete source code for this section on github.

Building a Full-Stack App with Turborepo, React, and Hono (Part 1: Project Setup and Database Configuration)

PARTHIV SAIKIA — Sun, 24 Aug 2025 14:51:05 +0000

What are monorepos?

According to google, a monorepo is a single version control repository (like Git) that contains the source code for multiple projects, applications or modules. Instead of having separate repositories for each project, a monorepo consolidates all code into one centralized location.

Advantages of monorepo:

Dependency management is simple.
Refactoring is easier.
Collaborating in a monorepo is easier.
Monorepos are more easy to test and deploy.

In this tutorial we will be building a simple To-do app with a monorepo structure. Since monorepos can be difficult to manage on their own we will use Turborepo.Turborepo by Vercel is a build system for javascript and typescript code bases.

Tech Stack for the project:

In this project we will be using the following technologies:

React router v7 framework mode for frontend.
Hono for backend.
PostgreSQL as the database.
Prisma ORM as the orm.

What will you learn from this tutorial:

After the end of this article you should have knowledge about:

Data mutation (actions) and data loading (loaders) in react router.
API development in hono.
Database query with prisma.
Managing everything with turborepo.

"You can follow along with the project's development in this repo. The main branch will be updated as the series progresses. For this article, the complete code can be found on the part1-setup-complete branch."

Prerequisite:

Node v18+ should be installed.
pnpm should be installed globally

npm i -g pnpm

Your favorite code editor.

Let's start coding

1. Creating the monorepo

Now to create a monorepo go to your desired location and run this command from your terminal.

pnpm dlx create-turbo@latest

Give your monorepo a name you wish. I am keeping it simple and naming it todo-turbo.

Now chose your package manager. I am using pnpm so if you want to follow along you can chose it too but it doesn't matter a lot.

Now after you press enter, turborepo will install all the packages by itself. After the installation is complete a folder named todo-turbo will be created. The folder will have this structure.

2. Removing unnecessary folders

You can see that the project has two folders: apps and packages. The apps folder usually contains the source code and the packages folder contains the shareable code between these apps.

The apps folder currently contains two sub-folders: apps/web and apps/docs. Both of them are Nextjs repositories. Since we are going to use React-router v7 so we can safely remove these folders. Run this command from the todo-turbo/ directory to remove the apps/web and apps/docs folders from the apps folder.

rm -rf apps/web apps/docs

3. Installing React router v7 for frontend

Now the apps/ directory is empty and we will install react router v7 here in a folder with the name frontend and honojs in a folder with the name backend.

To install React router v7, run this command inside the todo-turbo/apps directory

npx create-react-router@latest

Enter the name of the project as frontend.

After that make sure to not initiate the git repository. Since this is a monorepo we have to keep the git repository at the root directory.

Now install the dependencies by choosing yes.

And that's it. Your frontend is ready with React router v7.

How to remove the initialized git repository from frontend folder.

Don't worry if you accidentally initialized the git repository. You can remove it by following these steps. If you haven't initialized git you can skip to the next step.

Go to the frontend folder in your terminal.
Run this command

rm -rf .git

4. Installing hono.js as the backend

For the backend we will use hono, Hono is a lightweight and fast framework that has support for many javascript runtime. We will be using hono with node. From the apps/ directory run this command to start a hono project.

pnpm create hono@latest

Give the target directory a name of your choice. I will be naming it as backend.

Now for the template scroll down with the down arrow key and chose nodejs.

Now type 'y' to chose yes to install dependencies and chose pnpm as the package manager.
Now you are all set with the backend directory.

The apps directory has now two folders: frontend and backend. Explore these directories to get familiar with the code.

5. Setting up Prisma

We will setup prisma in the packages directory, this will allow us to share the types given by prisma across the whole monorepo.

Create a new folder named 'db' inside the packages folder. Now go into the todo-turbo/packages/db folder from the terminal and create a package.json file using the command.

pnpm init

Now we will have a package.json in this db folder. Change the value of the "name" key at the top of the file to "@repos/db". It is a convention to name internal packages in turborepo like this. You can name it however you want. Your package.json should look like:

{
  "name": "@repo/db",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now in this db folder we will install prisma. Run this command to install prisma and prisma client.

pnpm install prisma --save-dev
pnpm install @prisma/client

Now run pnpm prisma init to initialize prisma. This command will create a prisma/ directory in the db/ directory, a .env file and a .gitignore file. Open the schema.prisma file inside the prisma/ directory in a code editor. You will see something like this:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init

generator client {
  provider = "prisma-client-js"
  output   = "../generated/prisma"
}

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

Now we need to add models to define our tables in postgreSQL. For simplicity we will only have two models: User and Todo. Add these models to the schema.prisma file.

generator client {
  provider = "prisma-client-js"
  output   = "../generated/prisma"
}

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

model User {
  id        BigInt   @id @default(autoincrement())
  name      String   @unique
  todos     Todo[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Todo {
  id        BigInt   @id @default(autoincrement())
  task      String
  dueDate   DateTime
  user      User     @relation(fields: [userId], references: [id])
  userId    BigInt
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Now we need a postgreSQL instance to store data. You can use this article to install and get started with in your device, otherwise you can ask any LLM to provide you with the necessary steps.

After you setup postgreSQL in your computer, create a database. I will create a database named "todoturbo". You can name it however you want.

Now open the .env file inside the db folder using a code editor. It should look something like this.

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

Now replace johndoe in the DATABASE_URL with your username that you created during postgreSQL setup, replace randompassword with your password and replace mydb with your database name. After that save the file and generate the prisma client by running this command inside the db directory.

pnpm prisma generate

Now the prisma client is generated along with all the prisma types. Now to export these types and the prisma client we will need to define a entry point for this db package. We will do it by creating a index.ts file and exporting from there.

So create a folder "src" inside the "db" folder. Create a index.ts in this src folder. This index.ts will be our entry point.

Add these lines of code to the index.ts . It defines the prisma client and exports it.

import { PrismaClient } from "../generated/prisma/index.js";
const prisma = new PrismaClient({});
export default prisma;

Now to make this client available to other packages such as the backend package we will need to make some changes.

Add scripts and entrypoint to the package.json

{
  "name": "@repo/db",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "./dist/index.js",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js"
    },
    "./client": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js"
    }
  },
  "scripts": {
    "build": "pnpm run clean && pnpm run db:generate && tsc",
    "dev": "tsc -w",
    "clean": "rm -rf dist generated",
    "lint": "eslint . --ext .ts,.tsx",
    "db:generate": "prisma generate",
    "db:migrate:dev": "prisma migrate dev --name init",
    "db:studio": "prisma studio",
    "db:push": "prisma db push"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "prisma": "^6.8.2",
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "@prisma/client": "^6.8.2",
    "@repo/typescript-config": "workspace:*"
  }
}

Add a tsconfig.json file in the packages/db folder

{
  "extends": "@repo/typescript-config/base.json", 
  "compilerOptions": {
    "outDir": "./dist", 
    "rootDir": "./src", 
    "declaration": true, 
    "declarationMap": true, 
    "sourceMap": true, 
    "esModuleInterop": true, 
    "module": "NodeNext"
  },
  "include": ["src/**/*.ts"], 
  "exclude": ["node_modules", "dist"]
}

Let's go through this modified package.json . The scripts are pretty self explanatory. The "build" command builds all the dependencies and creates a dist/ folder. You can see that we have a new devDependency named "@repo/typescript-config". This is how we share libraries and code from internal packages in turborepo. The package "typescript-config" lies inside the packages folder and is named "@repo/typescript-config" in the package.json . The file packages/typescript-config/package.json should look like this.

{
  "name": "@repo/typescript-config",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  },
  "files": [
    "base.json",
  ]
}

Now run pnpm install from the root directory to install all the dependencies.

Modify turbo.json to build the repo

Now to build the repo we need to add output paths to turbo.json . Modify the turbo.json at the root directory to replace the default output paths.

{
  "$schema": "https://turborepo.com/schema.json",
  "ui": "tui",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
      "outputs": ["dist/**", "build/**", "public/build/**"]
    },
  "lint": {
      "dependsOn": ["^lint"]
    },
    "check-types": {
      "dependsOn": ["^check-types"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

Let's go through all the modifications. The first modification is that we have replaced the default output paths with output paths for our react router v7 frontend, hono backend and prisma.

"outputs": ["dist/**", "build/**", "public/build/**"]

Now to import code from this db package to our backend package we need to install this internal package db in our backend package.

Installing db package in backend package.

We've already installed internal packages earlier and we will do it again in the same way. Open the package.json in the backend folder and add "@repo/db" in dependencies.

{
  "name": "backend",
  "type": "module",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js"
  },
  "dependencies": {
    "@hono/node-server": "^1.14.2",
    "hono": "^4.7.10",
    "@repo/db": "workspace:*"
  },
  "devDependencies": {
    "@repo/eslint-config": "workspace:*",
    "@types/node": "^20.11.17",
    "tsx": "^4.7.1",
    "typescript": "^5.8.3"
  }
}

We have also added "@repo/eslint-config" in the devDependencies to get the benefits of eslint-config. If you want you can also install "eslint-config" in the frontend package but I will keep it as an exercise.

Now run pnpm install from the root directory to install all the packages. After that run pnpm run build to build the dependencies.

Wrapping up!

We have successfully completed the setup of the project. Now let's wrap up Part 1 with this. We have built the foundation of our Todo app with the frontend, backend and a db folder. In the next part we will build the APIs with Hono. So stay tune for that. Till then you can check out this blog which teaches how to build a professional sign up page using tanstack form.

Follow me on X
Connect with me on Linkedin

How to build a professional sign up page using tanstack form and react?

PARTHIV SAIKIA — Mon, 04 Aug 2025 20:34:17 +0000

Introduction

The web is all about forms. From the signup form to the search field in your favorite website all are just forms. Web forms are built by using the html5 form tag. In react the JSX component form is used to build forms.

Problems in the form component

If you are building a simple login form with just two fields i.e username and password then the form component is sufficient. But there are many cases where you need to build a much complex form e.g building a form for creating a tour with images, dates, multiple places for a tour booking website. In such cases using the form component solely can become a headache. You may ask why? The reason is that in such forms you need to keep track of a lot of states like 'Is this dialog opened?', 'Is the value of Password and Confirm Password field same?'. It is also much harder to validate form values with the form component only and requires a lot of boilerplate.

Tanstack form for the rescue

Tanstack form is a modern headless, type safe and performant form library. It can be used with most modern frameworks such as react, svelte, angular, etc. It solves all the problems we discussed very efficiently. It gives builtin type safe state management APIs for interacting with the form fields.

What we will build

In this blog we will build a simple but professional signup form for our dream SaaS using react and tanstack form. The core features of the form will be:

Input validation with clear, real-time error messages for each field.
Secure password confirmation to ensure the user types their password correctly.
Submission state management to show a loading indicator and prevent multiple submissions.
End-to-end type safety to catch bugs between your code and your UI.

Prerequisites

Before you begin you are expected to:

Have node.js installed.
Have basic knowledge of typescript and react.

And that's it so let's begin the fun!!

Tech stack and project structure

We will use React for the frontend. For the backend we won't use any real API server but we will create a fake rest API using JSON-server.

For forms we will use the Tanstack form.

Scaffolding the project

Creating the project folder

Let's create the project folder using Vite. Navigate to the folder of your choice (e.g. code or projects) and run this command from the terminal npm create vite@latest signup-page -- --template react-ts. This will create a react project named signup-page and the language will be typescript since we have used the template react-ts.

I will refer to the signup-page folder as the root folder in the whole blog. Now navigate to the signup-page folder using the command
cd signup-page and run npm install to install all the dependencies. Now run npm run dev to initiate the development server. Now visit localhost:5173 and you will see this webpage.

Now let's start building our signup form. First of all install tanstack form using the command npm i @tanstack/react-form. Now remove the content of the file signup-page/src/App.tsx so that we can create our own components. You can also delete the signup-page/src/assets/ folder since we won't need the react.svg file present inside it.

Creating the form

Let's start by editing the signup-page/src/App.tsx file. Import tanstack form with this line.

import { useForm } from "@tanstack/react-form"

The useForm hook is used for creating a form instance.

Now create the main component in App.tsx like this

export default function SignupPage() {
  return <div>Signup Page</div>;
}

Creating the fake rest api server using JSON-server

Now let's pause the frontend development and wear the backend developer cap. Although we are not going to use any framework or any real database still we need to add some code to build fake Rest API end points.

Create a file db.json in the root folder. Just like a database we will define our entities in this file. Since we are creating a signup form our entity is users. Let's add a test user. Paste this code in db.json.

{
  "users": [
    {
      "name": "John Doe",
      "emailId": "johndoe@gmail.com",
      "password": "yourpassword",
      "dateOfBirth": "2000-01-01T00:00:00Z"
    }
  ]
}

This is for demonstration only and we will add users with the endpoints only.

To start the fake server run npx json-server --port 3000 db.json from the root directory. Now go to localhost:3000/users. You will see the users we defined in the db.json file like this:

You can also check this using Postman. I am going to use curl to fetch the users. Run this command from the terminal curl http://localhost:3000/users. You will get the output like this.

[
  {
    "name": "John Doe",
    "emailId": "johndoe@gmail.com",
    "password": "yourpassword",
    "dateOfBirth": "2000-01-01T00:00:00Z",
    "id": "f267"
  }
]

Congratulations!! You have successfully started the fake json-server and a GET endpoint too. Json-server makes our life easier because we don't need to create endpoints by ourselves.

Before moving on let's add a script to start the fake json-server so that we don't need to type the long command repetitively. Open your package.json file and add this line in the scripts section

"server": "npx json-server --port 3000 db.json"

Now go to the terminal where your json-server is running and press Ctrl + C to close it. Now run npm run server. Congratulations ! You have started the server again with a script.

Trying the POST /users endpoint

Now to create a new user we need to send a POST request with a body to the endpoint /users. The request body should contain fields like:
"name", "emailId", "password", "dateOfBirth". Since this a frontend focused blog and our main goal is to learn how to use tanstack form we won't dive into fundamentals such as "how to handle passwords securely?", "what are the good rest practices?". Run this command from the terminal

curl -X POST \
  -H "Content-Type: application/json" \
  -d '{"name": "James Maxwell", "emailId": "james985@gmail.com",
"password": "mypassword", "dateOfBirth": "2000-02-01T00:00:00Z"}' \
  http://localhost:3000/users

You will get the response as:

{
  "id": "b01f",
  "name": "James Maxwell",
  "emailId": "james985@gmail.com",
  "password": "mypassword",
  "dateOfBirth": "2000-02-01T00:00:00Z"
}

Now run curl http://localhost:3000/users and you will see the following response:

[
  {
    "name": "John Doe",
    "emailId": "johndoe@gmail.com",
    "password": "yourpassword",
    "dateOfBirth": "2000-01-01T00:00:00Z",
    "id": "f267"
  },
  {
    "id": "b01f",
    "name": "James Maxwell",
    "emailId": "james985@gmail.com",
    "password": "mypassword",
    "dateOfBirth": "2000-02-01T00:00:00Z"
  }
]

This response shows that we have successfully created a new user. Now go to the file db.json. You can now see that there is a new user in the users array.

{
  "users": [
    {
      "name": "John Doe",
      "emailId": "johndoe@gmail.com",
      "password": "yourpassword",
      "dateOfBirth": "2000-01-01T00:00:00Z",
      "id": "f267"
    },
    {
      "id": "b01f",
      "name": "James Maxwell",
      "emailId": "james985@gmail.com",
      "password": "mypassword",
      "dateOfBirth": "2000-02-01T00:00:00Z"
    }
  ]
}

Now since we have our endpoints ready let's develop the form.

Building the form with react and tanstack form

Go to the file App.tsx. Create a new form instance using the useForm hook like this

export default function SignupPage() {
  const form = useForm({
    defaultValues: {
      name: "",
      emailId: "",
      password: "",
      confirmPassword: "",
      dateOfBirth: "",
    },
    onSubmit: async ({ value }) => {
      console.log(value);
    },

  });
  return 
<div>
    <h1>Signup Page</h1>
    <form 
        onSubmit={(e) => {
            e.preventDefault();
            e.stopPropagation();
            form.handleSubmit();
         }}
    ></form>
</div>;
}

In the defaultValues property of the useForm hook we have defined all the fields of our signup form and initiated them as empty strings. These values will be used as the value of the name attribute of our input fields. e.g. <input name="emailId"/>.

The onSubmit property declares what will happen when the form gets submitted.

We also have added a form tag with its own onSubmit handler which just calls the form.handleSubmit function.

Let's add our first field i.e. the name field. Paste this component inside the form component.

<div>
    <label htmlFor="name">Name</label>
    <form.Field
        name="name"
        children={(field) => (
            <input
                id="name"
                name={field.name}
                value={field.state.value}
                onBlur={field.handleBlur}
                onChange={(e) => field.handleChange(e.target.value)}
                type="text"
                />
              )}
            />
 </div>

Let's go through the component line by line. The label tag is a standard html tag which is used semantically for displaying the information about an input field. After that we use the form instance that we created. The form instance provide a form.Field component which is used to create a Field for the form. The form.Field component has two mandatory properties: "name" and "children". The name property of the fields must match with the properties of the defaultValues property of the form instance. In this case we have kept the name as name. Now comes the most important property of the form.Field component the children property. This property will render the component that will be define inside it. Usually we render an input component inside it. The field argument in the function represents the field whose property the children is. We can access value of the field using field.state.value, the name as field.name and even errors and field.state.meta.errors. We have rendered an input component inside the children property. The value attribute of the input component is given the value of the field using field.state.value similarly the name attribute is given the value of field.name. The onChange property is required and without it the input component will not work. This is because without it the form.Field component doesn't know what it needs to do when the value of the input component changes.

Now let's add the other fields i.e. for email, password, confirm password and date of birth. Now your full App.tsx should look like this:

import { useForm } from "@tanstack/react-form";

export default function SignupPage() {
  const form = useForm({
    defaultValues: {
      name: "",
      emailId: "",
      password: "",
      confirmPassword: "",
      dateOfBirth: "",
    },
    onSubmit: async ({ value }) => {
      console.log(value);
    },
  });

  return (
    <div>
      <div>
        <h2>Create an Account</h2>
        <p>Join us and start your journey!</p>

        <form
          onSubmit={(e) => {
            e.preventDefault();
            e.stopPropagation();
            form.handleSubmit();
          }}
        >
          {/* Name Field */}
          <div>
            <label htmlFor="name">Name</label>
            <form.Field
              name="name"
              children={(field) => (
                <input
                  id="name"
                  name={field.name}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={(e) => field.handleChange(e.target.value)}
                  type="text"
                />
              )}
            />
          </div>

          {/* Email Field */}
          <div>
            <label htmlFor="emailId">Email</label>
            <form.Field
              name="emailId"
              children={(field) => (
                <input
                  id="emailId"
                  name={field.name}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={(e) => field.handleChange(e.target.value)}
                  type="email"
                />
              )}
            />
          </div>

          {/* Password Field */}
          <div>
            <label htmlFor="password">Password</label>
            <form.Field
              name="password"
              children={(field) => (
                <input
                  id="password"
                  name={field.name}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={(e) => field.handleChange(e.target.value)}
                  type="password"
                />
              )}
            />
          </div>

          {/* Confirm Password Field */}
          <div>
            <label htmlFor="confirmPassword">Confirm Password</label>
            <form.Field
              name="confirmPassword"
              children={(field) => (
                <input
                  id="confirmPassword"
                  name={field.name}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={(e) => field.handleChange(e.target.value)}
                  type="password"
                />
              )}
            />
          </div>

          {/* Date of Birth Field */}
          <div>
            <label htmlFor="dateOfBirth">Date of Birth</label>
            <form.Field
              name="dateOfBirth"
              children={(field) => (
                <input
                  id="dateOfBirth"
                  name={field.name}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={(e) => field.handleChange(e.target.value)}
                  type="date"
                />
              )}
            />
          </div>

          {/* Submit Button */}
          <div>
            <button type="submit">Sign up</button>
          </div>
        </form>
      </div>
    </div>
  );
}

All the other fields just follow the same pattern as the name field and works the same way. We also have added a button to submit the form. Now visit localhost:5173 and you will see something like this

The form is not looking that good. So let's add our own styles and make it beautiful. We will use tailwindcss for this.

Installing tailwindcss with vite

Run npm install tailwindcss @tailwindcss/vite from the root directory to install tailwindcss. Now open your vite.config.ts file and edit it to make it look like this

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Now open index.css and remove all of its content and add this line to the top of it.

@import "tailwindcss";

Now you are ready to add styles using tailwindcss. You are free to style the form on your own. I am styling it like this

import { useForm } from "@tanstack/react-form";

export default function SignupPage() {
  const form = useForm({
    defaultValues: {
      name: "",
      emailId: "",
      password: "",
      confirmPassword: "",
      dateOfBirth: "",
    },
    onSubmit: async ({ value }) => {
      console.log(value);
    },
  });

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl w-full space-y-8">
        <div className="text-center">
          <h2 className="text-3xl font-bold text-gray-900">
            Create an Account
          </h2>
          <p className="mt-2 text-sm text-gray-600">
            Join us and start your journey!
          </p>
        </div>

        <form
          onSubmit={(e) => {
            e.preventDefault();
            e.stopPropagation();
            form.handleSubmit();
          }}
          className="bg-white shadow-lg rounded-lg p-8 space-y-6"
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
            {/* Name Field */}
            <div className="space-y-1">
              <label
                htmlFor="name"
                className="block text-sm font-medium text-gray-700"
              >
                Name
              </label>
              <form.Field
                name="name"
                children={(field) => (
                  <input
                    id="name"
                    name={field.name}
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={(e) => field.handleChange(e.target.value)}
                    type="text"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  />
                )}
              />
              <div className="h-5"></div>
            </div>

            <div className="space-y-1">
              <label
                htmlFor="emailId"
                className="block text-sm font-medium text-gray-700"
              >
                Email
              </label>
              <form.Field
                name="emailId"
                children={(field) => (
                  <input
                    id="emailId"
                    name={field.name}
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={(e) => field.handleChange(e.target.value)}
                    type="email"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  />
                )}
              />
              <div className="h-5"></div>
            </div>

            <div className="space-y-1">
              <label
                htmlFor="password"
                className="block text-sm font-medium text-gray-700"
              >
                Password
              </label>
              <form.Field
                name="password"
                children={(field) => (
                  <input
                    id="password"
                    name={field.name}
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={(e) => field.handleChange(e.target.value)}
                    type="password"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  />
                )}
              />
              <div className="h-5"></div>
            </div>

            <div className="space-y-1">
              <label
                htmlFor="confirmPassword"
                className="block text-sm font-medium text-gray-700"
              >
                Confirm Password
              </label>
              <form.Field
                name="confirmPassword"
                children={(field) => (
                  <input
                    id="confirmPassword"
                    name={field.name}
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={(e) => field.handleChange(e.target.value)}
                    type="password"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  />
                )}
              />
              <div className="h-5"></div>
            </div>

            <div className="md:col-span-2 space-y-1">
              <label
                htmlFor="dateOfBirth"
                className="block text-sm font-medium text-gray-700"
              >
                Date of Birth
              </label>
              <form.Field
                name="dateOfBirth"
                children={(field) => (
                  <input
                    id="dateOfBirth"
                    name={field.name}
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={(e) => field.handleChange(e.target.value)}
                    type="date"
                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  />
                )}
              />
              <div className="h-5"></div>
            </div>
          </div>

          <div className="pt-4">
            <button
              type="submit"
              className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
            >
              Sign up
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

Now our form looks like this

Now since our form is looking good let's focus on enhancing the UX by validating the data so that the user don't submit wrong data.

Validation is done in tanstack form either in form level or field level. You can chose when to do the validation e.g. onSubmit, onBlur, onChange. Validation can be done by using the callback functions: onChange, onSubmit, onBlur either at the field level or at the form level. The best part about validation in tanstack form is that it allows asynchronous validation too. Let's write our first validator in tanstack form.

Validation in tanstack form

Let's start by validating the name field. We would want that the name of the user should be longer than 3 characters, it should not contain any number and it should not contain any special characters. We will use onChange callback for validating the rules:

name should not contain any number.
name should not contain any special characters.

Let's implement the first rule. We can implement both the rules using regular expressions. You can learn about regular expressions here.

Create a new directory helpers/ in signup-page/src. This directory will contain the helper functions. Create a new file hasNumber.ts with the following content.

export default function hasNumber(value: string) {
  return /\d/.test(value);
}

// hasNumber('abc') => false
// hasNumber('xyz12') => true

This function checks if the argument value contains any digit. Now import it in App.tsx like this

import hasNumber from "./helpers/hasNumber";

Now we will add a field level validation on the field name. Replace the form.Field component of the name field with this

<form.Field
    name="name"
    validators={{
        onChange: ({ value }) => {
            if (hasNumber(value)) {
                return "Name cannot contain digit.";
             }
             return undefined;
        },
    }}
    children={(field) => (
        <>
           <input
            id="name"
            name={field.name}
            value={field.state.value}
            onChange={(e) => field.handleChange(e.target.value)}
            type="text"
            className="w-full px-3 py-2 border border-gray-300             rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
          {!field.state.meta.isValid && (
              <em className="text-red-400" role="alert">
                  {field.state.meta.errors.join(", ")}
              </em>
          )}
       </>
     )}
 />

The changes are we have added a callback onChange to the validators property of the form.Field component. The onChange callback takes the current value of the field and returns an string if it has a digit. The string is added to the errorsMap of the field. After that to view the error message we have added a new element just below the input element. The <em> element is conditionally rendered if there is any error in the field. We can keep track of the error state by checking the property field.state.meta.isValid. The errors are present as an array and can be accessed by the property field.state.meta.errors. We are just joining them using the Array.prototype.join method.

Now if you type a digit in the name field you will see an error just below it like this

Now let's add the other rule i.e. name should not contain any special characters.

Create another file hasSpecialChar.ts in helpers/ directory with the following content.

export default function hasSpecialCharacters(value: string) {
  // This regex looks for any character that is NOT a-z, A-Z, or 0-9
  const specialChars = /[^a-zA-Z0-9\s]/;
  return specialChars.test(value);
}

This function returns true if the string contains any characters other than [0-9], [a-z], [A-Z].

Now to use it on the name field add an or condition to the onChange callback.

onChange: ({ value }) => {
    if (hasNumber(value) || hasSpecialCharacters(value)) {
        return "Name cannot contain digit or special characters.";
    }
    return undefined;
}

Now if you type any digit or special character you will get the error message which says that Name cannot contain digit or special characters.

Now we will add an onBlur callback. It will check if the name is longer than 3 characters or not.

In the validators property add the onBlur callback below the onChange validator.

onBlur: ({ value }) => {
    if (value.length < 3) {
        return "Name must be longer than 3 characters.";
    }
    return undefined;
}

Also in the input component add the onBlur attribute as field.handleBlur.

The whole form.Field component should look like this

<form.Field
  name="name"
  validators={{
    onChange: ({ value }) => {
      if (hasNumber(value) || hasSpecialCharacters(value)) {
        return "Name cannot contain digit or special characters.";
      }
      return undefined;
    },
    onBlur: ({ value }) => {
      if (value.length < 3) {
        return "Name must be longer than 3 characters.";
      }
      return undefined;
    },
  }}
  children={(field) => (
    <>
      <input
        id="name"
        required
        name={field.name}
        value={field.state.value}
        onBlur={field.handleBlur}
        onChange={(e) => field.handleChange(e.target.value)}
        type="text"
        className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      />
      {!field.state.meta.isValid && (
        <em className="text-red-400" role="alert">
          {field.state.meta.errors.join(", ")}
        </em>
      )}
    </>
  )}
/>

The syntax of the onBlur callback is similar to the onChange callback. We also have added required attribute to the input element so that we get html5 validation and the form can't be submitted without this field.

Now if you enter a name with less than 3 characters and focus on any other field you will get an error like this

Now let's focus on the email field. We want the following validations rule on the email field:

All emails should be unique i.e. if an user has already registered with an email, the same email can't be used again.
The email should be in proper format.
Email field shouldn't be empty. (We don't need tanstack form validation for this since html5 validation is sufficient.)

Asynchronous validation in tanstack form

To implement the first validation we need to check in our database if the email that is being typed by the user already exists. Since this is a operation to be done over network requests we need to use asynchronous validation.

For asynchronous validation we will use the onChangeAsync callback.

To make network request to the json-server we will use axios. So install it using the command
npm install axios.

Create a new file existingEmail.ts in the helpers/ directory with the following content

import axios from "axios";
export default async function existingEmail(value: string) {
  const response = await axios.get(
    `http://localhost:3000/users?emailId=${value}`,
  );
  return response.data.length !== 0;
}

Json-server provide endpoints based on queries on its own and we don't need to create a separate endpoint for fetching users with the given email. Before using this code let's test the endpoint from the terminal to get a better understanding of it.

Run this code from the terminal

 curl http://localhost:3000/users?emailId=james985@gmail.com

You will get the following result

[
  {
    "id": "b01f",
    "name": "James Maxwell",
    "emailId": "james985@gmail.com",
    "password": "mypassword",
    "dateOfBirth": "2000-02-01T00:00:00Z"
  }
]

Since we have an user with the email james985@gmail.com we got this result. Now if we try with a non existing email we will get nothing.
Run this code curl http://localhost:3000/users emailId=james100@gmail.com. The result is just an empty array.

Now let's integrate the existingEmail function with tanstack form. Add a new validators property in the form.Field component of the email field. Now add onChangeAsync callback to this validators property like this

<form.Field
    name="emailId"
    validators={{
        onChangeAsync: async ({ value }) => {
            if (await existingEmail(value)) {
                return "Email already in use";
            }
            return undefined;
        },
        onChangeAsyncDebounceMs: 1000,
    }}
    children={(field) => (
        <>
            <input
                id="emailId"
                name={field.name}
                required
                value={field.state.value}
                onChange={(e) => field.handleChange(e.target.value)}
                type="email"
                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
           />
           {!field.state.meta.isValid && (
               <em className="text-red-400" role="alert">
                   {field.state.meta.errors.join(", ")}
               </em>
           )}
        </>
     )}
/>

We have use the existingEmail function wrapped in an asynchronous function. We have used standard async/await syntax. We also have used the onChangeAsyncDebounceMs callback to get builtin debouncing so that we can rate the limit of hitting the endpoint. Now if you type james985@gmail.com in the email field you will get an error.

Now let's implement the next rule i.e. checking if the email is in correct format. For this we will again use a regular expression. Create a new file isValidEmail.ts in helpers/ directory with the following content.

export default function isValidEmail(value: string) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(value);
}

This regular expression checks if the string is of the email format or not. It checks for rules such that:

whether '@' is present or not.
if '@' appears for more than one time.
whether it has a top level domain or not.

Now use this function in the onChange callback in the email field like this

onChange: ({ value }) => {
    if (!isValidEmail(value)) {
        return "Please provide a valid email.";
    }
    return undefined;
}

Now if we don't provide '@' in our email it will throw us an error.

We also have added required attribute in the input element so that it doesn't allow the form to submit if we don't provide any data. If you want you can add an onBlur callback to implement the error that field cannot be empty.

Now one of the most important aspect of web security is a strong password and we as a good developer should never allow our users to submit a weak password. A strong password on the least should follow these criteria:

A minimum of 8 characters.
It must contain an uppercase letter.
It must contain an lowercase letter.
It must contain a number.
It must contain a special character.

Let's implement all of these one by one. Again our rescue is regular expression.

Create a new file password.ts in the helper/ directory. Paste the following content in it.

export function checkPassword(value: string): string | null {
  const errors = [];

  if (value.length < 8) {
    errors.push("Password must be at least 8 characters long.");
  }

  if (!/[A-Z]/.test(value)) {
    errors.push("Password must contain at least one uppercase letter.");
  }

  if (!/[a-z]/.test(value)) {
    errors.push("Password must contain at least one lowercase letter.");
  }

  if (!/[0-9]/.test(value)) {
    errors.push("Password must contain at least one number.");
  }

  if (!/[!@#$%^&*(),.?":{}|<>]/.test(value)) {
    errors.push("Password must contain at least one special character.");
  }

  if (errors.length > 0) {
    return errors.join(" ");
  }

  return null;
}

This function defines multiple regular expressions and it test them against the value string. The meaning of the regular expressions can be understood by the error message they are returning. We are pushing the errors in to a errors array and then at the end we are returning a string by joining the join method. If there is no error we return null.

This function is little bit different as you can see since it doesn't return a boolean like our earlier helper functions. So it will be used differently than others. The onChange callback will still be the same but we will directly return the value of checkPassword function instead of using an if condition. The form.Field component should now look like this.

<form.Field
    name="password"
    validators={{
        onChange: ({ value }) => {
            return checkPassword(value)?.split(".");
        },
    }}
    children={(field) => (
    <>
        <input
            id="password"
            name={field.name}
            value={field.state.value}
            onBlur={field.handleBlur}
            onChange={(e) => field.handleChange(e.target.value)}
            type="password"
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
         />
         {!field.state.meta.isValid && (
             <ul className="text-red-500" role="alert">
                 {field.state.meta.errors.map((error) => (
                     <li>
                         <div>{error}</div>
                      </li>
                  ))}
             </ul>
          )}
      </>
    )}
 />

Since checkPassword function is returning a string we have extracted into multiple strings by using the split function. Now we have an array of errors which we are showing as a list by mapping over them. Now the errors are shown below the password field in a list.

For a better experience we can show the users whether the value of password field and the confirm password are the same. We can achieve this by making the confirm password field listen to the password field. We can achieve this using the onChangeListenTo property in the validators property of the form.Field component of the confirm password field. The new form.Field component looks like this

<form.Field
    name="confirmPassword"
    validators={{
        onChangeListenTo: ["password"],
        onChange: ({ value, fieldApi }) => {
            if (value !== fieldApi.form.getFieldValue("password")) {
                return "Passwords don't match";
            }
            return undefined;
         },
     }}
     children={(field) => (
         <>
             <input
                 id="confirmPassword"
                 required
                 name={field.name}
                 value={field.state.value}
                 onChange={(e) =>field.handleChange(e.target.value)}
                 type="password"
                 className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
             {!field.state.meta.isValid && (
                 <em className="text-red-500" role="alert">
                     {field.state.meta.errors.join(", ")}
                 </em>
              )}
         </>
     )}
              />

The validators property in this field is little bit different since we are using a new callback and even the onChange callback is used differently. The line onChangeListenTo: ["password"] states that the confirm password field is listening to any changes in the password field. After that let's look at the line

onChange: ({ value, fieldApi }) => {
    if (value !== fieldApi.form.getFieldValue("password")) {
        return "Passwords don't match";
    }
    return undefined;
}

This is mostly same as our older onChange callbacks. The only change is that we are accessing the field and the form using the fieldApi. The fieldApi.form.getFieldValue("password") method will give us the value of the password field. Now if the values of the password field and the confirm password do not match error will be shown.

Now our final field is remaining which is our date of birth field. The range of the dates that will be shown in the calendar can be controlled by the attributes such as min and max in the input component. Since the date of birth must be before the current date so we can set the max as the date of today.

We can create the string date for the current date by the following code.

  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, "0");
  const day = String(today.getDate()).padStart(2, "0");
  const maxDateString = `${year}-${month}-${day}`;

Then we can set max attribute of the input component as maxDateString. This won't allow us to select any date which comes after today.

Now let's say we want our users to be atleast 18 years old. We can implement this using the onChange callback. Add this onChange callback to the validators property.

onChange: ({ value }: { value: string }) => {
    if (!value) {
        return "Date is required";
    }

    const birthDate = new Date(value);
    const currentDate = new Date();

    if (isNaN(birthDate.getTime())) {
        return "Please enter a valid date";
    }

    const ageInDays = (currentDate.getTime() - birthDate.getTime()) /(1000 * 60 * 60 * 24);

    if (ageInDays < 18 * 365.25) {
        return "You must be older than 18";
    }

    return undefined;
},
}}

This function first check whether the date is present or not and then converts them into date objects. Then it subtracts the time of the two dates which returns time in milliseconds. Now it is divided by to get the time in days. And then we compare it with the number of days in 18 years.

Now all our fields are done. Now we would like to disable our submit button when there are any errors. So replace your button component with this.

<form.Subscribe
    selector={(state) => [state.canSubmit, state.isSubmitting]}
    children={([canSubmit, isSubmitting]) => (
        <button
            type="submit"
            disabled={!canSubmit}
            className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
                >
            {isSubmitting ? `...` : `Sign up`}
        </button>
      )}
/>

The form.Subscribe component can listen to any changes in the form values and is used mostly for listening to the form and make UI changes according to it.

Now once you submit the form with correct values you can see that the form gets submitted and the values are logged into the console but we need to submit these values to the json-server. We can do it by changing our onSubmit callback in our form instance. We use axios to submit the data to the post endpoint of our json-server like this

onSubmit: async ({ value }) => {
      await axios.post(`http://localhost:3000/users`, value);
      alert("Signup successfull");
    }

Now fill the form correctly and submit it. An alert will pop up with the message "Signup successfull". Now go to the db.json file and you will see a new user with the values you just filled up in the form.

Wrapping up !!

Congratulations on building your first type safe and performant form using tanstack form which has superb UX like real time validation and async email checks.

All of the above code is available on Github.

If you found this guide helpful let me know by dropping some cool comments and questions. I will be really happy to answer them. Follow for more such upcoming blogs and comment if you want a blog on a particular topic. Until then you can

Follow me on X
Connect with me on Linkedin