Skip to content

README.md

Latest commit

 

History

History
94 lines (62 loc) · 2.92 KB

README.md

File metadata and controls

94 lines (62 loc) · 2.92 KB

Full-Stack AI Platform Demo

A multi-service demo covering a Next.js dashboard, Express API, PostgreSQL database, and an Expo mobile app.

What's Inside

Task What Where
1 Live dashboard with real-time counters (Socket.io, 10s intervals) nextjs/
2 Mobile approve/reject message flow expo-chat-app/
3 Docker Compose multi-service stack docker-compose.yml
4 Multi-language switcher with RTL (EN / AR / ES) nextjs/app/i18n/
5 Stripe metered billing ($0.02/sec sessions) nextjs/app/session/ + express-app/functions/session/

Prerequisites

1. Web Dashboard + Backend + Database

Setup

  1. Create .env files from the examples:
cp express-app/.env.example express-app/.env
cp nextjs/.env.example nextjs/.env

  1. Add your Stripe keys:

    • In express-app/.env — set STRIPE_SECRET_KEY to your Stripe secret test key (sk_test_...)
    • In nextjs/.env — set NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY to your Stripe publishable test key (pk_test_...)

    Everything else is pre-filled with working defaults.

Start

docker compose up -d

This starts three containers:

Service URL Container
Next.js Dashboard http://localhost:3000 upwork_nextjs
Express API http://localhost:4000 upwork_express
PostgreSQL localhost:5432 upwork_postgres

What to Look For

  • Dashboard (http://localhost:3000) — Three live metric counters update automatically every 10 seconds. Active connections count reflects open browser tabs.
  • Language Switcher — Top-right dropdown. Switch to Arabic (AR) to see RTL layout flip. Spanish (ES) also available. Persists across refreshes.
  • Session Billing — "Start Session" begins a timer showing running cost at $0.02/sec. "End Session" calculates the final amount and creates a Stripe PaymentIntent. The payment intent ID is displayed on screen.

Stop

docker compose down

2. Expo Mobile App

Setup & Start

cd expo-chat-app
npm install
npx expo start

Scan the QR code with the Expo Go app on your phone.

What to Look For

  • Messages tab — Shows a list of messages with AI-generated summaries fetched from a mock API. Tap a message to see its full content. Use Approve or Reject buttons on each card.
  • Handled tab — Approved messages appear here. Rejected messages are removed.
  • Pull down to refresh and load new messages.

Tech Stack

Next.js 16, React 19, Express 5, PostgreSQL 17, Socket.io, Stripe, i18next, Tailwind CSS, React Native (Expo 54), Docker Compose, TypeScript