Skip to main content

​
Overview

Tiquo is built on a carefully selected technology stack designed for performance, scalability, and developer experience. Every choice prioritizes real-time capabilities and type safety.

​
Frontend Technologies

​
Next.js 15.2

Tiquo uses the latest Next.js with App Router for optimal performance:

App Router

Server and client components with streaming SSR

React 18.3

Concurrent rendering and Suspense for smooth UX

Turbopack

Blazing fast development builds

Server Actions

Type-safe server mutations without API routes

​
TypeScript 5.7

Full type safety across the entire codebase: 
// Example: Typed customer data
interface Customer {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  phone?: string;
  clerkOrganizationId: string;
  createdAt: number;
  lifecycle: 'lead' | 'active' | 'at-risk' | 'churned';
  clv?: number;
}

​
Styling & UI

TechnologyPurpose
Tailwind CSS 3.4Utility-first styling with custom design system
Radix UIAccessible, unstyled component primitives
Shadcn/UIPre-built components built on Radix
Framer MotionSmooth animations and page transitions
Lucide ReactComprehensive icon library

​
Data Visualization

Recharts

Composable chart library for analytics dashboards

React Flow

Node-based UI for service flow builders

Konva

2D canvas for floor plan editor

DND Kit

Accessible drag-and-drop interactions

​
Backend Architecture

​
Convex Database

Tiquo uses Convex as its real-time backend:
All queries are live subscriptions. When data changes, UI updates automatically without polling or manual refetching.
// Automatic real-time updates
const customers = useQuery(api.customers.list, { 
  locationId: currentLocation 
});
Mutations and queries are TypeScript functions that run on Convex’s edge network:
export const createCustomer = mutation({
  args: {
    firstName: v.string(),
    lastName: v.string(),
    email: v.string(),
  },
  handler: async (ctx, args) => {
    return await ctx.db.insert("customers", {
      ...args,
      createdAt: Date.now(),
    });
  },
});
UI updates immediately while mutations are in flight, with automatic rollback on failure.
Built-in file storage for images, documents, and attachments with automatic CDN delivery.

​
Schema Design

Tiquo’s Convex schema includes:
TablePurpose
customersCustomer profiles and contact information
ordersBookings, enquiries, and transactions
servicesService definitions and configurations
locationsBusiness locations and settings
productsProduct catalog and inventory
membershipsLoyalty programs and tiers
analyticsAggregated metrics and reports
integrationsThird-party connection data

​
Authentication

​
Clerk

Enterprise-grade authentication with organization support:

Multi-tenant

Organization-based isolation for B2B SaaS

Social Login

Google, Apple, and other OAuth providers

MFA

Two-factor authentication support

SSO

SAML and OIDC for enterprise customers
// Example: Protected route with organization check
export default function DashboardLayout({ children }) {
  return (
    <ClerkProvider>
      <OrganizationSwitcher />
      <RequireAuth>
        {children}
      </RequireAuth>
    </ClerkProvider>
  );
}

​
Integrations Layer

​
Nango

500+ pre-built integrations with OAuth handling:
  • Unified API: Consistent interface across all integrations
  • OAuth Management: Automatic token refresh and management
  • Webhook Handling: Incoming webhook processing
  • Sync Engine: Scheduled data synchronization

​
Supported Categories

CRM

Salesforce, HubSpot, Pipedrive

Accounting

QuickBooks, Xero, FreshBooks

Marketing

Mailchimp, Klaviyo, SendGrid

Productivity

Slack, Notion, Asana

Analytics

Google Analytics, Segment

Payments

Stripe, PayPal, Square

​
Payment Processing

​
Stripe Connect

Full payment platform integration:
FeatureImplementation
Connect AccountsSub-merchant onboarding
TerminalStripe S700 with custom firmware
PaymentsCards, Apple Pay, Google Pay
SubscriptionsRecurring billing support
PayoutsAutomated merchant settlements

​
Monorepo Structure

Tiquo uses a pnpm workspaces monorepo: 
tiquo-dashboard/
├── apps/
│   └── web/              # Main Next.js application
├── packages/
│   ├── ui/               # Shared UI components
│   ├── config/           # Shared configuration
│   ├── document-builder/ # Document/form builder package
│   └── floorplan-builder/# Floor plan editor package
├── turbo.json           # Turborepo configuration
└── pnpm-workspace.yaml  # Workspace definition

​
Build Tools

Turborepo

Intelligent build caching and task orchestration

pnpm

Fast, disk-efficient package management

ESLint

Code quality and consistency

Prettier

Automatic code formatting

​
Deployment

​
Vercel

Production deployment on Vercel’s edge network:
  • Edge Functions: API routes run at the edge
  • Automatic Previews: PR-based preview deployments
  • Analytics: Real user monitoring built-in
  • Instant Rollbacks: One-click deployment reversals

​
Environment Configuration

# Required environment variables
NEXT_PUBLIC_CONVEX_URL=https://your-project.convex.cloud
CONVEX_DEPLOY_KEY=prod:your-deploy-key

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_...
CLERK_SECRET_KEY=sk_live_...

STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

NANGO_SECRET_KEY=your-nango-secret

​
Performance Optimizations

Default to React Server Components for reduced client JavaScript. Interactive components are explicitly marked with ‘use client’.
Progressive page loading with Suspense boundaries for optimal perceived performance.
Next.js Image component with automatic WebP conversion and lazy loading.
Automatic route-based and dynamic import code splitting.
Multi-layer caching with Convex’s intelligent cache invalidation.

Data Layer

Deep dive into Convex and data architecture

Security

Authentication, authorization, and compliance