Supabase Demo - Financial Dashboard

A modern financial dashboard application built with Next.js, Supabase, and Tailwind CSS. This application provides a comprehensive view of financial metrics, account balances, and transaction history.

Features

• 📊 Real-time financial dashboard
• 💰 Multiple account management
• 📈 Interactive activity graphs
• 💳 Card management section
• 💵 Recent deposits tracking
• 🎨 Modern, responsive UI with Tailwind CSS
• 🔒 Secure authentication with Supabase

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS
• Database & Auth: Supabase
• Charts: Recharts
• Icons: Heroicons

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Supabase account

Getting Started

1. Clone the repository:

   git clone https://github.com/yourusername/supabase-demo.git
   cd supabase-demo

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables: Create a .env.local file in the root directory with the following variables:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   

4. Run the development server:

   npm run dev
   # or
   yarn dev

5. Open http://localhost:3000 in your browser.

Project Structure

supabase-demo/
├── src/
│   ├── app/              # Next.js app directory
│   │   ├── components/   # Reusable components
│   │   ├── hooks/        # Custom React hooks
│   │   └── page.tsx      # Main dashboard page
│   └── types/            # TypeScript type definitions
├── public/               # Static assets
└── supabase/            # Supabase configuration

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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

Acknowledgments

• Built with Next.js
• Powered by Supabase
• Styled with Tailwind CSS