https://github.com/22ayaan/horizon-vault

A banking app with a finance management dashboard that connects multiple bank accounts, displays real-time transactions, and allows you to transfer money to other users on the platform using Next.js 14 and Plaid.
https://github.com/22ayaan/horizon-vault

Last synced: 10 days ago
JSON representation

A banking app with a finance management dashboard that connects multiple bank accounts, displays real-time transactions, and allows you to transfer money to other users on the platform using Next.js 14 and Plaid.

• Host: GitHub
• URL: https://github.com/22ayaan/horizon-vault
• Owner: 22ayaan
• License: gpl-3.0
• Created: 2024-08-01T09:06:32.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-26T21:48:32.000Z (3 months ago)
• Last Synced: 2024-11-07T01:29:12.639Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://horizon-vault.vercel.app
• Size: 1.97 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  


    

      

    

  


  

  


    

    

    

    

  


  
Horizon Vault - A Modern Finance Management Dashboard

  

   


     A finance management dashboard that integrates multiple bank accounts, displays real-time transactions, and enables seamless money transfers to other users on the platform.

   



## 📋 Table of Contents

If you are here for instructions on how to connect your bank account to the website, skip to [this](#instructions) section.

1. 👋 [Introduction](#introduction)

2. ⚙️ [Tech Stack](#tech-stack)

3. 🔥 [Features](#features)

4. ⚡️ [Quick Start](#quick-start)

5. 📸 [Snippets](#snippets)

6. 🧑‍🏫 [Instructions to connect bank account in Plaid Sandbox](#instructions)

## 👋 Introduction

Horizon Vault is a financial management platform built with Next.js that seamlessly integrates with multiple bank accounts, offering real-time transaction tracking, effortless money transfers between users, and robust financial management tools to streamline your finances.

Checkout Horizon Vault [here](https://horizonvault.vercel.app).

## ⚙️ Tech Stack

- Next.js

- TypeScript

- Appwrite

- Plaid

- Dwolla

- React Hook Form

- Zod

- TailwindCSS

- Chart.js

- ShadCN

## 🔥 Features

🚀 **Home Page**: Get a comprehensive overview of your account, including total balance across all connected banks, recent transactions, spending categories, and more.

🚀 **My Banks**: Access a detailed list of all connected banks, complete with respective balances and account information at your fingertips.

🚀 **Transaction History**: Easily navigate through your transaction history with advanced pagination and filtering options for different banks.

🚀 **Funds Transfer**: Effortlessly transfer funds to other accounts with Dwolla, using required fields and recipient bank IDs for smooth transactions.

🚀 **Authentication**: Experience ultra-secure SSR authentication with rigorous validations and authorization, safeguarding your financial data.

🚀 **Connect Banks**: Seamlessly link multiple bank accounts with Plaid integration, bringing all your finances under one roof.

🚀 **Real-time Updates**: Enjoy instant updates across all pages when new bank accounts are connected, keeping your information up-to-date.

🚀 **Responsiveness**: Experience a consistent user interface that adapts flawlessly across desktop, tablet, and mobile platforms, ensuring a seamless experience everywhere.

And so much more, including top-tier code architecture and reusability, designed to elevate your financial management experience.

## ⚡️ Quick Start

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

**Prerequisites**

Make sure you have the following installed on your machine:

- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) (Node Package Manager)

**Cloning the Repository**

```bash

git clone https://github.com/22ayaan/horizon-vault.git

cd horizon-vault

```

**Installation**

Install the project dependencies using npm:

```bash

npm install

```

**Set Up Environment Variables**

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

```env

#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](https://appwrite.io/?utm_source=youtube&utm_content=reactnative&ref=JSmastery), [Plaid](https://plaid.com/) and [Dwolla](https://www.dwolla.com/)

**Running the Project**

```bash

npm run dev

```

Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.

## 📸 Snippets

## 🧑‍🏫 Instructions to connect bank account in Plaid Sandbox

1. Press the `Continue` button to begin connecting a Plaid Sandbox Account.



2. You will be greeted with a secure Plaid pop-up like so. Click `Continue` to proceed:



3. You will get the option to choose from different banks to connect with (it doesn't matter which one you pick as they are all test versions):



4. The option I picked is Chase Bank and I was greeted with the following screen. Click `Continue to log in`:



5. You will be redirected to a new full screen window operated by Plaid sanbox under the name `First Platypus Bank`. **To sign in enter username: `user_good` and password: `pass_good`**. Then click `Sign in`.



6. The default option is `Mobile`. Just click `Get code`:



7. The Code field can be left blank. Just click `Submit`:



8. In the next screen choose either `Plaid Checking` or `Plaid Savings`:



9. Scroll down and check both consent boxes and click `Continue`:



10. Agree to the Terms and Conditions and click `Connect account information`:



12. Once thats complete, you should be greeted with this Success screen. Click `Continue` and you will be redirected to your dashboard with all your account data loaded: