Frontend Setup

Set up your local development environment for SuperBox frontend

Prerequisites

Before you begin, ensure you have the following installed:

Node.js 20+

Download from nodejs.org

npm or pnpm

Package manager (npm comes with Node.js)

Git

Version control system

Recommended: Use Node.js 20.x or later for optimal Next.js 16 performance

Quick Start

1. Clone the Repository

   Clone the SuperBox frontend repository to your local machine:

   git clone https://github.com/areebahmeddd/SuperBox-FE.git
   cd SuperBox-FE
   
2. Install Dependencies

   Install all required npm packages:

   npm
   npm install
   

   This will install Next.js 16, React 19, Tailwind CSS 4.1, Framer Motion, and all other dependencies.

3. Configure Environment Variables

   Create a .env.local file in the root directory:

   cp .env.example .env.local
   

   Edit .env.local with your configuration:

   # API Configuration
   NEXT_PUBLIC_API_URL=https://api.superbox.ai
   
   # Firebase Configuration
   NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project_id.firebasestorage.app
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
   NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
   
   # OAuth
   NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id
   GOOGLE_CLIENT_SECRET=your_google_client_secret
   NEXT_PUBLIC_GITHUB_CLIENT_ID=your_github_client_id
   GITHUB_CLIENT_SECRET=your_github_client_secret
   

   Never commit .env.local to version control. It contains sensitive credentials.

4. Start Development Server

   Run the Next.js development server:

   npm run dev
   

   The application will be available at:

   http://localhost:3000

Development Commands

npm run dev

Starts the Next.js development server with hot module replacement (HMR)

npm run dev

Server runs on http://localhost:3000

npm run build

Creates an optimized production build

npm run build

Output is generated in the .next directory

npm run start

Starts the production server (requires build first)

npm run build && npm run start

Serves the optimized production build

npm run lint

Runs ESLint to check code quality

npm run lint

Identifies and fixes linting issues

npm run type-check

Runs TypeScript type checking

npm run type-check

Validates TypeScript types without building

Project Structure

SuperBox-FE/
  public/ # Static assets
 icons/# App icons and favicons
 manifest.json  # PWA manifest
 robots.txt  # SEO robots file
 sitemap.xml # SEO sitemap
  src/
 app/  # Next.js App Router pages
layout.tsx# Root layout
page.tsx  # Home page
explore/  # Explore servers page
server/[id]/ # Dynamic server detail page
...
 components/ # React components
header.tsx
server-card.tsx
auth-modal.tsx
...
 lib/  # Utilities and types
types.ts
 styles/
globals.css  # Global styles
  .env.local # Environment variables (create this)
  next.config.mjs  # Next.js configuration
  tailwind.config.ts  # Tailwind CSS configuration
  tsconfig.json # TypeScript configuration
  package.json  # Dependencies

IDE Configuration

VS Code (Recommended)

Install recommended extensions for the best development experience:

.vscode/extensions.json

{
  "recommendations": [
 "dbaeumer.vscode-eslint",
 "esbenp.prettier-vscode",
 "bradlc.vscode-tailwindcss",
 "ms-vscode.vscode-typescript-next"
  ]
}

WebStorm / IntelliJ IDEA

Enable these features:

• TypeScript Language Service
• ESLint integration
• Prettier integration
• Tailwind CSS IntelliSense

Troubleshooting

Port 3000 already in use

If port 3000 is occupied, specify a different port:

PORT=3001 npm run dev

Or kill the process using port 3000:

# On Linux/macOS
lsof -ti:3000 | xargs kill -9

# On Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F

Module not found errors

Clear node_modules and reinstall:

rm -rf node_modules package-lock.json
npm install

TypeScript errors

Restart the TypeScript server in VS Code:

1. Press Cmd/Ctrl + Shift + P
2. Type “TypeScript: Restart TS Server”
3. Press Enter

Tailwind styles not working

Ensure Tailwind is properly configured and rebuild:

npm run build
npm run dev

API connection errors

Verify your backend is running and environment variables are correct:

# Check backend status
curl http://localhost:8000/health

# Verify .env.local
cat .env.local | grep NEXT_PUBLIC_API_URL

Performance Tips

Enable experimental features in next.config.mjs for better performance:

const nextConfig = {
experimental: {
optimizePackageImports: ['framer-motion'],
serverActions: true,
},
}

Next Steps

Component Library

Explore reusable components

Backend Setup

Set up the Go API backend

Deploy Frontend

Deploy to Vercel

API Integration

Learn about API endpoints