00
    SaaS / FinTech

    WalletSync

    A production SaaS budget planner and expense tracker. Part of a team at LogicGo Infotech, I owned the dashboard layout, Stripe subscription integration, SEO, and core app modules including auth, accounts, labels, and records.

    Next.js
    React
    Vite
    Redux Toolkit
    Express.js
    MongoDB
    Stripe
    Firebase
    Bootstrap
    ApexCharts
    AWS S3
    Live Demo

    The Problem

    Personal finance tools are either too simplistic or too complex for everyday users managing multiple currencies, recurring payments, and budget goals. WalletSync needed a polished web experience with a responsive, information-dense dashboard, a seamless subscription flow, and SEO-optimized landing pages, all built to production quality.

    The Outcome

    WalletSync shipped to production at walletsync.app with weekly, yearly, and lifetime subscription plans managed end-to-end through Stripe. The custom dashboard layout and sidebar became the core visual backbone of the app used by real subscribers.

    Overview

    WalletSync is a production SaaS product: a budget planner and expense tracker built for individuals and small teams who want a unified view of their finances across multiple accounts and currencies. I worked on this as part of the development team at LogicGo Infotech. The platform spans three interconnected applications: a Next.js marketing and landing site, a Vite-based React web app for the core product, and an Express.js backend. My ownership covered the dashboard layout, sidebar navigation, Stripe subscription UI and backend, SEO on the landing site, and several core app modules: Google and Apple OAuth, accounts, labels, records, and settings.

    Approach

    For each area I mapped the full data and interaction flow before writing UI. The dashboard layout was built as a CSS grid system that collapses cleanly on mobile without losing information hierarchy. The sidebar, which has multi-level sub-item dropdowns, was built without a third-party navigation library to keep full control over animation and active-state logic. For Stripe I traced the subscription lifecycle end-to-end: session creation on the server, Stripe Checkout on the client, webhook handling for all subscription events, and reflecting plan state back in the user record. For SEO I focused on the subscription and feature pages where organic search intent is highest, wiring up dynamic sitemaps and full OpenGraph metadata inside Next.js App Router conventions.

    Architecture Highlights

    Production SaaS

    Live at walletsync.app with real paying subscribers on Stripe weekly, yearly, and lifetime plans.

    Stripe End-to-End

    Session creation, Stripe Checkout, webhook lifecycle, trial logic, and plan state sync fully implemented.

    Custom Dashboard Layout

    Hand-built responsive grid dashboard with multi-level sidebar, no navigation library, full mobile offcanvas.

    Key Features

    • Custom responsive dashboard layout built manually: fixed sidebar on desktop, offcanvas drawer on mobile, no navigation library dependency
    • Multi-level dropdown sidebar navigation with sub-items, active route tracking per nested path, and animated expand/collapse per section
    • Google OAuth and Apple OAuth via Firebase Authentication, with first-time sign-up routing to a currency selection onboarding step instead of the dashboard
    • Accounts module: create, edit, and archive accounts with currency, balance, and account type management
    • Labels and Records modules with full CRUD, filtering, pagination, and inline editing
    • Settings pages with a hierarchical sidebar covering notifications, categories, account types, templates, and data and privacy controls
    • Stripe subscription page: plan comparison UI (Free, Weekly $4.99, Yearly $29.99, Lifetime $99.99), checkout session creation, success and rejection pages
    • Stripe backend: session creation, subscription update and cancellation endpoints, trial period logic (3-day weekly, 7-day yearly), and webhook handlers for the full subscription lifecycle
    • SEO for landing and subscription pages: dynamic sitemap generation including blog URLs, robots.txt, OpenGraph and Twitter card metadata, and Google site verification
    • Client-facing landing pages in Next.js covering feature highlights, how-it-works flows, bank sync resources, and feature-specific sub-pages

    Challenges Solved

    • Building the responsive sidebar with multi-level dropdowns from scratch: active state had to correctly track nested routes while the mobile offcanvas needed to feel native without a navigation library adding to the bundle
    • Wiring the Stripe subscription lifecycle across two apps: checkout session creation on the server, client-side redirect and capture, webhook-based state sync, and accurately surfacing the current plan state in the UI at all times
    • Implementing Firebase Google and Apple OAuth consistently across two separate frontends (Next.js and Vite), handling the edge case where a first-time user must be intercepted before reaching the dashboard and redirected to currency onboarding
    • Optimising SEO for the subscription pages inside Next.js App Router: dynamic sitemaps that pull live blog slugs from the backend, per-page OpenGraph images, and structured meta without breaking server-component boundaries

    By the Numbers

    3

    Apps

    4

    Subscription Plans

    2

    OAuth Providers

    10+

    Dashboard Widgets

    Interested in this project?

    Let's discuss how I can build something similar for you.