Hermes - Online Banking Application

Hermes is a modern online banking application designed to provide users with a seamless and secure banking experience. This project demonstrates a full-stack application with features like user authentication, bank management, payment transfers, and transaction history.

Features

• User Authentication: Secure sign-up and sign-in processes using Appwrite.
• Bank Account Integration: Connect and fetch data from bank accounts using Plaid.
• Payment Transfer: Facilitates secure and easy money transfers between accounts using Dwolla.
• Transaction History: View detailed history of all transactions.
• Responsive Design: Optimized for various devices.

Technologies Used

• Next.js: React framework for production.
• TypeScript: Strongly typed JavaScript.
• Tailwind CSS: Utility-first CSS framework for rapid UI development.
• Appwrite: Open-source backend server for authentication, databases, and more.
• Plaid: API for connecting bank accounts and accessing financial data.
• Dwolla: API for facilitating ACH transfers.

Setup and Installation

To get started with the Hermes project, follow these steps:

1. Clone the repository:

   git clone https://github.com/gamzeozgul/hermes.git
   cd hermes

2. Install dependencies:

   npm install
   # or yarn install

3. Set up environment variables: Create a .env.local file in the root directory and add your environment variables based on the .env.example file.

   #NEXT
   NEXT_PUBLIC_SITE_URL=http://localhost:3000
   
   #APPWRITE
   NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
   NEXT_PUBLIC_APPWRITE_PROJECT=YOUR_APPWRITE_PROJECT_ID
   APPWRITE_DATABASE_ID=YOUR_APPWRITE_DATABASE_ID
   APPWRITE_USER_COLLECTION_ID=YOUR_APPWRITE_USER_COLLECTION_ID
   APPWRITE_ITEM_COLLECTION_ID=YOUR_APPWRITE_ITEM_COLLECTION_ID
   APPWRITE_BANK_COLLECTION_ID=YOUR_APPWRITE_BANK_COLLECTION_ID
   APPWRITE_TRANSACTION_COLLECTION_ID=YOUR_APPWRITE_TRANSACTION_COLLECTION_ID
   NEXT_APPWRITE_KEY=YOUR_APPWRITE_API_KEY
   
   #PLAID
   PLAID_CLIENT_ID=YOUR_PLAID_CLIENT_ID
   PLAID_SECRET=YOUR_PLAID_SECRET
   PLAID_ENV=YOUR_PLAID_ENVIRONMENT (e.g., development, sandbox, production)
   PLAID_PRODUCTS=YOUR_PLAID_PRODUCTS (e.g., transactions, auth)
   PLAID_COUNTRY_CODES=YOUR_PLAID_COUNTRY_CODES (e.g., US)
   
   #DWOLLA
   DWOLLA_KEY=YOUR_DWOLLA_KEY
   DWOLLA_SECRET=YOUR_DWOLLA_SECRET
   DWOLLA_BASE_URL=YOUR_DWOLLA_BASE_URL
   DWOLLA_ENV=YOUR_DWOLLA_ENVIRONMENT (e.g., sandbox, production)

   Make sure to replace YOUR_... placeholders with your actual credentials.

4. Run the development server:

   npm run dev
   # or yarn dev

   Open http://localhost:3000 with your browser to see the result.

Demo Images

Here are some screenshots showcasing the application's features:

Demo 1

Demo 2

Demo 3

Demo 4

Notes

• This is a learning/demo project intended to showcase a full-stack flow.
• Plaid is configured via PLAID_ENV and is typically used in sandbox for development.
• Tokens and credentials are stored only for demo purposes; production apps should encrypt secrets and use a secure vault.
• encryptId in lib/utils.ts is simple obfuscation (base64) for demo use; production apps should use real encryption.

Key Takeaways

• Integrated third-party financial APIs (Plaid, Dwolla) into a full-stack flow.
• Built a secure auth + data pipeline using Appwrite and server actions.

Contact

For any questions or suggestions, please feel free to reach out.