COINEST Dashboard UI

COINEST Dashboard UI is a responsive finance dashboard built with React, TypeScript, Vite, Tailwind CSS, React Router, and Recharts. The project focuses on a clean glassmorphism-style interface for viewing balances, income and expense summaries, charts, recent transactions, activity, savings goals, and profile settings.

This project currently uses static mock data for the dashboard widgets and placeholder pages for several modules, which makes it a good starting point for a finance admin panel, banking UI, or personal finance dashboard.

Live Demo

https://dashboard-ui-pink-zeta.vercel.app/dashboard

Website Screenshot

Preview

• Desktop sidebar navigation with a three-column dashboard layout
• Mobile bottom navigation for smaller screens
• Light and dark theme toggle
• Interactive modals for quick actions and saving plans
• Profile page with editable form sections and settings panels

Features

• Responsive application shell with sidebar, sticky header, and mobile bottom navigation
• Dashboard overview with balance card, summary cards, chart, statistics, and recent activity
• Quick action modal for top-up, transfer, request, and history flows
• Saving plans widget with modal-based plan creation
• Daily spending limit progress section
• Cashflow bar chart built with Recharts
• Expense breakdown pie chart built with Recharts
• Recent transactions table with mock transaction states
• Profile page with personal information, security, and notification settings
• Placeholder pages for Payments, Transactions, Invoices, Cards, Saving Plans, Investments, Inbox, Promos, and Insights
• Dark mode toggle handled in the header

Tech Stack

• React 19
• TypeScript
• Vite 6
• Tailwind CSS 4
• React Router DOM 7
• Recharts
• Lucide React

Pages and Routes

The app is routed with react-router-dom and redirects / to /dashboard.

Route	Purpose
/dashboard	Main finance dashboard
/payments	Placeholder page
/transactions	Placeholder page
/invoices	Placeholder page
/cards	Placeholder page
/saving-plans	Placeholder page
/investments	Placeholder page
/inbox	Placeholder page
/promos	Placeholder page
/insights	Placeholder page
/profile	User profile and settings page

Dashboard Sections

The main dashboard is composed of these sections:

• CardWidget: shows the main card, balance, expiry, and CVV
• QuickActions: opens modals for top-up, transfer, request, and history
• DailyLimit: displays current daily spending progress
• SavingPlans: lists savings goals and allows adding new plans
• SummaryCards: shows total income, total expense, and total savings
• CashflowChart: shows monthly income vs expense with a stacked bar chart
• RecentTransactions: displays a transaction table with mock records
• Statistic: shows expense distribution in a pie chart
• RecentActivity: shows grouped activity feed entries

Project Structure

dashboard-ui/
|- src/
|  |- components/
|  |- pages/
|  |- App.tsx
|  |- main.tsx
|  |- index.css
|- .env.example
|- index.html
|- package.json
|- package-lock.json
|- tsconfig.json
|- vite.config.ts

How to Run Locally

Prerequisites

• Node.js 18 or newer
• npm
• Git

1. Clone the repository

git clone https://github.com/aayushsoam/dashboard-ui.git
cd dashboard-ui

2. Install dependencies

npm install

If you already have a lockfile-based setup and want a clean install, you can use:

npm ci

3. Optional environment setup

This project includes an .env.example file with:

• GEMINI_API_KEY
• APP_URL

For the current UI, these values are not required to simply run the dashboard locally. If you still want local environment variables, create a .env.local file based on .env.example.

Examples:

cp .env.example .env.local

Copy-Item .env.example .env.local

Then update the values if your future implementation needs them.

4. Start the development server

npm run dev

The Vite dev server runs on:

http://localhost:3000

5. Build for production

npm run build

6. Preview the production build

npm run preview

Available Scripts

Script	Description
npm run dev	Starts the Vite development server on port 3000
npm run build	Creates a production build
npm run preview	Previews the production build locally
npm run lint	Runs TypeScript type-checking with tsc --noEmit
npm run clean	Removes the dist folder using rm -rf dist

Deploy to Vercel

This project can be deployed to Vercel as a Vite frontend.

Option 1: Deploy from the Vercel dashboard

1. Push this repository to GitHub.
2. Sign in to Vercel.
3. Click Add New Project.
4. Import the GitHub repository.
5. Vercel should detect it as a Vite project automatically.
6. Keep the default install and build settings, or confirm:
   • Install Command: npm install
   • Build Command: npm run build
   • Output Directory: dist
7. Click Deploy.

Option 2: Deploy with the Vercel CLI

npm install -g vercel
vercel

For a production deployment:

vercel --prod

Why vercel.json is included

This app uses BrowserRouter, which means it behaves like a Single Page Application. Directly opening routes such as /profile or /transactions can fail on static hosting unless all routes are rewritten to index.html.

The included vercel.json file handles that rewrite automatically for Vercel.

Important Notes

• The project is frontend-focused and currently uses mock/static data.
• Most secondary pages are placeholder screens, not fully implemented modules.
• Dark mode is toggled from the header and works by adding or removing the dark class on the root document.
• The app uses remote avatar images from pravatar.cc.
• @google/genai, dotenv, and express are present in dependencies, but the current UI does not actively use an Express backend or Gemini-powered workflow.
• The clean script uses rm -rf, which works in Unix-like shells. On Windows, you may prefer deleting dist manually or replacing that script with a cross-platform alternative if needed.

Customization Ideas

• Replace mock data with API-driven finance data
• Connect quick actions to real transaction workflows
• Add authentication and protected routes
• Persist profile settings and savings plans to a backend
• Replace placeholder pages with complete feature modules
• Add filters, search logic, and sorting to the transactions table

License

This repository does not currently define a license file. Add one if you plan to distribute or reuse the project publicly.