FinTech Dashboard · 财务分析台

VibeMySpace 精选@vibemyspace-curated

开源 HTML 财务投资个人管理编程开发#GitHub#个人金融

GitHub

编辑介绍

同屏展示余额、现金流、分类支出与财务目标。

AI 用途：AI 围绕个人收支、预算、目标与异常提供分析入口。

使用方式：直接调用 OpenRouter API。

原帖正文

FinTech Dashboard

Личный финансовый кабинет с AI-аналитикой и полной адаптивностью.

🌐 Деплой: fintech-dashboard-six.vercel.app

Описание проекта
Основные возможности
Архитектура проекта
Технологии
Требования к окружению
Установка и настройка
Переменные окружения
Запуск AI-ассистента
Тестирование
Деплой
Безопасность
Roadmap

Описание проекта

Проблема

Управление личными финансами — хаос: куча чеков, разрозненные заметки, отсутствие аналитики. Сложно понять, куда уходят деньги и как оптимизировать бюджет.

Решение

FinTech Dashboard — единое окно для учёта финансов с AI-помощником. Спросите ассистента — он проанализирует ваши траты и даст совет. Всё работает бесплатно, на русском языке, на компьютере и телефоне.

Основные возможности

📊 Дашборд — баланс, доходы/расходы, KPI, графики, тренды
💬 AI-ассистент — floating-чат, анализирует ваши транзакции, даёт советы (OpenRouter)
🖼️ Распознавание чеков (планируется) — AI будет заполнять форму по фото чека
💡 AI-инсайты — автоматические рекомендации по оптимизации бюджета
📋 Управление транзакциями — CRUD, фильтры, поиск, сортировка
💰 Бюджеты — установите лимиты по категориям, контроль перерасхода
🎯 Цели — отслеживание финансовых целей
📈 Мониторинг — cash flow, норма сбережения, долговая безопасность
📤 Экспорт — CSV и PDF
🌙 Тёмная тема — переключение светлой/тёмной темы
📱 PWA — установка на телефон как приложение
🔐 Авторизация — GitHub OAuth + демо-вход по email

Архитектура проекта

┌────────────────────────────────────────────────────┐
│              Frontend (Next.js)                    │
│  ┌──────────┐  ┌──────────┐                        │
│  │ Dashboard│  │ AI Chat  │                        │
│  │ (виджеты)│  │(floating)│                        │
│  └────┬─────┘  └────┬─────┘                        │
│       │             │                              │
│  ┌────▼─────────────▼──────────────────────────┐   │
│  │           API Routes (Next.js)              │   │
│  │  /api/chat  /api/insights                   │   │
│  │  /api/transactions  /api/budgets  /api/auth │   │
│  └────────────────────┬────────────────────────┘   │
└───────────────────────┼────────────────────────────┘
                        │
┌───────────────────────▼──────────────────────────────┐
│              OpenRouter API (облако)                 │
│  ┌──────────────────────────────────────────────┐    │
│  │  Chat/Insights: ling-2.6-1t                  │    │
│  └──────────────────────────────────────────────┘    │
└──────────────────────────────────────────────────────┘
                        │
┌───────────────────────▼──────────────────────────────┐
│              Turso (libSQL, облачная SQLite)         │
│  ┌────────────────────────────────────────────────┐  │
│  │  Prisma ORM + @prisma/adapter-libsql           │  │
│  │  fintech-db-lina-whm (Frankfurt)               │  │
│  └────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────┘

Ключевые модули

| Модуль | Путь | Описание | |--------|------|----------| | Виджеты | widgets/ | Dashboard, AI-чат, графики, таблицы | | Фичи | features/ | Транзакции, бюджеты, фильтры, цели, мониторинг | | Сущности | entities/ | Модели, API-запросы, типы транзакций | | Shared | shared/ | UI-компоненты (shadcn/ui), утилиты | | API Routes | app/api/ | Эндпоинты чата, транзакций, авторизации |

Технологии

Frontend

Next.js 15.5 (App Router) — фреймворк
React 19 — UI
TypeScript 5.6 — типизация
Tailwind CSS 3.4 — стилизация
shadcn/ui (Radix UI) — компоненты
TanStack React Query — управление состоянием сервера
Zustand — клиентское состояние
React Hook Form + Zod — формы и валидация
Recharts — графики
Lucide React — иконки

Backend

Next.js API Routes — серверные эндпоинты
Prisma 6 — ORM
Turso (libSQL) — облачная SQLite (бесплатно, 9 ГБ)
NextAuth v5 — аутентификация (GitHub OAuth + Credentials)

AI

OpenRouter API — облачные AI-модели
- inclusionai/ling-2.6-1t:free — чат и инсайты

Тестирование

Vitest — unit-тесты
Playwright — E2E-тесты
Testing Library — тестирование React-компонентов

Инфраструктура

Docker — контейнеризация (опционально)
GitHub Actions — CI/CD
Gitleaks — сканирование секретов

Требования к окружению

Node.js 18+ (рекомендуется 20+)
npm 9+ (или yarn/pnpm)
Git — для клонирования репозитория
Turso CLI (опционально) — для управления облачной БД

База данных — Turso (libSQL), облачная SQLite. Регистрация через GitHub, бесплатно до 9 ГБ. Не требует локального PostgreSQL.

Установка и настройка

1. Клонирование

git clone https://github.com/davi12399/fintech-dashboard.git
cd fintech-dashboard

2. Установка зависимостей

npm install

3. Переменные окружения

Скопируйте .env.example в .env.local и заполните:

cp .env.example .env.local

Подробнее — в разделе Переменные окружения.

4. Генерация Prisma Client

npx prisma generate

5. Настройка базы данных (Turso)

Зарегистрируйтесь на turso.tech через GitHub
Создайте базу данных:
```
turso db create fintech-db
```

Получите URL и токен:

turso db show fintech-db --url
turso db tokens create fintech-db

Добавьте в .env.local:

DATABASE_URL="libsql://[ваша-база].turso.io"
TURSO_AUTH_TOKEN="[ваш-токен]"

6. Запуск

npm run dev

Откройте http://localhost:3000.

Переменные окружения

Создайте файл .env.local в корне проекта:

来源与作者

原作者：Elias (@Elias569)
发布平台：GitHub
原帖：查看原帖
权利说明：VibeMySpace 仅作带来源的整理展示，内容与图片权利归原作者。

开源信息

未开源。