A modern React frontend for Zairo, a secure role-based financial workspace for managing transactions and users.
Built with React, Vite, Axios, and Tailwind CSS.
Zairo UI communicates with the Zairo Backend API to provide a clean interface for managing financial data.
The application supports JWT authentication, role-based access, transaction management, dashboard analytics, and workspace administration.
| Layer | Technology |
|---|---|
| Framework | React |
| Build Tool | Vite |
| Styling | Tailwind CSS |
| Routing | React Router |
| HTTP Client | Axios |
| Authentication | JWT |
| Backend | Spring Boot REST API |
- Secure JWT Login
- Role-Based Dashboard
- Transaction Management
- Transaction Filtering
- Net Income & Expense Overview
- PDF Report Download
- Workspace User Management
- Protected Routes
- Responsive UI
git clone https://github.com/Aakashch-code/zairo-ui
cd zairo-uinpm installCreate a .env file in the root directory.
VITE_API_URL=http://localhost:8085Replace it with your deployed backend URL if necessary.
npm run devThe application will start on:
http://localhost:5173
npm run buildPreview production build:
npm run previewsrc/
├── components/
│ └── Sidebar.jsx
│
├── pages/
│ ├── authentication/
│ ├── workspace/
│ └── Dashboard.jsx
│
├── service/
│ └── api.jsx
│
├── App.jsx
├── App.css
└── main.jsx
The frontend communicates with the Zairo Backend API for:
- JWT Authentication
- Transaction Management
- Role-Based Authorization
- PDF Report Generation
- Workspace User Management
- Dark Mode
- Charts & Analytics
- Search & Pagination
- Mobile UI Enhancements
- Toast Notifications
- Better Loading States
Open for learning and portfolio purposes.
Built by Aakash Chauhan