Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jahanvidubey07/horizon
Horizon is a modern banking platform for everyone that consolidates all your bank cards in one place, allowing you to easily track your expenses, transfer money between cards, and exchange funds with others
https://github.com/jahanvidubey07/horizon
appwrite chartjs dwolla nextjs plaid react-hook-form shadcn tailwindcss typescript zod
Last synced: 26 days ago
JSON representation
Horizon is a modern banking platform for everyone that consolidates all your bank cards in one place, allowing you to easily track your expenses, transfer money between cards, and exchange funds with others
- Host: GitHub
- URL: https://github.com/jahanvidubey07/horizon
- Owner: jahanvidubey07
- Created: 2024-08-11T13:10:56.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-09-14T20:36:46.000Z (about 2 months ago)
- Last Synced: 2024-10-11T04:21:48.048Z (26 days ago)
- Topics: appwrite, chartjs, dwolla, nextjs, plaid, react-hook-form, shadcn, tailwindcss, typescript, zod
- Language: TypeScript
- Homepage: https://horizon-rust.vercel.app
- Size: 878 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Built with Next.js, Horizon 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.
- Next.js
- TypeScript
- Appwrite
- Plaid
- Dwolla
- React Hook Form
- Zod
- TailwindCSS
- Chart.js
- ShadCN
## 🔋 Features
👉 **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.
**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/)
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
