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}/servers`);
const data = await res.json();

// Get server details
const res = await fetch(`${API_URL}/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