How to Build a Admin Panel with Replit

1// Prompt to type into Replit Agent:
2// Build a Node.js Express admin panel app with:
3// - Built-in PostgreSQL using Drizzle ORM
4// - Replit Auth for login (use @replit/replit-auth-express)
5// - Drizzle schema in shared/schema.ts with tables:
6//   * users: id serial pk, user_id text not null unique, email text, display_name text,
7//     role text not null default 'viewer' (admin/editor/viewer), avatar_url text,
8//     created_at timestamp default now(), last_login_at timestamp
9//   * managed_entities: id serial, type text not null, title text not null,
10//     status text default 'active', data jsonb, created_by text, updated_at timestamp default now()
11//   * audit_logs: id serial, user_id text references users(user_id), action text not null,
12//     entity_type text, entity_id integer, old_value jsonb, new_value jsonb,
13//     ip_address text, created_at timestamp default now()
14//   * app_settings: id serial, key text unique not null, value text,
15//     updated_by text, updated_at timestamp default now()
16// - Express routes under /api/admin/* protected by requireRole middleware
17// - React frontend with sidebar nav, data table with sorting and pagination, modal edit forms
18// - Role badges: admin=red, editor=yellow, viewer=gray
19// - Health check at GET /api/health

1import { pgTable, serial, text, integer, jsonb, timestamp, boolean } from 'drizzle-orm/pg-core';
2
3export const users = pgTable('users', {
4  id: serial('id').primaryKey(),
5  userId: text('user_id').notNull().unique(),
6  email: text('email'),
7  displayName: text('display_name'),
8  role: text('role').notNull().default('viewer'),
9  avatarUrl: text('avatar_url'),
10  createdAt: timestamp('created_at').defaultNow(),
11  lastLoginAt: timestamp('last_login_at'),
12});
13
14export const managedEntities = pgTable('managed_entities', {
15  id: serial('id').primaryKey(),
16  type: text('type').notNull(),
17  title: text('title').notNull(),
18  status: text('status').default('active'),
19  data: jsonb('data'),
20  createdBy: text('created_by').notNull(),
21  updatedAt: timestamp('updated_at').defaultNow(),
22});
23
24export const auditLogs = pgTable('audit_logs', {
25  id: serial('id').primaryKey(),
26  userId: text('user_id'),
27  action: text('action').notNull(),
28  entityType: text('entity_type'),
29  entityId: integer('entity_id'),
30  oldValue: jsonb('old_value'),
31  newValue: jsonb('new_value'),
32  ipAddress: text('ip_address'),
33  createdAt: timestamp('created_at').defaultNow(),
34});
35
36export const appSettings = pgTable('app_settings', {
37  id: serial('id').primaryKey(),
38  key: text('key').notNull().unique(),
39  value: text('value'),
40  updatedBy: text('updated_by'),
41  updatedAt: timestamp('updated_at').defaultNow(),
42});

1import { db } from '../db.js';
2import { users } from '../../shared/schema.js';
3import { eq } from 'drizzle-orm';
4
5// Retry wrapper for PostgreSQL idle sleep reconnections
6async function withRetry(fn, retries = 3) {
7  for (let i = 0; i < retries; i++) {
8    try {
9      return await fn();
10    } catch (err) {
11      if (err.code === 'ECONNRESET' && i < retries - 1) {
12        await new Promise(r => setTimeout(r, 500));
13        continue;
14      }
15      throw err;
16    }
17  }
18}
19
20export function requireRole(...allowedRoles) {
21  return async (req, res, next) => {
22    const replitUserId = req.get('X-Replit-User-Id');
23    if (!replitUserId) return res.status(401).json({ error: 'Not authenticated' });
24
25    try {
26      const [user] = await withRetry(() =>
27        db.select().from(users).where(eq(users.userId, replitUserId)).limit(1)
28      );
29
30      if (!user) return res.status(403).json({ error: 'User not found in admin panel' });
31      if (!allowedRoles.includes(user.role)) {
32        return res.status(403).json({ error: 'Insufficient permissions' });
33      }
34
35      req.adminUser = user;
36      next();
37    } catch (err) {
38      res.status(500).json({ error: 'Auth check failed' });
39    }
40  };
41}

1import { db } from '../db.js';
2import { auditLogs, managedEntities } from '../../shared/schema.js';
3import { eq } from 'drizzle-orm';
4
5// In your PUT /api/admin/entities/:id route:
6export async function updateEntity(req, res) {
7  const { id } = req.params;
8  const { title, status, data } = req.body;
9
10  // 1. Read old value BEFORE mutation
11  const [old] = await db.select().from(managedEntities).where(eq(managedEntities.id, Number(id)));
12  if (!old) return res.status(404).json({ error: 'Not found' });
13
14  // 2. Apply mutation
15  const [updated] = await db
16    .update(managedEntities)
17    .set({ title, status, data, updatedAt: new Date() })
18    .where(eq(managedEntities.id, Number(id)))
19    .returning();
20
21  // 3. Write audit log entry in the same logical operation
22  await db.insert(auditLogs).values({
23    userId: req.adminUser.userId,
24    action: 'update',
25    entityType: 'managed_entity',
26    entityId: Number(id),
27    oldValue: old,
28    newValue: updated,
29    ipAddress: req.ip,
30  });
31
32  res.json(updated);
33}

1// GET /api/admin/users — list all users with pagination
2app.get('/api/admin/users', requireRole('admin'), async (req, res) => {
3  const limit = parseInt(req.query.limit) || 20;
4  const offset = parseInt(req.query.offset) || 0;
5  const allUsers = await db.select().from(users).limit(limit).offset(offset);
6  res.json(allUsers);
7});
8
9// PATCH /api/admin/users/:id/role — change a user's role (admin only)
10app.patch('/api/admin/users/:id/role', requireRole('admin'), async (req, res) => {
11  const { id } = req.params;
12  const { role } = req.body;
13  if (!['admin', 'editor', 'viewer'].includes(role)) {
14    return res.status(400).json({ error: 'Invalid role' });
15  }
16
17  const [old] = await db.select().from(users).where(eq(users.id, Number(id)));
18  const [updated] = await db
19    .update(users)
20    .set({ role })
21    .where(eq(users.id, Number(id)))
22    .returning();
23
24  await db.insert(auditLogs).values({
25    userId: req.adminUser.userId,
26    action: 'role_change',
27    entityType: 'user',
28    entityId: Number(id),
29    oldValue: { role: old.role },
30    newValue: { role: updated.role },
31    ipAddress: req.ip,
32  });
33
34  res.json(updated);
35});

1// Before deploying, verify these settings in .replit:
2// [deployment]
3// run = ["node", "server/index.js"]
4// deploymentTarget = "autoscale"
5//
6// In Replit Secrets panel (lock icon), add any external API keys your admin consumes:
7// DATABASE_URL is auto-provided by Replit — do NOT set it manually
8//
9// Deployment Secrets (set separately from workspace secrets):
10// Any external API keys must be re-added under Deployment → Secrets
11// because workspace Secrets do NOT carry over to deployments automatically
12//
13// After deployment:
14// 1. Share the deployed URL with your team members
15// 2. Each person logs in with their Replit account
16// 3. Their user row is created automatically on first login
17// 4. Go to Drizzle Studio on the deployed app (or promote via admin panel)
18//    to set their role