Johnson CRM

Architecture

How the pieces connect, and how the app is laid out.

System diagram

System architecture diagramPhone and desktop users, installed as a PWA, talk to the Next.js app. The app uses Postgres for data, photo storage for images, and the client's own Google Cloud project for Sheets, Forms and Drive. A listings importer reads the public website.Users: owners and employeesphone, tablet, desktopPWA shellinstall, offline cacheJohnson CRM web appNext.js, auth and rolesPostgreslistings, contacts, deals, tasksPhoto storageimages, flyers, documentsGoogle Cloud (client's own)Sheets / Forms / DriveWebsite listings importjohnsoncommercialgroup.comExportsCSV, PDF flyers
Live connectionScheduled or on-demand sync
  • App + Postgres Source of truth for all CRM data.
  • Google Sheets Two-way listings sheet; import and export.
  • Google Forms Deal forms filled in-app; responses filed per deal.
  • Google Drive One folder per deal and per listing, documents collected automatically.
  • Website import Pulls current listings from the public site (method to be confirmed).
  • PWA Installable on phones; offline read of pages already opened.
  • Maps Leaflet with OpenStreetMap tiles. Free, no keys. MapLibre GL later if wanted.

Sitemap

  • Dashboard
    • Pipeline snapshot
    • Tasks
    • Activity
    • Lease expirations
  • Properties
    • Grid / List / Map
    • Listing editor
      • Photos
      • Specs and description
      • Documents
      • Flyer preview
      • Linked deals, clients, marketing
    • Import and Export
  • Contacts
    • Clients and leads
    • Listing matches and deals
  • Deals
    • Pipeline board
    • Deal detail
      • Timeline and tasks
      • Google forms, docs, Drive
  • Marketing
    • Request board
    • Templates
  • Development later
    • Projects, budget, milestones
  • Settings
    • Google connection
    • Roles and permissions
  • Everywhere
    • Search and command palette (Ctrl K)
    • New menu, notifications, pinned and recent
    • Keyboard shortcuts (?)