💳 Next.js TypeScript Banking App

Demo

https//www.lightbanking.netlify.app

Description

A modern banking dashboard built with TypeScript + Next.js, featuring:

• 🏦 Add Bank Accounts (via Plaid)
• 💸 Transfer Funds between accounts
• 📜 List Transactions in a clean, visual UI
• 📊 Transaction Analytics with Chart.js
• 🔗 Backend powered by Appwrite, financial data via Plaid
• 🎨 UI built with TailwindCSS + Shadcn.
• 📈 Data visualization via Chart.js

---

Architecture Diagram

graph TD
    User[User Browser] --> FE[Next.js Frontend<br/>TypeScript + Tailwind]
    FE -->|API calls| Appwrite[Appwrite Backend<br/>Auth & Database]
    FE -->|Plaid Link| Plaid[Plaid API]
    Plaid -->|Transactions, Balance, Transfer| Banks[Bank Accounts]
    Appwrite -->|Store user tokens & metadata| DB[(Database)]
    FE -->|Chart.js| Charts[Transaction Analytics<br/>Spending Trends]

Loading

---

Tech Stack

• Frontend: Next.js 15, React.js 19 (TypeScript)
• UI: TailwindCSS + Shadcn UI
• Backend: Appwrite
• Finance API: Plaid (Transactions, Auth, Transfer API)
• Charts: Chart.js
• Deployment: Netlify

---

Getting Started

1. Clone the Repository```bashgit clone cd your-repo-folder

2. Download & install node.js

3. Install Dependencies

npm i

4. Set Up Environment

a. Create .env in the root direction of the project

b. Declare the variables of your .env like this:

c. Go on Plaid, create an account, and use your sandbox keys in your .env

d. Go on AppWrite:

• Create an account.
• Create a project.
• Create a database
• Create two collections: user & bank
• In user collection, create multipe attributes: (Everything you see on authentication page)
• In bank collection, create multipe attributes: (Based on Plaid structure)
• Copy & paste all keys on your .env
• These APIs will be used on your server-side Next.js application.

e. Come back in the project:

npm run dev