README.md
$npm run start:workspace_
🎯 Mission: To empower local businesses with a scalable digital presence and engagement tools, driving growth and customer loyalty.
⚠️ Problem: Local businesses struggle to establish a competitive digital presence, manage customer interactions effectively, and leverage online engagement for growth, often due to technical complexity and high costs.
👥 Target Audience: Small and Medium-sized Businesses (SMBs), Local Merchants, Customers of Local Businesses
📈 Impact Metrics: 15% increase in customer engagement for early adopters, 99.95% platform uptime, <1s merchant page load time
PayKut is a scalable merchant engagement platform designed to help local businesses establish a digital presence, manage customer interactions, and streamline customer engagement workflows.
The platform enables businesses to:
Built for startup-scale cost efficiency and rapid iteration:
The PayKut ecosystem uses a hybrid multi-platform architecture supporting customer applications, merchant applications, administrative workflows, and a public-facing web platform.
merchant.paykut.in) with scalable routing and tenant isolation.One of the most critical backend functions is the fetchMerchant(slug) utility. It acts as the core aggregation layer for merchant storefront rendering, centralizing business logic and minimizing frontend complexity.
How it works:
1. Resolution: The function queries the slugs collection in Firestore to resolve the actual merchantId.
2. Aggregation: It aggregates data from multiple Firestore collections/subcollections: Merchant details, Products, Discounts, Working hours, and Reviews.
3. Normalization: The aggregated data is shaped into a frontend-optimized structure.
4. Media Optimization: Images are processed through Cloudinary to generate optimized delivery URLs.
5. SEO & SSR: Next.js generates the storefront using Server-Side Rendering (SSR) with dynamic SEO metadata (titles, descriptions, OpenGraph images).
Why this approach?
When a customer visits a merchant storefront (e.g., via merchant.paykut.in or /shops/[merchantSlug]):
1. Edge Interception: Cloudflare middleware intercepts subdomain-based requests, rewriting the URL internally to the corresponding dynamic Next.js route while maintaining CDN optimization and SSL handling.
2. Routing: Next.js resolves the slug and triggers the Server Component.
3. Data Fetching: The fetchMerchant(slug) utility securely queries Firestore via the Firebase Admin SDK.
4. Rendering: The page is server-rendered with normalized data, optimized media via Cloudinary, and structured metadata.
5. Delivery: The final optimized page is delivered through Cloudflare's CDN layer.
Why? Chosen for rapid MVP delivery, real-time synchronization, built-in auth, and minimal DevOps overhead.
Why? Provided a unified frontend/backend experience suitable for startup execution, with unmatched SEO capabilities.
As traffic increased, dynamic storefront pages generated heavy Firestore read operations, causing latency spikes and higher costs.
Mitigation Strategies Implemented:
paykut/
├── apps/
│ ├── merchant-app/
│ │ ├── app/
│ │ │ ├── (merchant)/ # Merchant dashboard routes
│ │ │ ├── api/
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components/
│ │ └── public/
│ ├── customer-app/
│ │ ├── app/
│ │ │ ├── shops/[slug]/ # Dynamic merchant storefronts
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components/
│ │ └── public/
│ └── public-web/
│ ├── app/
│ │ ├── layout.tsx
│ │ └── page.tsx
│ └── components/
├── packages/
│ ├── ui/
│ ├── utils/
│ └── types/
├── next.config.js
├── tsconfig.json
└── package.jsonPrerequisites:
Steps:
1. Clone the repository: git clone <repo-url>
2. Navigate to the project directory: cd paykut
3. Install dependencies: npm install or yarn install
4. Set up environment variables (e.g., .env.local for Firebase credentials, JWT secrets).
5. Run the development server: npm run dev or yarn dev
fetchMerchant.