Skip to content

BillDirect

🚧 Project Status: Backend Integration Phase

Current State: Hybrid Implementation The application is currently transitioning from a static prototype to a fully reactive, local-first system.

  • Frontend: UI components are fully implemented using shadcn/ui and Tailwind CSS.
  • Data Layer: Currently utilizing Mock Data for UI/UX demonstration and rapid frontend iteration.
  • Active Development: Wiring RxDB (IndexedDB) for offline-first persistence and Prisma/Postgres via Better Auth for cloud synchronization.

🛠️ Technical Stack

Core Framework

  • Next.js 16: App Router architecture with React 19 features.
  • TypeScript: Strict type-safety across the full stack.

Offline-First Architecture (Wiring in Progress)

  • Local Database: RxDB with IndexedDB adapter for zero-latency interactions.
  • Cloud Sync: Prisma ORM connecting to PostgreSQL.
  • Replication: Custom Pull/Push handlers with BigInt timestamp conflict resolution.
  • Auth: Better Auth with specialized middleware to prevent unauthorized sync.

UI & UX

  • Styling: Tailwind CSS with CSS Variables for dynamic theming.
  • Components: Radix-based shadcn/ui.
  • Theme Engine: Custom blocking script to prevent "Flash of Unstyled Content" (FOUC) in Next.js 16.

🔄 Change Logs & Implementation History

Date
Name
 Description
2026-03-21 Initial Core Prototype: Designed multi-platform architecture for independent contractors to generate branded estimates/invoices and track job-specific expenses.
2026-03-21 UI/UX Motion: Integrated Framer Motion and Tailwind animations for polished component transitions.
2026-03-22 Feature Themes: Implemented dynamic Light/Dark mode switching with system preference detection.
2026-03-23 DevOps Core Codebase: Established full-stack environment with standardized development and production-ready configurations.
2026-03-24 Data Mock Integration: Populated frontend views with sample datasets to validate UI/UX layouts during backend development.
2026-03-24 Database Schema Evolution: Architected the 3-tier sync schema across Prisma (PostgreSQL) and RxDB (IndexedDB) to support offline-first capabilities.
2026-03-25 Fixed FOUC Resolved: Injected a blocking script in RootLayout to eliminate theme flashing in Next.js 16 / React 19.
2026-03-26 Refactor Sync Alignment: Standardized updatedAt logic and refactored avatar handling from blob to string for cross-platform compatibility.
2026-03-26 Security Auth Hardening: Eliminated 401 Unauthorized sync loops by implementing session-aware database initialization.
2026-03-26 Docs Documentation: Documentation: Updated README to reflect the hybrid "Mock-to-Live" transition status.

🧗 Next Steps

  1. Switch to Live Streams: Replace the mockData.ts imports with useRxQuery hooks in the Dashboard widgets.
  2. Conflict Resolution UI: Implement the "Syncing..." toast notifications and manual conflict resolution modals for multi-device edge cases.
  3. Tiered Access: Finalize the Prisma logic to filter sync history based on user role (90 days for Basic, Unlimited for Pro & Enterprise subscription).
  4. Other Features: New features along the way.