Skip to content

areebahmeddd/SuperBox-FE

Repository files navigation

SuperBox Frontend

Web marketplace for the SuperBox platform, built with Next.js 16, React 19, TypeScript 5, and Tailwind CSS 4.

Pages

Route Description
/ Landing page
/explore Browse and search the MCP server registry
/server/[id] Server detail: tools, security report, pricing
/my-servers Authenticated user's published servers
/profile User profile and account settings
/settings Application preferences
/playground Interactive server testing (coming soon)

Stack

Package Version Purpose
Next.js 16 Framework and routing
React 19 UI rendering
TypeScript 5 Type safety
Tailwind CSS 4 Styling
Firebase 12 Authentication
Framer Motion 12 Animations
Base UI 1 Headless UI primitives
Razorpay - Payment integration

Project Structure

src/
├── app/                  # Next.js App Router pages
│   ├── page.tsx          # Landing page
│   ├── explore/          # Server browser with search
│   ├── server/[id]/      # Server detail page
│   ├── my-servers/       # User's published servers
│   ├── profile/          # User profile
│   ├── settings/         # App settings
│   └── playground/       # Interactive playground
├── components/           # Shared UI components
│   ├── header.tsx
│   ├── server-card.tsx
│   ├── server-detail.tsx
│   ├── server-tabs.tsx
│   ├── tool-card.tsx
│   ├── security-report.tsx
│   ├── publish-modal.tsx
│   ├── auth-modal.tsx
│   ├── paywall-modal.tsx
│   └── ui/               # Base UI primitives
├── lib/                  # Utilities and configuration
│   ├── firebase.ts       # Firebase client
│   ├── types.ts          # Shared type definitions
│   ├── utils.ts          # Helper functions
│   └── toast-utils.ts    # Toast notification helpers
├── styles/               # Global CSS
└── types/                # Third-party type declarations

Setup

1. Install dependencies

cd frontend
npm install

2. Configure environment

Copy .env.example to .env.local and fill in the values:

NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1

NEXT_PUBLIC_FIREBASE_API_KEY=...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=...
NEXT_PUBLIC_FIREBASE_PROJECT_ID=...
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=...
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=...
NEXT_PUBLIC_FIREBASE_APP_ID=...
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=...

NEXT_PUBLIC_GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...

NEXT_PUBLIC_GITHUB_CLIENT_ID=...
GITHUB_CLIENT_SECRET=...

NEXT_PUBLIC_API_URL must point to a running instance of the Go backend. See backend/docs/INSTALL.md for backend setup.

3. Run the development server

npm run dev
# Available at http://localhost:3000

4. Build for production

npm run build
npm start

Docker

Build the image (environment variables are baked in at build time via --build-arg):

docker build -t superbox-fe:latest \
  --build-arg NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1 \
  --build-arg NEXT_PUBLIC_FIREBASE_API_KEY=your_key \
  .

Run:

docker run -d -p 3000:3000 --name superbox-fe --env-file .env superbox-fe:latest

Documentation

Full frontend documentation: https://superbox.1mindlabs.org/docs/frontend

To run the Mintlify docs locally:

npm run docs

Releases

No releases published

Packages

 
 
 

Contributors

Languages