N
NEEHARIKA SAMARLA
You are a senior frontend engineer working at companies like Amazon, Uber, Google, and Myntra.Build a modern, professional
Finance Dashboard UI
for a frontend assignment. The goal is to create a clean, interactive, and visually attractive dashboard that helps users understand their financial activity.The implementation should use
React Tailwind CSS Recharts
and should be structured like a real production-quality frontend project.The dashboard must be
beautiful, responsive, and intuitive
, similar to modern fintech dashboards.PROJECT REQUIREMENTS1. Dashboard Overview Create a main dashboard showing a financial summary.Include:
Total Balance card
Total Income card
Total Expenses cardAdd visualizations:
One
time-based chart
(balance or spending trend over time)* One
categorical chart
(spending breakdown by category)Charts should be interactive and visually appealing.2. Transactions Section Create a transactions table showing:
Date
Amount
Category
Type (Income / Expense)Include functionality:
Search transactions
Filter by category or type
Sorting by amount or date3. Basic Role-Based UI Simulate roles in the UI.Provide a dropdown to switch roles:
Viewer → can only see data
Admin → can add new transactionsAdmin features:
Add transaction form
Edit transactions4. Insights Section Show meaningful insights from the financial data such as:
Highest spending category
Monthly income vs expenses comparison
Observations like "Food spending increased this month"Display these insights using clean cards or small charts.5. State Management Handle application state properly including:
Transactions data
Filters and search
User role
Chart dataUse
React Context API
or a simple state management solution.6. UI / UX ExpectationsThe design should:
Be clean and modern
Work on mobile, tablet, and desktop
Handle empty states (no transactions)
Have clear navigation and layout
Use smooth spacing and readable typography7. Optional Enhancements (Highly Recommended)Include:
Dark mode toggle
LocalStorage data persistence
Smooth animations or transitions
Export transactions as CSV
Responsive design
Modern fintech style cards
Sidebar navigation
Animated charts8. Technical QualityFollow good engineering practices:
Component-based architecture
Clean folder structure
Reusable components
Proper naming conventions
Well-organized state logic9. DocumentationGenerate a
README.md
including:
Project overview
Features implemented
Setup instructions
Technologies used
Explanation of role-based UI
Explanation of state managementTECH STACKUse:React (Vite)Tailwind CSSRechartsReact IconsPROJECT STRUCTURE/src/componentsDashboard.jsxSummaryCards.jsxTransactionsTable.jsxCharts.jsxInsights.jsxRoleSwitcher.jsxAddTransactionModal.jsx/contextFinanceContext.jsx/datamockTransactions.jsApp.jsxmain.jsxEnsure the UI is
beautiful and similar to real fintech dashboards used in modern SaaS products
.The final result should be a
complete working project that can run with:
npm installnpm run dev