BudgetFroge Frontend

Modern, responsive financial management dashboard built with Next.js, TypeScript, and Tailwind CSS. Integrates with the Stellar blockchain for intelligent budget tracking and savings management.

Features

✨ Dashboard — Real-time financial overview with balance, income, expenses, and remaining budget 💰 Budget Management — Create, track, and manage budgets across categories 🎯 Savings Goals — Set financial targets with deadline tracking and progress visualization 📊 Transaction History — Detailed transaction records with filtering and export options 👛 Wallet Integration — Seamless Stellar wallet connection and asset management 📈 Analytics — Visual spending trends and financial insights 🌙 Dark Mode — Eye-friendly interface optimized for extended use

Tech Stack

• Framework: Next.js 14+ with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: Zustand
• Charts: Recharts
• Blockchain: Stellar SDK & Soroban
• HTTP Client: Axios
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn package manager

Installation

1. Navigate to the frontend directory

cd budgetfroge-frontend

2. Install dependencies

npm install

3. Environment variables are configured in .env.local

Development

Start the development server:

npm run dev

Open http://localhost:3000 in your browser.

Building for Production

npm run build
npm run start

Project Structure

src/
├── app/              # Next.js app router pages
├── components/       # Reusable React components
├── store/            # Zustand state management
├── lib/              # Utility libraries
└── utils/            # API and helper functions

Available Pages

• / — Home dashboard
• /dashboard — Financial overview and analytics
• /budgets — Budget management and tracking
• /savings — Savings goals management
• /transactions — Transaction history and filtering
• /wallet — Stellar wallet integration

Development Commands

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript type checking
npm run format       # Format code with Prettier

State Management

Uses Zustand for lightweight, efficient state management:

• Wallet Store: Address, connection status, balance
• Budget Store: User budgets and spending limits
• Savings Store: Savings goals and progress

Stellar & Blockchain Integration

• Connects with Stellar Testnet and Mainnet
• Uses Soroban for smart contract interaction
• Supports wallet address validation
• Retrieves account balances and transaction history

Environment Variables

Configure in .env.local:

NEXT_PUBLIC_API_URL=http://localhost:3001/api
NEXT_PUBLIC_STELLAR_NETWORK=testnet
NEXT_PUBLIC_STELLAR_HORIZON_URL=https://horizon-testnet.stellar.org

Contributing

1. Create feature branches: git checkout -b feature/your-feature
2. Make changes with test coverage
3. Run linter and type checks: npm run lint && npm run type-check
4. Format code: npm run format
5. Submit pull request with clear description

Performance Features

• Server-side rendering with Next.js
• Automatic code splitting
• Image optimization
• CSS purging with Tailwind
• Full TypeScript type safety

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT License

---

Built with ❤️ for financial empowerment on Stellar