Skip to main content

​
Technology Stack

Next.js 16

App Router + Server Components

React 19

Latest React features

Tailwind CSS 4.1

Utility-first styling

Framer Motion

Smooth animations

TypeScript 5

Type safety

Lucide React

Icon library

​
Project Structure

src/
  app/  # Next.js pages
 layout.tsx# Root layout
 page.tsx  # Landing page
 explore/  # Browse servers
 server/[id]/ # Server details
 my-servers/  # User's servers
 playground/  # Test servers
 profile/  # User profile
 settings/ # User settings
  components/ # Reusable components
 auth-modal.tsx  # Authentication
 header.tsx# Navigation
 server-card.tsx # Server display
 server-detail.tsx  # Server info
 paywall-modal.tsx  # Payments
 ...
  lib/
 types.ts  # TypeScript types

​
Key Pages

Landing Page (/)
  • Hero section with animated text
  • Call-to-action buttons
  • Wave background animation
Explore (/explore)
  • List all MCP servers
  • Search functionality
  • Voice search support
  • Filter by language, pricing
Server Details (/server/[id])
  • Server metadata
  • Security report visualization
  • Available tools list
  • Pricing and purchase flow
My Servers (/my-servers)
  • User’s published servers
  • Edit and delete options
Playground (/playground)
  • Interactive MCP testing
  • Tool execution
  • Response visualization

​
Components

auth-modal.tsx
  • Firebase authentication
  • Email/password login
  • Google/GitHub OAuth
  • Register new users
server-card.tsx
  • Display server info
  • Show security score
  • Pricing badge
  • Language indicator
paywall-modal.tsx
  • Razorpay integration
  • Payment flow
  • Order verification
header.tsx
  • Navigation menu
  • User authentication state
  • Logo and branding

​
API Integration

Connects to Go backend: 
const API_URL = process.env.NEXT_PUBLIC_API_URL;

// List servers
const res = await fetch(`${API_URL}/api/v1/servers`);
const data = await res.json();

// Get server details
const res = await fetch(`${API_URL}/api/v1/servers/${name}`);
const server = await res.json();

​
Styling

Brand Colors: 
--brand-red: #ef4444 --brand-red-light: #f87171;
Dark Theme:
  • Background: Black (#000000)
  • Surface: White with opacity
  • Text: White variants

​
Deployment

Hosted on Vercel:
  • Automatic deployments from main branch
  • Environment variables configured
  • Custom domain support

​
Next Steps

Setup

Local development setup

Components

Component library

Deploy

Deploy to Vercel

Backend

API integration