Finance Dashboard

A clean, interactive, and fully responsive frontend dashboard built to visualize financial data, manage transactions, and demonstrate lightweight state management.

Live Demo

https://anxgcf.github.io/zorvyn-finance-dashboard/

Tech Stack

• HTML5: Semantic structure for accessibility and SEO.
• CSS3: Custom styling with Flexbox/Grid and media queries for mobile responsiveness. Zero external CSS libraries used to keep the bundle size minimal.
• Vanilla JavaScript (ES6+): Handles all DOM manipulation, filtering logic, and state changes.
• Chart.js: Used via CDN for rendering the categorical spending visualization.

Features Implemented

• Dashboard Overview: High-level summary cards (Total Balance, Income, Expenses) that update dynamically.
• Data Visualization: A responsive bar chart breaking down spending by category.
• Transaction Management: A dynamic table rendering mock financial data.
• Search & Filtering: Real-time client-side filtering by keyword (Description) and Category.
• Simulated RBAC (Role-Based Access Control): A header toggle switches between 'Viewer' and 'Admin' modes, conditionally rendering the "Add Transaction" UI.
• Single Page Application (SPA) Architecture: Custom JavaScript navigation allows users to seamlessly switch between the Dashboard and Transactions views without reloading the page.

Technical Decisions & Trade-offs

1. Vanilla JS over a Framework (React/Vue) For a dashboard of this specific scope and timeline, I opted for a vanilla JavaScript architecture rather than spinning up a heavy framework like React. This approach demonstrates a strong foundational understanding of the DOM, event listeners, and vanilla state management while keeping the project dependency-free and incredibly fast to load.

2. Client-Side State Management The application state (transactions, active filters, user role, current view) is managed entirely in memory via JavaScript variables. While perfect for this prototype, in a production environment with thousands of rows, I would offload sorting and filtering to backend API queries to maintain client performance.

3. Styling Approach Instead of using Tailwind or Bootstrap, I wrote custom CSS. This allowed me to demonstrate proficiency in responsive design principles (using media queries for mobile stacking) and layout control (Flexbox) without relying on utility classes.

Local Setup Instructions

To run this project locally, no build tools or package managers are required.

1. Clone the repository to your local machine.
2. Open the project folder.
3. Serve the index.html file using a local web server (such as the VS Code "Live Server" extension) to ensure the Chart.js CDN loads correctly.