SkillAgentSearch skills...

Bankirru

Seamless, Secured, and Responsive financial SaaS platform that connects to multiple bank accounts, displays transactions in real-time, allows users to transfer money to other platform users, and manages their finances altogether.

GenerateConvertImprove

Install / Use

/learn @deikairru/Bankirru
About this skill

Quality Score

0/100

Category

Design

Supported Platforms

Universal

README

<div align="center"> <br /> <a href="https://bankirru.vercel.app/" target="_blank"> <img src="https://i.imgur.com/rD2Fywd.png" alt="Project Banner"> </a> <br /> <div> <img src="https://img.shields.io/badge/-Next_JS-black?style=for-the-badge&logoColor=white&logo=nextdotjs&color=000000" alt="next.js" /> <img src="https://img.shields.io/badge/-TypeScript-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="typescript"/> <img src="https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4" alt="tailwindcss" /> <img src="https://img.shields.io/badge/-Appwrite-black?style=for-the-badge&logoColor=white&logo=appwrite&color=FD366E" alt="appwrite" /> <img src="https://img.shields.io/badge/-Sentry-white?style=for-the-badge&logo=Sentry&logoColor=white&color=%237A4889" alt="sentry" /> <img src="https://img.shields.io/badge/-Zod-white?style=for-the-badge&logo=Zod&logoColor=white&color=%23274D82" alt="zod" /> <img src="https://img.shields.io/badge/Chart.js-FE777B?style=for-the-badge&logo=Chart.js&logoColor=white" alt="chartjs" /> <img src="https://img.shields.io/static/v1?style=for-the-badge&message=shadcn%2Fui&color=000000&logo=shadcn%2Fui&logoColor=FFFFFF&label=" alt="shadcn" /> <img src="https://img.shields.io/badge/react--hook--form-EC5990?style=for-the-badge&logo=reacthookform&logoColor=white" alt="reacthookform" /> <img src="https://img.shields.io/badge/Plaid-black?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyNiIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGZpbGw9IiMxMTEiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0ibTE4LjYzNzMuMDAwMjAyLTE0LjU0OCAzLjgwOTcyLTQuMDA4IDE0LjYyODg0IDUuMDE0IDUuMTQ3OTctNS4wOTYgNS4wNjMxMyAzLjc3MyAxNC42OTM0OCAxNC40ODQgNC4wNDcwNyA1LjA5Ni01LjA2NDE0IDUuMDE0IDUuMTQ2OTYgMTQuNTQ3LTMuODA5NzIgNC4wMDgtMTQuNjMwODYtNS4wMTMtNS4xNDU5NSA1LjA5NS01LjA2MzEzLTMuNzcyLTE0LjY5MzQ4LTE0LjQ4Ni00LjA0NzA3LTUuMDk0IDUuMDYzMTN6bS04LjkyOCA2LjYyMzU4IDcuNjYzLTIuMDA3ODggMy4zNTEgMy40NDAwNi00Ljg4NyA0Ljg1NjA4em0xNi44MjIgMS40Nzg2NCAzLjQwNS0zLjM4MzUgNy42MyAyLjEzMjExLTYuMjI3IDYuMTg3MjZ6bS0yMS44NTkgOS4xMzU0NSAyLjExMS03LjcwNTI5IDYuMTI1IDYuMjg4MjYtNC44ODYgNC44NTYwOHptMjkuNTQ3LTEuMjQzMzEgNi4yMjctNi4xODgyNyAxLjk4NiA3Ljc0MDY0LTMuNDA0IDMuMzgzNXptLTE1LjUwMi0uMTI2MjUgNC44ODctNC44NTYwOCA0LjgwNyA0LjkzNTg3LTQuODg2IDQuODU2MDh6bS03LjgxNCA3Ljc2NDg4IDQuODg2LTQuODU2MDggNC44MDkgNC45MzU4Ny00Ljg4NyA0Ljg1NjA4em0xNS41MDMuMTI3MjYgNC44ODYtNC44NTYwOCA0LjgwOCA0LjkzNTg3LTQuODg3IDQuODU2MDh6bS0yMS44MzYgNi4xNjYwNSAzLjQwNi0zLjM4NDUxIDQuODA3IDQuOTM2ODgtNi4yMjUgNi4xODYyNXptMTQuMDIxIDEuNTk4ODMgNC44ODctNC44NTYwOCA0LjgwOCA0LjkzNTg3LTQuODg2IDQuODU2MDh6bTE1LjUwMi4xMjcyNiA0Ljg4Ny00Ljg1NjA4IDMuMzUxIDMuNDM5MDUtMi4xMTEgNy43MDUyOXptLTI0LjY1NiA4Ljk2OTgxIDYuMjI2LTYuMTg4MjcgNC44MDkgNC45MzU4Ny0zLjQwNSAzLjM4NDUxem0xNi44NDMtMS4yMDQ5MyA0Ljg4Ni00Ljg1NjA4IDYuMTI2IDYuMjg4MjYtNy42NjIgMi4wMDY4N3oiIG1hc2s9InVybCgjYSkiLz48L2c+PC9zdmc+&logoColor=black&color=white" alt="plaid" /> <img src="https://img.shields.io/badge/-Dwolla-white?style=for-the-badge&logo=data:image/webp;base64,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&logoColor=%23000000&color=%232D2D48" alt="dwolla" /> </div> <h3 align="center">A Fintech Bank Application</h3> <div align="center"> Bankirru is a comprehensive digital platform designed to provide users with a seamless and secure banking experience. It enables users to manage their finances, perform transactions, and access various banking services from the convenience of their devices. </div> </div>

