Skip to main content

Getting Started with Next.js Admin Panels

Use this guide after downloading an Instamobile admin panel release. The admin panel is a standalone Next.js app that connects to the same Firebase project as the matching React Native app.

Quick Start​

From the admin panel directory:

corepack enable
corepack yarn install --immutable
cp .env.example .env.local
corepack yarn dev

Then open the local URL printed by Next.js, usually:

http://localhost:3000

Before sign-in works, fill .env.local with Firebase web config and server-side Firebase Admin SDK credentials.

1. Confirm Requirements​

Install these tools before running the admin panel:

RequirementVersion or note
Node.js20.9 or newer
CorepackIncluded with supported Node versions
YarnManaged through Corepack
Firebase projectThe same project used by the React Native app
Firebase Auth userUsed for the first admin account

The admin panel is a Next.js application, so it can run independently from Metro and the React Native native projects.

2. Open The Admin Panel Directory​

Open the admin panel directory included in your release. If you also downloaded the React Native app, keep the admin panel and mobile app workflows separate: the mobile app runs with Metro and native tooling, while the admin panel runs as a Next.js web application.

Each release also includes setup, QA, launch, and operations guidance. Review those checklists before inviting the full team, especially if the app handles orders, bookings, trips, reports, campaigns, refunds, payouts, or AI usage.

3. Install Dependencies​

Run:

corepack enable
corepack yarn install --immutable

The --immutable flag confirms that dependencies install exactly as shipped.

4. Configure Environment Variables​

Create the local environment file:

cp .env.example .env.local

Fill the public Firebase web config:

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=

Fill the server-side Firebase Admin SDK config. For local development, you can point the admin panel to a Firebase service account key:

FIREBASE_SERVICE_ACCOUNT_PATH=/path/to/serviceAccountKey.json
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com

or server-only credential values:

FIREBASE_PROJECT_ID=your-project-id
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-...@your-project-id.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"
FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com

Keep .env.local and service account JSON files out of Git.

5. Create The First Admin User​

The first admin account needs access before the Admin Roles page can manage the rest of the team.

Recommended setup:

  1. Create a user in Firebase Authentication.
  2. Assign role: "owner" using Firebase Auth custom claims or a Firestore users/{uid} document.
  3. Start the admin panel.
  4. Sign in with the owner account.
  5. Open Admin Roles and add other team members with smaller roles.

Supported roles:

RoleTypical use
ownerSetup, settings, team access, production configuration.
operatorOrders, bookings, trips, listings, and operational workflows.
supportUser lookup, account assistance, and support actions.
moderatorReports, social content, dating safety, and abusive users.
content_managerCatalog, listings, media, templates, and campaigns.

6. Run The Dashboard Locally​

Start the development server:

corepack yarn dev

Open the local URL and sign in. After login, check these pages first:

  • Dashboard
  • Launch Checklist
  • App Settings
  • Admin Roles
  • Audit Log
  • Support
  • Media Library
  • the app-specific operations page, such as Commerce, Appointments, Taxi, Moderation, Dating Safety, or Messaging

The app-specific page is where the dashboard becomes more than CRUD. Depending on the app, it can include order fulfillment, inventory health, refund tracking, provider availability, driver assignment, content moderation, dating safety, assistant cost signals, or video-call diagnostics.

7. Add App Settings​

Open App Settings and fill the production-facing values that your mobile app and support team rely on:

  • app name;
  • brand name;
  • support email;
  • support phone;
  • support URL;
  • privacy policy URL;
  • terms URL;
  • feature flags;
  • minimum supported app version;
  • remote config version.

Settings are stored in Firestore so the dashboard can keep launch configuration centralized.

8. Verify Shared Firebase Data​

After login works:

  1. run the React Native app against the same Firebase project;
  2. sign in as a normal app user;
  3. create a record from the mobile app, such as a chat, booking, order, listing, post, profile update, or trip request;
  4. confirm the record appears in the admin panel;
  5. update a safe field from the admin panel;
  6. confirm the mobile app reflects the update.

This confirms that both projects point to the same backend.

Useful Commands​

corepack yarn typecheck
corepack yarn build
corepack yarn dev
corepack yarn start

Run typecheck and build before deploying.

Next Steps​