Banking Dashboard React

Modern banking dashboard built with React + TypeScript consuming real .NET banking APIs.

---

Overview

This project simulates a modern digital banking platform with real authentication, account management, bank transfers, and transaction history.

The frontend consumes two independent .NET APIs:

• Auth API (.NET JWT Authentication)
• Core Banking API (.NET + Entity Framework)

The application was designed following modern enterprise architecture concepts.

---

Features

Authentication

• JWT Login
• Protected Routes
• Persistent Session
• Logout

Banking Operations

• Real Account Balance
• Deposit
• Withdraw
• Bank Transfer
• Real-Time Dashboard Updates

Transactions

• Transaction History
• Transfer In / Transfer Out
• Dynamic Transaction Table
• Currency Formatting
• Date Formatting

Dashboard UI

• Modern Dark Theme
• Responsive Layout
• Banking Cards
• Transfer Modal
• Dynamic Status Badges
• Sidebar Navigation

---

Tech Stack

Frontend

• React
• TypeScript
• Vite
• Axios
• TailwindCSS
• Lucide Icons

Backend APIs

• ASP.NET Core
• Entity Framework Core
• JWT Authentication
• SQLite

---

Architecture

React Frontend
      ↓
Auth API (.NET JWT)
      ↓
Core Banking API (.NET EF Core)
      ↓
SQLite Database

---

Project Structure

src/
 ├── api/
 ├── components/
 ├── pages/
 ├── routes/
 ├── App.tsx
 └── main.tsx

---

Screenshots

Dashboard

• Real balance
• Banking cards
• Transaction history
• Transfer modal

(Add screenshots here)

---

Running Locally

1. Clone Repository

git clone https://github.com/edemarcosta/banking-dashboard-react.git

2. Install Dependencies

npm install

3. Run Application

npm run dev

Frontend will run on:

http://localhost:5173

---

Backend APIs

This frontend depends on:

Auth API

https://localhost:7018

Core Banking API

https://localhost:7012

Both APIs must be running locally.

---

Example Transfer

{
  "fromAccountId": 5,
  "toAccountId": 4,
  "amount": 250,
  "description": "Portfolio transfer test"
}

---

Future Improvements

• Financial Charts
• Realtime Updates
• Docker Support
• Azure Deployment
• CI/CD Pipelines
• Notifications
• User Profile Management
• Mobile Responsiveness Improvements

---

Author

Developed by Edemar Costa Oliveira.

LinkedIn: https://linkedin.com/in/edemar-costa-oliveira

GitHub: https://github.com/edemarcosta

---

License

This project is for study and portfolio purposes.