A modern, responsive banking dashboard built with React and Tailwind CSS. This project simulates a real-world retail banking interface that features account summaries, transaction history, spending analytics and more.
- Account summary with balance and account details
- Income vs Expenses bar chart (Recharts)
- Search and filter transactions in real time
- Recent transactions list with color-coded credits and debits
- Fully responsive layout for mobile and desktop
- Navbar with notifications and profile section
- React — UI component library
- Vite — Fast development build tool
- Tailwind CSS — Utility-first CSS framework
- Recharts — Charting library for React
- Node.js v22+
- npm
# Clone the repository
git clone https://github.com/TheNarh/Banking-Dashboard.git
# Navigate into the project
cd banking-dashboard
# Install dependencies
npm install
# Start the development server
npm run devThen open http://localhost:5173 in your browser.
src/ ├── components/ │ ├── Navbar.jsx # Top navigation bar │ ├── AccountCard.jsx # Account holder info and balance │ ├── SummaryCard.jsx # Monthly income vs expenses summary │ ├── SpendingChart.jsx # Bar chart visualization │ └── TransactionList.jsx # Searchable, filterable transaction list ├── App.jsx # Root component ├── main.jsx # App entry point └── index.css # Global styles + Tailwind
- Dark mode toggle
- Authentication screen (login page)
- More chart types (line chart, pie chart)
- Transaction categories with icons
- Export transactions as CSV
Ludwig Narh
- GitHub: @TheNarh
- Website: ludwignarh.vercel.app