Developer Portal

Overview

The Developer Portal (developer.siyahfy.com) is the dashboard for app marketplace developers on the Siyahfy platform. Developers use this portal to manage their published apps, track install metrics, monitor pricing plan views and conversions, and manage credit packs for monetization.

The portal is a Next.js 16 application with server-side rendering. All data is fetched from the central Backend API (ADMINURL) using server components with cookie-based authentication. The UI is built with Shadcn/ui components on top of Radix UI primitives.

Runtime: Next.js 16 with React 19 Port: 3000 (development) Deployment: Production at developer.siyahfy.com

Tech Stack

Folder Structure

developer.siyahfy.com/
├── app/
│   ├── layout.tsx                # Root layout (sidebar, header, vendor data fetch)
│   ├── page.tsx                  # Root page (redirects to /dashboard)
│   ├── globals.css               # Global styles
│   ├── robots.ts                 # Robots.txt generation
│   ├── sitemap.ts                # Sitemap generation
│   ├── api/
│   │   └── logout/
│   │       └── route.ts          # POST /api/logout (clears cookies)
│   └── dashboard/
│       ├── layout.tsx            # Dashboard layout (passthrough)
│       ├── page.tsx              # Dashboard overview (stats, recent installs, plan views)
│       ├── apps/
│       │   ├── page.tsx          # My Apps listing (grid with stats)
│       │   └── [app_id]/
│       │       ├── page.tsx      # App detail (installs, views, credit packs, trends)
│       │       ├── actions.ts    # Server Actions (create/update/delete credit packs)
│       │       └── credit-pack-manager.tsx  # Client component for pack CRUD
│       └── analytics/
│           └── page.tsx          # Cross-app analytics (trends, sources, top stores)
├── components/
│   ├── app-icon.tsx              # App icon with fallback
│   ├── app-sidebar.tsx           # Sidebar navigation
│   ├── header.tsx                # Page header
│   ├── logout-button.tsx         # Logout action
│   ├── nav-main.tsx              # Main navigation items
│   ├── nav-projects.tsx          # Project navigation
│   ├── nav-user.tsx              # User profile in sidebar
│   ├── search-form.tsx           # Search input
│   ├── team-switcher.tsx         # Team/org switcher
│   ├── version-switcher.tsx      # Version selector
│   └── ui/                       # Shadcn/ui components
│       ├── alert-dialog.tsx
│       ├── avatar.tsx
│       ├── badge.tsx
│       ├── breadcrumb.tsx
│       ├── button.tsx
│       ├── card.tsx
│       ├── collapsible.tsx
│       ├── dialog.tsx
│       ├── dropdown-menu.tsx
│       ├── input.tsx
│       ├── label.tsx
│       ├── separator.tsx
│       ├── sheet.tsx
│       ├── sidebar.tsx
│       ├── skeleton.tsx
│       └── tooltip.tsx
├── hooks/
│   └── use-mobile.ts             # Mobile viewport detection
├── lib/
│   └── utils.ts                  # cn() utility for class merging
├── middleware.ts                  # Auth guard (redirect to login if no token)
├── next.config.ts
├── postcss.config.mjs
├── tsconfig.json
└── package.json

Key Pages

Dashboard Overview (/dashboard)

The main landing page after login. Displays four stat cards and two activity feeds, all fetched server-side from GET /api/developer/overview.

Stat Cards:

• Total Apps — count of published apps (with active count)
• Total Installs — cumulative installs across all apps
• Plan Views — total pricing plan impressions
• Conversion — views-to-installs percentage

Activity Feeds:

• Recent Installs — who installed your apps (store name, app name, time ago)
• Recent Plan Views — pricing plan impressions (app name, plan name, source badge)

Quick Actions: Links to Manage Apps.

My Apps (/dashboard/apps)

Grid view of all developer’s published apps with aggregate stats.

Per-app card shows:

• App icon, name, description
• Status badge (active/inactive) and category badge
• Install count, plan view count, creation date

Top-level stats: Published count, total installs, total plan views, average installs per app.

App Detail (/dashboard/apps/[app_id])

Deep-dive into a single app’s performance. Data from GET /api/developer/my-apps/{appId}.

Sections:

• App header — icon, name, status badge, category, created/updated dates, app_id
• Stat cards — total installs, page views (with buy click count), buy initiated, purchases (with completion rate)
• Credit Pack Analytics — table showing each pack’s views, buy initiated, purchases, and conversion rate with inline progress bars
• Recent Installs table — store name, vendor name/email, install time
• Traffic Sources — bar chart of view sources (page-view, buy-click, buy-initiated, purchase-completed, app-store)
• Install Trend — bar chart of daily installs over last 30 days
• App Info card — metadata (app_id, status, category, created/updated dates)

Credit Pack Manager (Client Component)

Interactive client component on the app detail page for managing credit packs:

• Create new credit packs (name, price in INR, credits, optional badge and position)
• Edit existing packs
• Delete packs (soft delete)
• Real-time cost-per-credit preview
• Uses React Server Actions (actions.ts) that call:
  • POST /api/developer/apps/{appId}/credit-packs
  • PUT /api/developer/apps/{appId}/credit-packs/{packId}
  • DELETE /api/developer/apps/{appId}/credit-packs/{packId}
• revalidatePath is called after each mutation to refresh server data

Analytics (/dashboard/analytics)

Cross-app performance dashboard. Data from GET /api/developer/analytics?days=30.

Sections:

• Summary stats — total installs, recent installs (30d), plan views, conversion rate
• Install Trend chart — daily bar chart over 30 days
• Plan View Trend chart — daily bar chart over 30 days
• Traffic Sources — progress bars per source with percentage
• Top Stores — ranked list of stores that installed the most apps
• App Performance — side-by-side comparison of all apps (installs, views, recent installs, status)

Authentication

Middleware Guard

The middleware (middleware.ts) runs on all routes except static assets and API routes. It checks for two cookies:

• tokenVendorsSagartech — JWT token from the vendor dashboard
• storeSelectedSiyahfy — currently selected store slug

If either is missing, the user is redirected to the vendor login page at app.siyahfy.com/vendor-login with a redirect query parameter pointing back to the developer portal.

Server-Side Data Fetching

The root layout (app/layout.tsx) fetches vendor profile data server-side:

POST {ADMINURL}/api/getVendorLoginDetails
Headers: Authorization: Bearer {tokenVendorsSagartech}
Body: { store_name: "{storeSelectedSiyahfy}" }

The vendor name, email, and store list are passed to the sidebar component.

API Calls to Backend

All API calls go to the central Backend API at process.env.ADMINURL:

Sidebar Navigation

The sidebar (built with Shadcn Sidebar component) has four navigation items:

The sidebar footer shows the logged-in user’s name, email, and avatar. The header shows a team switcher with “Siyahfy - Developer Portal”.

Environment Variables

# Backend API URL (central Siyahfy API)
ADMINURL=https://backend.siyahfy.com
 
# Vendor dashboard URL (for login redirect)
NEXT_PUBLIC_VENDOR_URL=https://app.siyahfy.com
 
# Node environment
NODE_ENV=production