Find Your Bank

Find Your Bank is a Next.js boilerplate that pairs the official with-tailwindcss example with an Indian bank directory application built on react-table, enabling users to search branches by location and look up bank details by IFSC code.

What is Find Your Bank?

Find Your Bank is a small application built with Next.js, Tailwind CSS, and react-table that serves as a functional starting point for building data-driven directories. It takes a city or place name as input and returns a list of banks located there, and it accepts an IFSC code to fetch details of a single bank. The project runs on the Next.js framework with server-side rendering, and it is maintained as part of the examples in the vercel/next.js repository.

Key Features

• Next.js framework — The project uses Next.js, a React framework that supports server-side rendering (SSR), as noted in the repository topics.
• Tailwind CSS v2.2 styling — Styling is handled with Tailwind CSS version 2.2, which includes the new Just-in-Time Mode for on-demand utility generation.
• react-table integration — The bank directory table is built with the react-table library, allowing sorting and pagination of bank records.
• Bank search by location — Users can enter a place in India and view all banks in that area.
• IFSC code lookup — Users can query the details of a specific bank branch using its IFSC (Indian Financial System Code).
• Quick start with create-next-app — The template can be bootstrapped with npx create-next-app --example with-tailwindcss with-tailwindcss-app or the Yarn equivalent.
• One-click Vercel deployment — The repository includes a Deploy with Vercel button for deploying directly to Vercel, with a link to Next.js deployment docs.

Who is it for?

• Next.js beginners — Developers who want to see a minimal, working integration of Tailwind CSS with Next.js and the Just-in-Time Mode.
• Indian citizens or travelers — People who need to locate bank branches in a specific Indian city or town.
• Developers building directories — Programmers who want a ready-made data-table template using react-table, with server-side rendering, to adapt for other directory-style apps.

What can you do with Find Your Bank?

• Find a bank branch by city: Enter a city name to see the list of all bank branches in that place.
• Fetch bank details by IFSC code: Input an 11-character IFSC code to get details of that particular bank branch.
• Deploy it live: Use the Vercel deploy button to publish the application to the web without configuring a server.

How does Find Your Bank work?

The app is bootstrapped using create-next-app with the with-tailwindcss example, which sets up a Next.js project with Tailwind CSS configured. After installation, the application uses react-table to render searchable bank data, and it leverages Tailwind's Just-in-Time Mode to generate only the utility classes used. For deployment, the provided Vercel button imports the repository and builds a live site.