Frontend Overview

Next.js 16 + React 19 + Tailwind CSS 4.1

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