💸 Finance Manager PWA

Finance Manager is a modern Progressive Web Application (PWA) designed for convenient tracking of personal finances, multi-currency wallets, and detailed analytics. The app works completely offline, utilizes local device storage, and is optimized to look and feel like a native app on iOS and Android.

🔗 Demo: Open App

---

📑 Table of Contents

• 📸 Screenshots
• 🔒 Privacy First
• ✨ Key Features
• 🏗 Tech Stack
• 🚀 Installation and Setup
• 📦 Build and Deploy
• 📱 How to Install on Phone (PWA)
• 📂 Project Structure
• 📄 License

---

📸 Screenshots

Home / Dashboard	Wallets	Analytics & Charts
Add Transaction	Categories / Icons	Settings

Responsive design: The UI automatically adapts to a sidebar layout on desktop devices.

---

🔒 Privacy First

This application is 100% Client-Side.

• No Servers: All financial data is stored securely and locally on your device using IndexedDB.
• No Tracking: No analytics, no cookies, no data collection. Your money is your business.
• Biometric Security: Features a local PIN/Biometric lock screen UI to protect your data from prying eyes.
• Ownership: You maintain full control over your financial data without relying on third-party cloud services.

---

✨ Key Features

🛠 Functionality

• Offline Mode: Fully functional without internet access (PWA + Service Workers).
• Multi-Currency Support: Fetch real-time exchange rates via the NBP Web API (National Bank of Poland) to automatically calculate your total net worth in a base currency.
• Wallets Management: Create and manage cash, bank accounts, and crypto wallets. Easily switch between them using a gesture-friendly carousel.
• Transactions & Categories: Log income and expenses. Filter by periods (daily, monthly, yearly).
• Recurring Payments: Built-in engine to handle and automate recurring transactions.
• Analytics: Interactive charts and highlights to visualize spending habits.
• Multi-Language (i18n): Dynamically switch between English, Polish, and Ukrainian.

🎨 UI/UX (Interface)

• Mobile-First Design: Looks and behaves exactly like a native app (Bottom Navigation, Safe Areas, hidden browser bars).
• Desktop Support: Adapts to a Sidebar layout on larger screens.
• Animations: Smooth page transitions, animated numbers, and micro-interactions.
• Themes: Clean, modern interface styled with Tailwind CSS.

---

🏗 Tech Stack

• Core: React 18+, Vite
• Styling: Tailwind CSS
• Database: IndexedDB (Local Browser Storage)
• PWA: vite-plugin-pwa (Manifest, Service Workers, Offline capabilities)
• State & Data Fetching: Custom React Hooks, Context API
• Charts: recharts
• Animations: framer-motion
• Localization: react-i18next, i18next-browser-languagedetector
• Utilities: @hello-pangea/dnd (Drag-and-Drop), date-fns (Date formatting), lucide-react (Icons)

---

🚀 Installation and Setup

To run the project locally, you will need Node.js installed.

1. Clone the repository:

   git clone https://github.com/OwenSide/finanse-manager.git
   cd finanse-manager

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

The application will be available at http://localhost:5173.

---

📦 Build and Deploy

The project is configured for static deployment (perfect for GitHub Pages).

Build the project:

npm run build

Deploy (automated script)::

npm run deploy

This command will build the project and push the dist folder to the gh-pages branch.

---

📱 How to Install on Phone (PWA)

The app does not require downloading from the App Store or Google Play.

🍏 iOS (iPhone/iPad)

1. Open the Demo Link in Safari.
2. Tap the "Share" button (square with an upward arrow at the bottom).
3. Select "Add to Home Screen".
4. The app will now work like a native application (without the browser address bar).

🤖 Android

1. Open the Demo Link in Chrome.
2. Tap the menu (three dots) or wait for the pop-up banner.
3. Select "Install App" or "Add to Home screen".

---

📂 Project Structure

Click to view file structure

src/
├── api/                   # External API logic
│   └── exchangeRates.js   # NBP Web API integration
├── components/            # React components
│   ├── analytics/         # Recharts and statistical UI
│   ├── layout/            # App Shell, BottomNav, Sidebar
│   ├── modals/            # Modals (Add Transaction, Edit Category)
│   ├── transactions/      # Transaction lists and filters
│   ├── ui/                # Shared UI (BiometricLock, Icons)
│   └── wallets/           # Wallet Carousel and Selection
├── context/               # Global state (PreferencesContext)
├── hooks/                 # Custom React Hooks (useMonthlyStats)
├── locales/               # i18n JSON files
│   ├── en/                # English
│   ├── pl/                # Polish
│   └── uk/                # Ukrainian
├── pages/                 # Route Views (Home, Wallets, Stats, Categories)
├── utils/                 # Helper functions
│   ├── formatters.js      # Number & Date formatting
│   ├── recurringEngine.js # Recurring logic
│   └── syncExchangeRates.js # Background sync for rates
├── db.js                  # IndexedDB configuration & CRUD operations
├── i18n.js                # i18next initialization
├── App.jsx                # Main layout wrapper
├── main.jsx               # App entry point
└── index.css              # Global Tailwind styles

---

📄 License

This project is licensed under the GPLv3 License.

---