Skip to content

README.md

Latest commit

ย 

History

History
151 lines (107 loc) ยท 4.2 KB

README.md

File metadata and controls

151 lines (107 loc) ยท 4.2 KB

Financial Dashboard

A modern, responsive financial dashboard built with React, TypeScript, and a custom UI Kit.

๐Ÿš€ Features

  • Modern UI Kit: Custom-built components with consistent design
  • Dark Mode: Full dark mode support with smooth transitions
  • Responsive Design: Mobile-first approach with responsive layouts
  • TypeScript: Full type safety and excellent developer experience
  • Accessibility: WCAG 2.1 AA compliant components
  • Performance: Optimized bundle size and runtime performance

๐Ÿ› ๏ธ Technology Stack

  • Frontend: React 19.1.0 with TypeScript
  • Styling: Tailwind CSS v4 with custom design system
  • Build Tool: Vite 7.0.0
  • Icons: Lucide React
  • UI Components: Custom UI Kit built on Tailwind CSS

๐Ÿ“ฆ Installation

  1. Clone the repository:
git clone https://github.com/guibranco/financial-dashboard.git
cd financial-dashboard
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and navigate to http://localhost:5173

๐ŸŽจ UI Kit

This project includes a comprehensive UI Kit with the following components:

Core Components

  • Button: Multiple variants (primary, secondary, outline, ghost, danger)
  • Card: Flexible container with header, content, and footer
  • Input: Form inputs with labels, errors, and icons
  • Badge: Status indicators and labels
  • Avatar: User profile pictures with fallback support

Advanced Components

  • Dropdown: Contextual menus with keyboard navigation
  • Modal: Dialog overlays with backdrop and keyboard support
  • Tabs: Navigation between related content
  • Alert: Important messages and notifications
  • Table: Responsive data tables
  • Tooltip: Contextual help and information

Design System

  • Colors: Primary blue palette with 11 shades
  • Typography: Inter font family with consistent scale
  • Spacing: 4px base unit system
  • Animations: Smooth transitions and micro-interactions

๐Ÿ“š Documentation

๐ŸŒ™ Dark Mode

The application supports system-wide dark mode with:

  • Automatic detection of system preference
  • Manual toggle capability
  • Smooth transitions between themes
  • Consistent styling across all components

๐Ÿงช Development

Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build
  • npm run lint - Run ESLint

Project Structure

src/
โ”œโ”€โ”€ components/          # Feature-specific components
โ”œโ”€โ”€ layout/             # Layout components (Header, Sidebar, etc.)
โ”œโ”€โ”€ pages/              # Page components
โ”œโ”€โ”€ ui/                 # UI Kit components
โ”‚   โ”œโ”€โ”€ components/     # Reusable UI components
โ”‚   โ””โ”€โ”€ utils/          # UI utilities
โ”œโ”€โ”€ hooks/              # Custom React hooks
โ”œโ”€โ”€ context/            # React contexts
โ””โ”€โ”€ utils/              # General utilities

๐ŸŽฏ Features Overview

Dashboard

  • Balance overview with account details
  • Currency converter with real-time rates
  • Investment portfolio tracking
  • Currency trends visualization

Navigation

  • Responsive sidebar navigation
  • User profile dropdown
  • Notification center
  • Search functionality

Responsive Design

  • Mobile-first approach
  • Tablet and desktop optimized
  • Touch-friendly interactions
  • Accessible keyboard navigation

๐Ÿค Contributing

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/new-feature
  3. Commit your changes: git commit -am 'Add new feature'
  4. Push to the branch: git push origin feature/new-feature
  5. Submit a pull request

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

๐Ÿ™ Acknowledgments

  • Tailwind CSS for the utility-first CSS framework
  • Lucide for the beautiful icon set
  • React for the component-based architecture
  • Vite for the fast build tool
โšก