A modern React banking application for managing accounts, transactions, loans, and financial reports with a clean, professional interface.
Live Demo · Report Bug · Request Feature
- Authentication — Secure JWT-based login and registration
- Account Management — Real-time balance, transaction history, and profile
- Transactions — Deposit, withdraw, and transfer funds seamlessly
- Loan System — Apply for and manage loans with reporting
- Financial Reports — Track income, expenses, and debts with visual insights
- Protected Routes — Secure navigation with authentication guards
- Modern UI — Built with Tailwind CSS, Radix UI, and responsive design
# Clone the repository
git clone https://github.com/JhonHander/estebanquito-front.git
cd estebanquito-front
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:5173 to see the app in action.
Environment is pre-configured in src/.env.development. Update VITE_API_BASE_URL if your backend runs on a different port.
| Frontend | Styling | State & Routing |
|---|---|---|
| React 18 | Tailwind CSS 4 | React Router v6 |
| TypeScript | Radix UI | React Context |
| Vite | Framer Motion | JWT Auth |
Additional: Axios, Recharts, Lucide Icons, TanStack Table
src/
├── features/ # Feature modules (auth, transactions, loans, reports)
│ ├── auth/ # Authentication logic & components
│ ├── account/ # Account management
│ ├── transactions/ # Transaction operations
│ ├── loans/ # Loan management
│ └── reports/ # Financial reporting
├── shared/ # Shared resources
│ ├── api/ # API client & services
│ ├── ui/ # Reusable components
│ └── lib/ # Utilities & helpers
├── routes/ # Route configuration & guards
└── app/ # Application setup
The application uses a feature-based architecture with clear separation of concerns. Each feature is self-contained with its own API services, models, and UI components.
graph TD
A[User] --> B[React App]
B --> C[Auth Guard]
C --> D[Protected Routes]
D --> E[Features]
E --> F[API Layer]
F --> G[Backend API]
E --> H[Account]
E --> I[Transactions]
E --> J[Loans]
E --> K[Reports]
Create src/.env.development:
VITE_API_BASE_URL=http://localhost:3000/api
VITE_APP_NAME=Estebanquito
VITE_APP_VERSION=1.0.0All environment variables must be prefixed with VITE_ to be accessible in the app.
| Variable | Description |
|---|---|
VITE_API_BASE_URL |
Backend API endpoint |
VITE_APP_NAME |
Application name |
VITE_APP_VERSION |
Version identifier |
npm run dev # Start development server (localhost:5173)
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint
npm run deploy # Deploy to GitHub Pages- Path Aliases — Use
@features,@shared,@appfor clean imports - TypeScript — Type-safe code with strict mode enabled
- Component Organization — Feature-based with api/ui/model separation
- Naming Conventions — Clear, descriptive names following React patterns
import { useAuth } from '@features/auth';
import { Button } from '@shared/ui/Button';
import { ROUTES } from '@shared/config/constants';- JWT token-based authentication with secure session storage
- Protected routes with automatic authentication guards
- Environment-based configuration (no hardcoded secrets)
- Input validation and XSS protection
- Secure API communication with Axios interceptors
Contributions are welcome! To contribute:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m 'Add your feature' - Push to the branch:
git push origin feature/your-feature - Open a Pull Request
MIT License. See LICENSE file for details.
Built with React, TypeScript, and Tailwind CSS