💼 Finance Dashboard UI — Zorvyn Frontend Internship Assessment
Finance Dashboard Overview.
Welcome to the Finance Dashboard UI, built as part of the frontend internship assessment for Zorvyn. This project is a modern and interactive financial tracking application designed with a strong focus on clean UI, smooth user experience, and performance.
Preview 👀
🌐Live Demo

🚀 Project Approach
The goal of this project was not just to implement features, but to create a real-world usable dashboard with a polished interface and responsive design.
Instead of relying heavily on external UI libraries, I focused on building a custom UI using Tailwind CSS, ensuring better control over design and performance. The application structure is modular and clean, separating UI, logic, and state management for scalability.
State management is handled using React Context API, and mock data is used to simulate real backend behavior, including loading states for a more realistic experience.
✨ Key Features
🔐 1. Role-Based Access (Admin & Viewer)
Admin Controls View
- Dynamic UI based on roles
- Admin:
- Add, edit, delete transactions
- Export data in JSON format
- Viewer:
- Read-only access
- Can view analytics but cannot modify data
🎨 2. Custom Dashboard UI
UI Component Close-up
- Fully custom UI built with Tailwind CSS.
- Clean card-based layout (inspired by modern dashboards).
- Smooth hover effects and transitions.
- Subtle animations for better user experience.
📊 3. Data Visualization & Insights
Analytics Insight Charting
- Interactive charts using Recharts.
- Expense tracking by category.
- Daily and overall financial insights.
- Filtering and search functionality for transactions.
🌙 4. Dark Mode Support
Theme System Support
- Default dark mode for better visual comfort.
- Toggle between light and dark themes.
- Consistent UI across all components.
🛠 Tech Stack
- Frontend: React 18 + Vite.
- Styling: Tailwind CSS.
- Animations: Framer Motion.
- Charts: Recharts.
- Utilities: date-fns, clsx, tailwind-merge.
📦 Setup Instructions
To run this project locally:
-
Installation:
npm install
-
Development:
npm run dev
-
Open in browser:
http://localhost:5173
🤝🏼 Contributing
Contributions are welcome! Please fork the repository and create a pull request with your changes.
📌 Conclusion
This project demonstrates my ability to build a responsive, interactive, and user-friendly frontend application using modern React tools and best practices. It reflects my focus on clean UI, performance, and scalable architecture.
Authors ✍🏻
Developed as part of Zorvyn Frontend Internship Assessment.