PocketLog - Modern Monthly Expense & Income Tracker

PocketLog is a full-stack personal finance web application built to make monthly income and expense tracking effortless, intuitive, and visually engaging. Crafted with a Mobile-First design philosophy, it empowers users to gain clear insights into their cash flow, savings habits, and category distribution through interactive dashboards and modern fintech aesthetics.

---

🌟 Key Features

• ⚡ Fast & Effortless Transaction Logging

  • Seamless toggle between income and expense entries.
  • 21 tailored categories with distinctive icons and gentle, soothing color palettes.
  • Quick-Select Chips for one-tap logging of frequent daily items (Breakfast, Lunch, Coffee, Fuel, Public Transit).
  • Real-time calculation of daily totals and monthly net balance.

• 📊 Comprehensive Financial Analytics Dashboard

  • 4 Core Metrics: Total Income, Total Expense, Net Balance, and Savings Rate.
  • Daily Spending Trend Timeline: Visualizes spending spikes and patterns throughout the month.
  • Category Breakdown: Percentage distribution of active categories.
  • Top 5 Largest Expenses: Automatically ranks and highlights the highest spending entries of the month.

• 🌐 Full Bilingual Localization (TH / EN)

  • One-tap compact language toggle (🌐 TH / 🌐 EN) accessible throughout the app.
  • 100% localized dictionaries covering category titles, calendars (Buddhist Year B.E. / Western Year A.D.), currency formats, and validation messages.
  • Persistent preferences saved across sessions via LocalStorage and Cookies.

• 📲 Progressive Web App (PWA) Support

  • Configured with Web App Manifest and Service Worker for standalone, full-screen native app experience.
  • One-click installation on Android, Chrome, Edge, and iOS Safari.
  • Interactive, device-aware installation guide modal for seamless onboarding.

• 🔒 Secure Authentication & User Profile

  • User authentication with bcrypt password hashing and secure HTTP-only JWT cookies.
  • Profile management featuring client-side Base64 avatar compression.
  • In-app password change and direct email-based password reset workflows.

---

🛠️ Architecture & Tech Stack

• Frontend & Full-Stack Framework: Next.js 16 (App Router), React 19, TypeScript
• Styling & UI: Tailwind CSS, Glassmorphic Design System, Lucide React Icons
• Database & ORM: Neon Serverless PostgreSQL, Drizzle ORM
• Authentication & Security: JWT Token via HTTP-only Cookies, Bcrypt Password Hashing
• PWA & Offline Capabilities: Service Worker (sw.js), Web App Manifest