PerfectApp

Project Overview

PerfectApp is a B2B sales force automation and customer loyalty platform built for consumer packaged goods (CPG) companies operating in Mexico. The public-facing landing page introduces the product, but behind authentication lies a full operational system that connects field sales representatives, coordinators, administrators, and retail store owners through role-specific interfaces.

The platform digitizes the entire route-to-market workflow: field reps visit retail clients, log competitor data and inventory, place purchase orders, and collect photographic evidence through a structured multi-step form. Administrators validate orders, award loyalty points, and manage the promotional calendar. Retail clients track their purchase progress, accumulate points, and redeem rewards.

System Architecture

Multi-Role Access Control

The platform serves multiple user roles, each with its own section of the application and server-side access enforcement:

• Admin - Back-office management panel with operational modules for prospect validation, order approval, point management, promotional calendar, and data exports.
• Field Rep - Dashboard with monthly quota progress, client effectiveness metrics, and a multi-step visit registration wizard for logging field data.
• Coordinator - Supervisor view for monitoring individual field reps’ performance, quotas, and activity.
• Retail Client - Loyalty portal showing purchase progress against quota, points balance, promotional banners, and a rewards catalog.
• Analyst - Read-only access to summary dashboards and CSV data exports.

Multi-Tenant Design

The system supports multiple companies from a single deployment. Data isolation between tenants is handled at the application layer through session-scoped queries, so each company sees only its own data without needing separate infrastructure.

Key Features

Field Visit Workflow

The core operational loop of the platform. Field reps complete a 3-stage form during each client visit:

1. Assessment - competitor products, pricing, and photographic evidence.
2. Inventory and Orders - inventory check, purchase order creation with SKU selection and promotion application, or reason for no purchase.
3. Communication - communication plan execution status, materials check, and evidence photos.

The form state persists across page refreshes using Redux Toolkit with local persistence, which is critical for field reps working on mobile devices with spotty connectivity. On submission, the system creates a visit record and a pending order, and sends a summary notification to relevant stakeholders.

Loyalty Points System

The loyalty program incentivizes retail clients to maintain consistent purchase volumes:

• Points are awarded when administrators validate purchase orders.
• Point values are configurable per product and client tier.
• Clients who exceed their monthly purchase quota can earn bonus multipliers.
• Points can be redeemed for physical rewards through a catalog in the client portal.
• The validation flow ensures that points are only credited after orders are reviewed and approved.

Admin Operations

The admin panel centralizes back-office tasks:

• Review and approve pending orders to trigger point awards.
• Validate new client prospects submitted by field reps and onboard them into the system.
• Configure promotional calendars, point values, and client-facing banners.
• Export sales, pricing, and inventory data as CSV files for offline analysis.
• Monitor quota attainment across zones and flag clients who exceeded targets.

Technical Decisions

Database Layer

The project uses MongoDB with Prisma for schema definition and type generation. Complex business queries (quota calculations, sales rollups across multiple dimensions, cross-collection joins) are handled through optimized aggregation pipelines that would be hard to express through a standard ORM query API.

State Management

Redux Toolkit manages application state, with local persistence for the visit wizard. This solves a real problem: field reps in rural areas lose connectivity mid-visit, and the form needs to survive a page refresh without losing data.

Server-Side Rendering

Every authenticated page loads data on the server and passes it as props. This ensures that users always see fresh data and that role-based access is enforced before any content reaches the client.

Technical Stack

Layer	Technology
Framework	Next.js 14 (SSR)
Database	MongoDB + Prisma
Auth	NextAuth.js
State	Redux Toolkit
Forms	React Hook Form + Zod
Styling	SCSS Modules
Deploy	Vercel