finance-dashboard

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

finance-dashboard

★ 19 Open GitHub ↗

No description available.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Finance Dashboard UI

A realistic, functional frontend implementation of a Finance Dashboard built with React, Tailwind CSS, and Recharts.

## Getting Started

1. **Install dependencies:**
   ```bash
   npm install
   ```

2. **Run the development server:**
   ```bash
   npm run dev
   ```

## Project Overview

I approached this assignment with the goal of building a clean, intuitive, and performant dashboard while keeping the stack modern but practical. It deliberately avoids over-engineering—favoring native React features like `useContext` and `useReducer`/`useState` over heavy state management libraries like Redux, which felt unnecessary for the scope.

### Key Features Implemented:
- **State Management:** Handled via Context API (`FinanceContext.tsx`).
- **Data Visualizations:** Used `recharts` to render a time-based Income/Expense bar chart and a category-based pie chart.
- **Transactions List:** Fully functional search, filter (by type), and sort (by Date, Amount).
- **Role-Based Access:** Toggle between `viewer` and `admin` roles in the Header. When in "admin" mode, you get the ability to delete transactions from the table.
- **Insights:** A dynamic section at the top that calculates and displays the highest spending category and the largest single expense from the mock data.

## Folder Structure

```
src/
├── components/
│   ├── layout/            # Layout shell and Header (Role Toggle)
│   ├── dashboard/         # Core dashboard widgets (Charts, List, Cards, Insights)
├── context/
│   └── FinanceContext.tsx # Centralized State & Logic
├── data/
│   └── mockData.ts        # 50 realistically generated transactions
├── App.tsx
└── index.css              # Global Tailwind v4 base
```

## Design Decisions

1. **Tailwind CSS:** I used Tailwind because it allows for rapid UI development while maintaining a consistent design system.
2. **Context API:** I chose the Context API to pass the mock data and role state around. It's built into React and perfect for an assignment of this size. I made sure to wrap derived stats in `useMemo` hooks so re-renders are efficient instead of computing large array ops on every single render.
3. **Recharts:** It's lightweight and React-native, which aligns perfectly with standard dashboard assignment requirements without adding the complexity of D3.js.

I hope you enjoy reviewing the code! Feel free to toggle the role via the "Switch" button in the upper right.

finance-dashboard

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README