💳 MagIo - Modern Financial Management Dashboard

A modern, responsive financial management dashboard built with Next.js, TypeScript, and Tailwind CSS. Track your finances, manage multiple wallets, and visualize your spending habits with elegant UI components.

Features • Demo • Installation • Tech Stack • Project Structure

✨ Features

🎯 Core Features

🔐 Authentication System - Secure login with mock authentication
📊 Interactive Dashboard - Real-time financial overview with charts
💰 Multi-Wallet Support - Manage bank accounts, credit cards, cash, and crypto wallets
📈 Financial Analytics - Income vs. Expense tracking with Recharts visualization
💳 Virtual Credit Cards - Beautiful SVG-based card designs with chip & contactless icons
📱 Fully Responsive - Mobile-first design that works on all devices
🎨 Modern UI Components - Built with Radix UI and shadcn/ui principles
⚡ Turbopack Enabled - Lightning-fast development with Next.js Turbopack

🎨 UI/UX Highlights

Glassmorphism effects on credit cards
Smooth animations and transitions
Dark mode ready architecture
Accessible components (ARIA compliant)
Skeleton loading states
Toast notifications

🖼️ Demo

Dashboard Overview

The main dashboard provides a comprehensive view of your financial status:

Total balance across all accounts
Business capital tracking
Transaction history with categorization
Income/Expense trends visualization
Scheduled transfers management

Key Components

Balance Cards - Display total and business capital
Credit Card Visualizations - Front & back card designs
Wallet Cards - Multi-currency wallet management
Finance Charts - Interactive income/expense graphs
Transaction Items - Detailed transaction list with icons and status

🚀 Installation

Prerequisites

Node.js 20.x or higher
npm, yarn, pnpm, or bun package manager

Quick Start

Clone the repository

git clone https://github.com/yourusername/magio.git
cd magio

Install dependencies

npm install
# or
yarn install
# or
pnpm install

Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev

Open your browser

Navigate to http://localhost:3000

The application will automatically redirect to the sign-in page.

📦 Available Scripts

# Start development server with Turbopack
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run ESLint
npm run lint

🛠️ Tech Stack

Frontend Framework

Next.js 15.5.4 - React framework with App Router
React 19.1.0 - UI library
TypeScript 5 - Type safety

Styling

Tailwind CSS 4 - Utility-first CSS framework
tw-animate-css - Animation utilities
class-variance-authority - Component variants
tailwind-merge - Merge Tailwind classes

UI Components

Radix UI - Unstyled, accessible components
- Avatar
- Slot (Polymorphic components)
Lucide React - Beautiful icon system
Recharts - Charting library

Development Tools

ESLint - Code linting
PostCSS - CSS processing
Turbopack - Fast bundler (experimental)

📁 Project Structure

magio/
├── public/
│   └── images/
│       └── signup.webp          # Sign-in page illustration
├── src/
│   ├── app/
│   │   ├── dashboard/
│   │   │   └── page.tsx         # Dashboard page
│   │   ├── sign-in/
│   │   │   └── page.tsx         # Authentication page
│   │   ├── globals.css          # Global styles
│   │   ├── layout.tsx           # Root layout
│   │   └── page.tsx             # Home page (redirects to sign-in)
│   ├── components/
│   │   ├── auth/
│   │   │   └── sign-in-form.tsx # Login form component
│   │   ├── dashboard/
│   │   │   ├── balance-card.tsx
│   │   │   ├── credit-card.tsx
│   │   │   ├── finance-chart.tsx
│   │   │   ├── header.tsx
│   │   │   ├── scheduled-transfers.tsx
│   │   │   ├── sidebar.tsx
│   │   │   ├── transaction-item.tsx
│   │   │   └── wallet-card.tsx
│   │   └── ui/
│   │       ├── avatar.tsx       # shadcn/ui Avatar
│   │       ├── button.tsx       # shadcn/ui Button
│   │       ├── card.tsx         # shadcn/ui Card
│   │       ├── input.tsx        # shadcn/ui Input
│   │       ├── google-icon.tsx
│   │       └── logo.tsx
│   ├── contexts/
│   │   └── auth-context.tsx     # Authentication context & provider
│   ├── data/
│   │   └── dummy.json           # Mock data for development
│   ├── lib/
│   │   ├── formatters.ts        # Currency & date formatters
│   │   ├── utils.ts             # Utility functions
│   │   └── validators.ts        # Form validation helpers
│   └── types/
│       └── index.ts             # TypeScript interfaces
├── .vscode/
│   └── settings.json            # VS Code workspace settings
├── components.json              # shadcn/ui configuration
├── eslint.config.mjs            # ESLint configuration
├── next.config.ts               # Next.js configuration
├── postcss.config.mjs           # PostCSS configuration
├── tailwind.config.js           # Tailwind CSS configuration (auto-generated)
└── tsconfig.json                # TypeScript configuration

