Real-time transaction tracking • Multi-bank connectivity • Secure payment transfers
- Secure user authentication with Appwrite
- Protected routes and server-side rendering
- Session management with cookies
- Connect multiple bank accounts via Plaid
- Real-time bank account synchronization
- View balances across all connected accounts
- Visual bank cards with account details
- Secure money transfers between accounts using Dwolla
- Transfer validation and error handling
- Real-time transaction updates
- Transfer history tracking
- Total balance visualization with animated counters
- Interactive doughnut chart showing account distribution
- Recent transactions overview
- Top spending categories with progress indicators
- Complete transaction history with pagination
- Filter transactions by bank account
- Transaction categorization (Food & Drink, Transportation, Transfer, etc.)
- Status badges for different transaction types
- Search and sort capabilities
- Framework: Next.js 15.3 (App Router)
- UI Library: React 19
- Styling: Tailwind CSS 3.4
- Component Library: Radix UI
- Form Management: React Hook Form + Zod validation
- Charts: Chart.js & React ChartJS 2
- Animations: React CountUp
- Database: Appwrite
- Banking API: Plaid
- Payment Processing: Dwolla
- Error Tracking: Sentry
- Node.js 18+ installed
- Appwrite account and project
- Plaid developer account
- Dwolla developer account
- Clone the repository
git clone https://github.com/lemayan/BankApplication.git
cd ivybanking- Install dependencies
npm install- Set up environment variables
Create a .env.local file:
# Appwrite
NEXT_PUBLIC_APPWRITE_ENDPOINT=your_appwrite_endpoint
NEXT_PUBLIC_APPWRITE_PROJECT=your_project_id
APPWRITE_DATABASE_ID=your_database_id
APPWRITE_USER_COLLECTION_ID=your_user_collection_id
APPWRITE_BANK_COLLECTION_ID=your_bank_collection_id
APPWRITE_TRANSACTION_COLLECTION_ID=your_transaction_collection_id
NEXT_APPWRITE_KEY=your_appwrite_key
# Plaid
PLAID_CLIENT_ID=your_plaid_client_id
PLAID_SECRET=your_plaid_secret
PLAID_ENV=sandbox
# Dwolla
DWOLLA_KEY=your_dwolla_key
DWOLLA_SECRET=your_dwolla_secret
DWOLLA_BASE_URL=https://api-sandbox.dwolla.com
DWOLLA_ENV=sandbox
# Site
NEXT_PUBLIC_SITE_URL=http://localhost:3000- Run the development server
npm run devivybanking/
├── app/
│ ├── (auth)/ # Authentication pages
│ ├── (root)/ # Main application
│ ├── api/ # API routes
│ └── globals.css
├── components/ # React components
│ ├── ui/ # Shadcn UI components
│ ├── AuthForm.tsx
│ ├── BankCard.tsx
│ ├── DoughnutChart.tsx
│ └── ...
├── lib/
│ ├── actions/ # Server actions
│ ├── appwrite.ts
│ ├── plaid.ts
│ └── utils.ts
├── constants/
├── types/
└── public/
- Combined balance across all accounts
- Recent transactions
- Bank account cards
- Spending categories
- All connected bank accounts
- Individual account balances
- Quick transaction access
- Send money between accounts
- Secure Dwolla processing
- Instant balance updates
- Paginated transaction list
- Bank account filters
- Category indicators
- Server-side authentication
- Protected API routes
- Environment variable encryption
- Input validation with Zod
- XSS & CSRF protection
npm run dev # Development server
npm run build # Production build
npm run start # Production server
npm run lint # Run ESLintContributions are welcome!
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
Built with ❤️ using Next.js and modern web technologies