Documentation
Open Dashboard →
Start

Getting Started

The FPM Client Portal is already live in production. This guide gets you oriented as a new data analyst on the team within an hour.

Production URL
The portal is deployed and serving real clients at clients.flooringpros-marketing.com. You don't need to run anything locally to view the live data — log in there and you are looking at the same code these docs describe.
Phase 1 Foundation deployed (2026-05-08)
The portal looks like a different product than what older screenshots show. Brand is now Montserrat / DM Sans on a black + orange palette. Three hubs at the top: Client Hub, Reporting, Client Info. Sidebar is dark and admin-only. The Home page has a bento grid + program timeline. Client Info is a new bento-grid page covering company metadata, contacts, domain & hosting, brand, social, billing.
Who this is for
This documentation is written for a new data analyst joining the team. It assumes you have basic familiarity with web dashboards, SQL, and REST APIs. You do not need to know Next.js or React in depth to be productive — most of your work will live in API routes, database queries, and metric mapping logic.

What is the FPM Client Portal?

Internally the codebase is called FPM Client Hub. Externally — what the client sees, what we link to in proposals — it is the FPM Client Portal. It is a multi-client marketing dashboard. Each client has a single page that aggregates live data from up to 11 platforms (Google Analytics, Search Console, GBP, Google Ads, Meta Ads, GoHighLevel, YouTube, PageSpeed, DataForSEO, Microsoft Clarity, n8n) into one unified view.

The end product replaces what we used to do with Looker Studio and a stack of spreadsheets. The goals:

  • One pane of glass — every paid channel, organic channel, pipeline metric and KPI in a single client page.
  • Pipeline-first — Pipeline Overview is the primary view. Leads, appointments, sales, ROAS, cost-per-X.
  • Self-serve client portal — clients log in and see only their data, with admin-curated sections (snapshot, scorecard, game plan, deliverables).
  • Monthly PDF report — exported on demand, mirrors the dashboard structure.

Hosting & deployment

  • Production URL: clients.flooringpros-marketing.com.
  • Hosting provider: Hostinger (Node.js hosting plan).
  • Source repo: GitHub, under Aniello Infantini's account. Push access is currently limited to Aniello.
  • Deployment: Pushes to main are deployed by Hostinger's GitHub integration. There is no manual build step — once a commit lands on main, the new version is live within a few minutes.
  • Database: Supabase (separate project for production).
  • Environment variables: managed in the Hostinger panel. They are NOT in the GitHub repo. If you change a variable name in code, also update it in Hostinger or the next deploy will break.
Day-to-day workflow
For most data-analyst tasks (auditing metrics, mapping new variables, writing SQL queries against Supabase) you do not need to clone the repo or run anything locally. Log into the live dashboard, open the Supabase project, and you have what you need. Local setup is only required when you change code.

Quick tour

Project Overview
Mission, target users, current state.
Tech Stack
Next.js 16, Supabase, Tailwind 4, Chart.js.
Auth Flow
How admin and client users authenticate.
Variable → Source
Master mapping table for every metric.
Pipeline KPIs
Leads, appointments, won deals, revenue logic.
Where We Are
What's live, what's pending, what's planned.

Local setup (only if you need to change code)

1
Get repo access
Ask Aniello to invite you to the GitHub repo. The codebase is under his account.
2
Clone and install
git clone the repo and run npm install at the coreboard/ folder.
3
Copy env template
Copy .env.example to .env.local. Ask Aniello for the production Supabase service role key, Google OAuth secret, and other credentials. Or set up a separate Supabase project for development.
4
Run dev server
npm run dev starts Next.js at http://localhost:3000.
5
Log in
Use your assigned admin email. The middleware will redirect you to /login on first request, then to /dashboard once the session is set.
6
Open Denver
Denver Carpet & Flooring is the canonical test client — most integrations are wired there. Open the client from the sidebar and check that GA4, GSC, GBP, GHL, Google Ads load.

Commands you will use

bash
npm run dev        # Local dev server (default port 3000)
npm run build      # Production build (use to verify your changes compile)
npm run lint       # ESLint flat config — run before committing
No tests yet
There is no automated test suite in this repo. Verification is manual — run the build, open the dashboard in the browser, click through the affected tabs. When you ship a metric, always verify with at least one live client (Denver is fastest).

How to read these docs

The sidebar is grouped by concept, not by file. If you are trying to add a new metric, the relevant pages in order are:

  1. Variable → Source — does the metric already have a source?
  2. Integrations — how the source API is wired and authenticated.
  3. API Routes — where the metric is fetched server-side.
  4. Tab Reference — where it should appear in the UI.
  5. Where We Are — check if it is already in flight before you start.
Conventions used in these docs

live means the metric or feature is wired end-to-end and verified against a real client. partial means data exists but only for some sources. pending means the schema is in place but no live data flows yet. planned means it is on the roadmap but not started.

Next Project Overview