🎨 Component Architecture

Authentication Flow

AuthProvider → useAuth() → Protected Routes

Dashboard Components

Header - User profile, notifications, search
Sidebar - Navigation menu with icons
Balance Cards - Financial overview cards
Credit Cards - SVG-based card designs
Wallet Cards - Multi-currency support
Finance Chart - Recharts area chart
Transaction List - Scrollable transaction feed

🔧 Configuration

Environment Variables

Create a .env.local file in the root directory:

# Add your environment variables here
# NEXT_PUBLIC_API_URL=your_api_url

Tailwind Configuration

The project uses Tailwind CSS 4 with custom configuration:

Custom color palette
Extended spacing utilities
Custom animation utilities

TypeScript Configuration

Strict mode enabled with Next.js specific settings:

Path aliases: @/* → ./src/*
ES2017 target
Strict type checking

🎯 Key Features Explained

Authentication Context

// Global authentication state management
const { user, login, logout, isAuthenticated, isLoading } = useAuth();

Multi-Wallet System

Supports 4 wallet types:

💵 Cash - Physical currency tracking
🏦 Bank - Bank account balances
💳 Credit - Credit card management
₿ Crypto - Cryptocurrency wallets

Transaction Management

Track all financial activities:

Income vs. Expense categorization
Company/merchant information
Status tracking (completed, pending, failed)
Date-based filtering

📊 Data Models

User Interface

interface User {
  id: string;
  email: string;
  name: string;
  avatar?: string;
}

Transaction Interface

interface Transaction {
  id: string;
  type: 'income' | 'expense';
  amount: number;
  currency: string;
  description: string;
  company?: string;
  category: string;
  date: string;
  status: 'completed' | 'pending' | 'failed';
}

Wallet Interface

interface Wallet {
  id: string;
  name: string;
  balance: number;
  currency: string;
  type: 'cash' | 'bank' | 'credit' | 'crypto';
}

🎨 Design System

Color Palette

Primary: Brand colors for main actions
Secondary: Supporting UI elements
Muted: Background and borders
Accent: Highlights and notifications

Typography

Headings: Bold, clear hierarchy
Body: Readable, optimized line height
Monospace: For card numbers and codes

Spacing

Consistent spacing scale based on Tailwind's default configuration with custom extensions.

🚀 Performance Optimizations

⚡ Turbopack for faster development builds
🖼️ Next.js Image Optimization ready
📦 Code Splitting with dynamic imports
🎯 Tree Shaking for smaller bundles
💾 Static Generation where possible

🧪 Testing

The project structure supports:

Unit testing with Jest (setup required)
Component testing with React Testing Library (setup required)
E2E testing with Playwright (setup required)

📱 Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Maintain component modularity
Write meaningful commit messages
Add comments for complex logic
Update documentation as needed

📝 License

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

🙏 Acknowledgments

Next.js - The React Framework
Tailwind CSS - Styling framework
Radix UI - UI primitives
Lucide - Icon system
shadcn/ui - Component inspiration
Recharts - Chart library

📧 Contact

For questions or feedback, please open an issue on GitHub.

⬆ back to top

Made with ❤️ using Next.js and TypeScript

Name		Name	Last commit message	Last commit date
Latest commit History 30 Commits
.vscode		.vscode
public/images		public/images
src		src
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

beratgdlk/magio

Folders and files

Latest commit

History

Repository files navigation