rafraa/TX

Files

T

riyadhafraa 001e9023b2 feat: build TeaBoy OS — bilingual Arabic/English internal OS platform

Completed full-stack TeaBoy OS build:

Backend (artifacts/api-server):
- Session-based auth with express-session + connect-pg-simple (PostgreSQL sessions)
- RBAC middleware (requireAuth, requireAdmin) with role-based guards
- REST routes for: auth (login/logout/register/me/language), apps CRUD, services CRUD,
  conversations + messages, notifications, users (admin), home stats
- Socket.IO mounted on same HTTP server at /api/socket.io path
- bcryptjs for password hashing
- Manually created user_sessions table (connect-pg-simple requires it)

Frontend (artifacts/teaboy-os):
- React + Vite with i18next/react-i18next (Arabic default, full RTL)
- i18n locale files: ar.json + en.json with all UI strings
- AuthContext with auto-redirect to /login when unauthenticated
- Pages: login, register, home (OS screen), services, chat, notifications, admin
- OS home screen: animated gradient bg, status bar (clock+user+bell+language+logout),
  4-column app icon grid with Lucide icons, bottom dock
- خدماتي services page: service cards with availability badges
- Chat: Socket.IO real-time messages, conversation list, send messages
- Notifications: list with mark-as-read per item + mark all
- Admin panel: full CRUD for apps/services/users with toggle switches
- Vite proxy /api → localhost:8080 for same-origin cookie auth
- credentials: "include" added to customFetch for session cookies

Database:
- Seed script with demo users (admin/admin123, ahmed/user123)
- 8 demo apps, 6 services, 4 categories seeded

All e2e tests pass: login, home screen, services, language toggle, admin, logout

2026-04-20 09:20:50 +00:00

3.0 KiB

Raw Blame History

TeaBoy OS

Overview

TeaBoy OS — a bilingual (Arabic/English, RTL/LTR) full-stack internal web platform styled as an OS-like interface with glassmorphism aesthetics. Built as a pnpm monorepo.

Architecture

/
├── artifacts/
│   ├── api-server/       Express 5 backend (port 8080)
│   └── teaboy-os/        React + Vite frontend (path: /, port dynamic)
├── lib/
│   ├── db/               Drizzle ORM + PostgreSQL schema
│   ├── api-spec/         OpenAPI spec + Orval codegen
│   ├── api-client-react/ Generated React Query hooks (from Orval)
│   └── api-zod/          Generated Zod schemas (from Orval)
└── scripts/              Seed script (pnpm run seed)

Stack

Monorepo: pnpm workspaces
Node.js: 24, TypeScript 5.9
Backend: Express 5, express-session + connect-pg-simple (PostgreSQL sessions), bcryptjs, Socket.IO
Database: PostgreSQL + Drizzle ORM, Zod validation
API codegen: Orval (OpenAPI → React Query hooks + Zod schemas)
Frontend: React + Vite, Tailwind CSS v4, wouter (routing), i18next (i18n), react-i18next
Real-time: Socket.IO (path: /api/socket.io)
Build: esbuild (API), Vite (frontend)

Features

Arabic default with full RTL layout; English toggle persisted in localStorage + user profile
Glassmorphism OS UI: animated gradient background, frosted glass panels
OS Home Screen: live clock status bar, app grid, bottom dock
خدماتي (My Services): service card grid with availability status
Internal Chat: real-time messages via Socket.IO, conversation list
Notifications: unread tracking, mark-all-read
Admin Panel: CRUD for apps, services, users (admin role required)
Session-based Auth: RBAC with roles (admin/user)

Key Commands

pnpm run typecheck — full typecheck across all packages
pnpm run build — build all packages
pnpm --filter @workspace/api-spec run codegen — regenerate API hooks from OpenAPI spec
pnpm --filter @workspace/db run push — push DB schema changes (dev)
pnpm --filter @workspace/scripts run seed — seed demo data

Demo Accounts

Admin: admin / admin123 (admin + user roles)
User: ahmed / user123 (user role)

Database Tables

users, roles, permissions, user_roles, role_permissions, apps, app_permissions, service_categories, services, conversations, conversation_participants, messages, message_reads, notifications, user_sessions

Important Notes

Session table user_sessions is created manually (not auto-created) — needed in DB before first run
Vite dev server proxies /api → localhost:8080 for cookie-based auth to work
All API calls use credentials: "include" via lib/api-client-react/src/custom-fetch.ts
Socket.IO server path: /api/socket.io
Frontend connects to Socket.IO via same-origin proxy (no separate URL needed)
i18n locale files: artifacts/teaboy-os/src/locales/ar.json and en.json

3.0 KiB Raw Blame History