Empower Bonds

Welcome to Empower Bonds, an open-source Next.js banking website template designed to provide a secure, modern banking experience. Built with better-auth for robust authentication, Redis for session management, and Shadcn UI for a sleek, customizable interface, this project is free for use by the open-source community or anyone looking to build a banking solution.

Overview

Empower Bonds integrates real-time financial data and secure user management, inspired by the dark-themed Figma design by Pragadesh (Figma File). It offers essential banking features with plans for a future dashboard.

Key Features

• Currency Converter:
  • Crypto <-> Currency conversion
• Authentication:
  • Registration
  • Login
  • Password Reset
  • Forgot Password
  • Email Verification
  • Blocked Account Handling
• Pages:
  • Home
  • About
  • Career
  • Security
  • Authentication Pages (Registration, Blocked Account, Password Reset, Forgot Password, Login, Email Verification)
• Technologies:
  • Next.js: Server-side rendering and routing.
  • better-auth: Secure authentication with token management.
  • Redis: Session storage and caching.
  • Shadcn UI: Customizable, accessible UI components.
• Future Plans: Integration of a user dashboard for account management, transactions, and settings.

Design Credits

This project is based on the Figma design by Pragadesh, available in the community: Banking Company Website UI Template. For inquiries, contact Pragadesh at pragadesh37v@gmail.com.

Getting Started

Prerequisites

• Node.js (v20.x or later)
• npm or pnpm
• Redis server (local or cloud instance)
• PostgreSQL database (local or cloud instance)
• Resend API (Sending transactional emails)

Installation

1. Clone the repository:

   git clone https://github.com/david-jerry/empower-bond-free-template.git
   cd empower-bonds

2. Install dependencies:

   npm install
   # or
   pnpm install

3. Set up environment variables:

   • Copy .env.example to .env.local:

     cp .env.example .env.local

   • Edit .env.local with your credentials and API keys (see .env.example for details).

4. Migrate Drizzle DB

   npm run push
   # or
   pnpm push

5. Start the development server:

   npm run dev
   # or
   pnpm dev

   Open http://localhost:3000 to view the app.

Configuration

Empower Bonds relies on environment variables for configuration. Below are the core variables defined in .env.example:

• Application Title: TITLE=Empower Bonds
• Telegram Configuration (optional): TG_TOKEN, TG_ADMIN
• Cloudinary Configuration (for image uploads): NEXT_PUBLIC_CLOUDINARY_NAME, NEXT_PUBLIC_CLOUDINARY_API, NEXT_PUBLIC_CLOUDINARY_SECRET
• Authentication Configuration: BETTER_AUTH_SECRET, NEXT_PUBLIC_BETTER_AUTH_URL=http://localhost:3000
• Redis Configuration: REDIS_URL=redis://localhost:6379
• Database Configuration: DATABASE_URL=postgresql://username:password@localhost/db_name
• Email Configuration: RESEND_API_KEY, NEXT_PUBLIC_FROM_EMAIL='Empower Bonds <account@domain.tld>'
• Financial Data APIs: EXCHANGERATE_KEY, COINLAYER_KEY
• Security Configuration: TRUSTED_ORIGIN=empowerbonds.online,empowerbonds.io, COMPLAINTS_EMAIL=info@domain.tld

Note: Keep sensitive values (e.g., BETTER_AUTH_SECRET, API keys) secret and exclude .env.local from version control (add to .gitignore).

Usage

• Navigate to the Home, About, Career, and Security pages via the navigation menu.
• Access authentication pages (e.g., /login, /register) to test registration, login, password reset, and email verification.
• Blocked account scenarios are handled with a dedicated page.
• Financial data integration (via EXCHANGERATE_KEY, COINLAYER_KEY) is available for future dashboard features.

Project Structure

empower-bonds/
├── src/
│   ├── app/                                # Main App
│   │   ├── global.css                      # Tailwindcss 4.0 Configuration and Styles
│   │   ├── favicon.ico                     # Favicon
│   │   ├── (static)/                       # Static Pages
│   │   │    ├── page.tsx                   # Home Page
│   │   │    ├── layout.tsx                 # Layout Template
│   │   │    ├── robots.tsx                 # Robots (SEO)
│   │   │    ├── sitemaps.tsx               # Sitemaps (SEO)
│   │   │    ├── about/                     # About Page
│   │   │    |   ├── page.tsx               
│   │   │    ├── careers/                   # Careers Page
│   │   │    |   ├── page.tsx               
│   │   │    ├── security/                  # Security Page
│   │   │    |   ├── page.tsx               
│   │   │    ├── auth/                      # Authentication Pages
│   │   │    |   ├── register/              # Registration page
│   │   │    |   |  ├── page.tsx               
│   │   │    |   ├── login/                 # Login page
│   │   │    |   |  ├── page.tsx               
│   │   │    |   ├── forgot-password/       # Forgot Password page
│   │   │    |   |  ├── page.tsx               
│   │   │    |   ├── reset-password/        # Password Reset page
│   │   │    |   |  ├── page.tsx               
│   │   │    |   ├── confirm-code/          # Email Verification page
│   │   │    |   |  ├── page.tsx               
│   │   │    |   ├── blocked/               # Blocked Account page
│   │   │    |   └──── page.tsx               
│   ├── components/                         # Shadcn Components, Custom Components and Forms
│   ├── db/                                 # Database Configuration
│   ├── hooks/                              # Custom Hooks
│   ├── lib/                                # Libraries (BetterAuth Setup)
│   ├── server/                             # Server actions
│   ├── types/                              # Typescript Types
│   └── config.ts                           # Configurations
│   └── middleware.ts                       # Middleware Configuration
├── public/                                 # Static assets
├── .env.example                            # Environment variable template
├── next.config.ts                          # Next.js configuration
├── package.json                            # Project dependencies and scripts
├── postcss.config.mjs                      # Postcss for tailwind
├── README.md                               # This file
├── LICENSE                                 # License Instructions
├── CONTRIBUTING.md                         # Contribution guidelines
└── CHANGELOG.md                            # Change log

Contributing

This project is open-source and welcomes contributions! Please see CONTRIBUTING.md for guidelines on how to contribute, report bugs, or suggest features. Add your name to the contributors list below after your first accepted pull request.

Contributors

• Jeremiah David (Initial Creator)

License

Empower Bonds is free to use under the Apache 2.0 License. See the LICENSE file for details.

Future Plans

• Dashboard Integration: Develop a dashboard for account management, transaction history, and financial insights using EXCHANGERATE_KEY and COINLAYER_KEY.
• Enhanced Security: Implement multi-factor authentication (MFA) and advanced fraud detection.
• Email Enhancements: Expand Resend email features for notifications and alerts.

Notes

• Test the Setup: Set up .env.local and run npm run dev to verify the app loads with "Empower Bonds" as the title.
• Environment Setup: Ensure Redis and PostgreSQL are running locally or update URLs for cloud services.
• Authentication: Test better-auth flows with BETTER_AUTH_SECRET and NEXT_PUBLIC_BETTER_AUTH_URL.
• Financial APIs: Integrate EXCHANGERATE_KEY and COINLAYER_KEY in the future dashboard.

Support

For issues or questions, open an issue on GitHub or contact the maintainer at jeremiahedavid@gmail.com.