Frontend Server

Next.js (App Router) frontend for the Graho project.

Tech Stack

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS 4
• ESLint 9
• Axios, Socket.IO client, Firebase, Agora RTC, Swiper, Mixpanel

Folder Structure

Frontend-server/
  public/            # Static assets
  src/
    app/             # App Router routes and layouts
    components/      # Reusable UI components
    constants/       # App constants
    contexts/        # React context providers
    hooks/           # Custom React hooks
    lib/             # Shared libraries/helpers
    store/           # State management
    types/           # TypeScript types
    utils/           # Utility helpers
    proxy.ts         # Proxy config/helpers
  next.config.ts
  tailwind.config.js
  tsconfig.json
  package.json

Clone

git clone <repo-url>
cd Frontend-server
npm install

Environment Variables

Create a .env file in Frontend-server/.

See this credentials in Notions

https://www.notion.so/Graho-Credentials-and-Apis-keys-36bb3837c15f803db79ec57c8c5b7197

NEXT_PUBLIC_API_BASE_URL=http://localhost:6001/api
NEXT_PUBLIC_BACKEND_URL=http://localhost:6001
NEXT_PUBLIC_API_URL=http://localhost:6001/api

NEXT_PUBLIC_MAPS_API_KEY=YOUR_GOOGLE_MAPS_API_KEY
NEXT_PUBLIC_RAZORPAY_KEY_ID=YOUR_RAZORPAY_KEY_ID
NEXT_PUBLIC_GA4_ID=YOUR_GA4_ID
NEXT_PUBLIC_META_PIXEL_ID=YOUR_META_PIXEL_ID
NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY=YOUR_WEB_PUSH_PUBLIC_KEY

NEXT_PUBLIC_FIREBASE_API_KEY=YOUR_FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=YOUR_FIREBASE_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID

NEXT_PUBLIC_MIXPANEL_TOKEN=YOUR_MIXPANEL_TOKEN
NEXT_PUBLIC_MIXPANEL_IGNORE_DNT=true

Run

# First Build 
# build
npm run build

# dev
npm run dev

# lint
npm run lint