📋 <a name="table">Table of Contents</a>

  1. 🤖 Introduction
  2. 🖼️ Preview Page
  3. ⚙️ Tech Stack
  4. 🔋 Features
  5. 🤸 Quick Start
  6. 📌 Demo Account
  7. 🚀 More

<a name="introduction">🤖 Introduction</a>

Built with Next.js, Bankirru is a financial SaaS platform that connects to multiple bank accounts, displays transactions in real-time, allows users to transfer money to other platform users, and manages their finances altogether. By developing this project, i gained hands-on experience in crafting secure, seamless, and responsive SaaS bank platform using

If you're cloned this project and need assistance or face any bugs, please contacted me.

<a name="preview">🖼️ Preview Page</a>

Homepage

<a href="https://bankirru.vercel.app/" target="_blank"> <img src="https://i.imgur.com/UqB4Vbh.png" alt="preview-home" /> </a>

Sign In

<a href="https://bankirru.vercel.app/sign-in" target="_blank"> <img src="https://i.imgur.com/6QVWgkE.png" alt="preview-signin" /> </a>

Sign Up

<a href="https://bankirru.vercel.app/sign-up" target="_blank"> <img src="https://i.imgur.com/uXqRx3z.png" alt="preview-signin" /> </a>

<a name="tech-stack">⚙️ Tech Stack</a>

  • Next.js
  • TypeScript
  • TailwindCSS
  • Appwrite
  • Sentry
  • Zod
  • Chart.js
  • ShadCN
  • React Hook Form
  • Plaid
  • Dwolla

<a name="features">🔋 Features</a>

👉 Authentication: An ultra-secure SSR authentication with proper validations and authorization

👉 Connect Banks: Integrates with Plaid for multiple bank account linking

👉 Home Page: Shows general overview of user account with total balance from all connected banks, recent transactions, money spent on different categories, etc

👉 My Banks: Check the complete list of all connected banks with respective balances, account details

👉 Transaction History: Includes pagination and filtering options for viewing transaction history of different banks

👉 Real-time Updates: Reflects changes across all relevant pages upon connecting new bank accounts.

👉 Funds Transfer: Allows users to transfer funds using Dwolla to other accounts with required fields and recipient bank ID.

👉 Responsiveness: Ensures the application adapts seamlessly to various screen sizes and devices, providing a consistent user experience across desktop, tablet, and mobile platforms.

and many more, including code architecture and reusability.

<a name="quick-start">🤸 Quick Start</a>

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

Cloning the Repository

git clone git@github.com:deikairru/bankirru.git
cd bankirru

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

#NEXT
NEXT_PUBLIC_SITE_URL=

#APPWRITE
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT=
APPWRITE_DATABASE_ID=
APPWRITE_USER_COLLECTION_ID=
APPWRITE_BANK_COLLECTION_ID=
APPWRITE_TRANSACTION_COLLECTION_ID=
APPWRITE_SECRET=

#PLAID
PLAID_CLIENT_ID=
PLAID_SECRET=
PLAID_ENV=
PLAID_PRODUCTS=
PLAID_COUNTRY_CODES=

#DWOLLA
DWOLLA_KEY=
DWOLLA_SECRET=
DWOLLA_BASE_URL=https://api-sandbox.dwolla.com
DWOLLA_ENV=sandbox

Replace the placeholder values with your actual respective account credentials. You can obtain these credentials by signing up on the Appwrite, Plaid and Dwolla

<a name="demo">📌 Demo Account</a>

For the purpose of testing you can use this Demo Account

Login Account (Free Demo)

  • Username
demo@bank.n

deikairru

View profile

View on GitHub
GitHub Stars5
CategoryDesign
Updated1y ago
Forks0
deikairru/bankirru

Languages

TypeScript

Security Score

82/100

Audited on Mar 26, 2025

No findings