# Building a Paytm-Style Payments Frontend with React, TanStack Router, React Query, and Shadcn UI
### Prerequisites
Before building the frontend application, I already created the backend for this project.
The backend is a Paytm-style payment system built with Bun, TypeScript, Express, MongoDB, JWT authentication, and MongoDB transactions.
If you'd like to understand how the backend works or build it yourself, you can read the complete backend tutorial here:
**Backend Tutorial:**
[https://blog.realdev.club/building-a-paytm-style-payments-backend-with-bun-typescript-express-mongodb-transaction](https://blog.realdev.club/building-a-paytm-style-payments-backend-with-bun-typescript-express-mongodb-transaction)
* * *
### What Are We Building?
A mini Paytm-style wallet application where users can:
* Create an account
* Login securely
* View wallet balance
* Search other users
* Transfer money
### Tech Stack
* React
* TypeScript
* Vite
* Bun
* TanStack Router
* TanStack Query
* React Hook Form
* Axios
* Shadcn UI
* Tailwind CSS
* * *
### Step1: Project Setup
**Create the Project**
```plaintext
bun create vite
```
Select:
```plaintext
React
TypeScript
```
Install dependencies:
```plaintext
bun install
```
Run the development server:
```plaintext
bun run dev
```
* * *
* * *
### Step2: Setting Up TanStack Router
For routing, I decided to use TanStack Router. One thing I really like about TanStack Router it supports file-based routing. Routes are generated from files inside the `routes` directory, making navigation more scalable as applications grow.
I followed the official TanStack Router manual installation guide:
[TanStack Router Manual Installation Guide](https://tanstack.com/router/latest/docs/framework/react/installation/manual?utm_source=chatgpt.com)
After installation, let's understand a few core concepts.
* * *
**Understanding TanStack Router Fundamentals**
let's understand a few concepts that make it different from React Router.
1. **TanStack Router is File-Based**
Instead of manually defining routes like:
```plaintext
} />
} />
```
you create route files:
```plaintext
routes/
├── login.tsx
├── dashboard.tsx
```
TanStack Router automatically generates the route configuration from your file structure.
This approach is very similar to the App Router introduced in Next.js.
As your application grows, file-based routing becomes much easier to manage than maintaining a large route configuration file.
2\. `__root.tsx` **is the Root Layout**
Every TanStack Router application starts with a root route.
```plaintext
routes/
└── __root.tsx
```
All pages are rendered inside this route.
Think of it like:
```javascript
function App() {
return ;
}
```
`Outlet` is the placeholder where child routes render.
Example:
```javascript
function RootLayout() {
return (
<>
);
}
```
If a user visits:
```plaintext
/dashboard
```
TanStack Router renders:
```plaintext
```
This makes it easy to share layouts, navigation, and global components across multiple pages.
**3\. WHat is**
A small TanStack icon will appear in the browser during development. Clicking it opens the router inspector, making it easier to understand how routes are being resolved.
Since every page is rendered inside `__root.tsx`, placing the Devtools there makes them available throughout the entire application.
* * *
### Step 3: Setting Up Shadcn UI
For building the UI, I decided to use Shadcn UI.
Unlike traditional component libraries such as Material UI or Chakra UI, Shadcn UI doesn't install a large component package into your project. Instead, it generates component source code directly inside your application, giving you complete control over customization.
I followed the official installation guide:
* [Shadcn UI Installation Guide for Vite](https://ui.shadcn.com/docs/installation/vite#existing-project)
* * *
**Quick Tailwind CSS Refresher**
Since Shadcn UI relies heavily on Tailwind CSS, let's quickly revise some Tailwind fundamentals.
**What is Tailwind CSS?**
Tailwind CSS is a utility-first CSS framework.
Traditional frameworks such as Bootstrap provide pre-built components:
```plaintext
```
Tailwind takes a different approach by providing small utility classes that can be combined to build custom designs:
```plaintext
```
This gives much more flexibility while keeping styling close to the component.
**Common Utility Classes**
Background & Text Colors
```plaintext
```
* `container` creates a responsive container
* `mx-auto` centers it horizontally
* `px-4` adds horizontal padding
**Customizing Tailwind**
Tailwind provides default:
* Colors
* Fonts
* Spacing
* Breakpoints
These can be customized inside your configuration.
Example:
```plaintext
theme: {
colors: {
primary: "#3490dc",
},
}
```
Usage:
```plaintext
```
**Reusing Styles with @apply**
Instead of repeating utilities:
```plaintext
bg-blue-500 text-white px-4 py-2 rounded
```
You can create reusable classes:
```plaintext
.btn {
@apply bg-blue-500 text-white px-4 py-2 rounded;
}
```
Then use:
```plaintext
```
Tailwind's utility-first approach may feel unusual at first, but after building a few components, it becomes one of the fastest ways to create responsive and maintainable user interfaces.
* * *
### Step4: Creating Login and Signup Pages
Instead of building forms from scratch, I used the pre-built authentication blocks provided by Shadcn UI.
```plaintext
bunx --bun shadcn@latest add login-01
bunx --bun shadcn@latest add signup-01
```
These commands generated ready-to-use login and signup components that I customized for my application.
**Login Route**
```js
src/routes/index.tsx
```
```plaintext
import { createFileRoute } from "@tanstack/react-router";
import { LoginForm } from "@/components/login-form";
export const Route = createFileRoute("/")({
component: LoginPage,
});
function LoginPage() {
return (
);
}
```
* * *
**Connecting Pages with TanStack Router Links**
To navigate between Login and Signup pages without reloading the browser, I used TanStack Router's `Link` component.
**Inside Signup Form**
```js
src/components/signup-form.tsx
```
Import `Link`:
```javascript
import { Link } from "@tanstack/react-router";
```
Replace:
```javascript
Already have an account? Sign in
```
with:
```javascript
Already have an account?{" "}
Sign in
```
**Inside Login Form**
```js
src/components/login-form.tsx
```
Replace:
```javascript
Don't have an account?
Signup
```
with:
```javascript
Don't have an account?
Signup
```
* * *
### Form Handling with React Hook Form
For form state management and validation, I used React Hook Form.
Install it:
```plaintext
bun add react-hook-form
```
Import `useForm`:
```typescript
import { useForm } from "react-hook-form";
```
Initialize the form:
```javascript
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
```
Create a submit handler:
```typescript
const onSubmit = (data: SignupFormData) => {
console.log(data);
// signup mutation here
};
```
Update the form:
```typescript