Skip to content

Latest commit

 

History

History
117 lines (84 loc) · 3.22 KB

File metadata and controls

117 lines (84 loc) · 3.22 KB

Web App — Readmigo Core User Product

Readmigo Web is the core web application for Readmigo, providing online reading, vocabulary management, content discovery, and more. Users can use the web app directly in the browser without installing the iOS or Android app.

Role

The web app is one of the three primary clients of Readmigo (iOS, Android, Web). It shares the backend API with the mobile apps and targets desktop users and web browsing scenarios. Related projects include the marketing site (website) and the content management platform (docs).

Tech Stack

  • Framework: Next.js 16 (App Router)
  • Language: TypeScript (strict mode)
  • Styling: Tailwind CSS 4
  • State Management: Zustand
  • Authentication: NextAuth.js
  • Analytics: PostHog, Amplitude, Sentry
  • Testing: Vitest (unit), Playwright (E2E)
  • Package Manager: pnpm 9.14.2
  • Node.js: 20.x

Architecture

graph LR
    A[Browser] -->|HTTP/S| B[Vercel CDN]
    B -->|SSR/SSG| C[Next.js App]
    C -->|API Calls| D[Readmigo API]
    C -->|Event Tracking| E[PostHog/Amplitude]
    C -->|Error Tracking| F[Sentry]
    D -->|Query/Update| G[Database]
Loading

Directory Structure

  • src/app/ — Next.js App Router pages and layouts
  • src/components/ — React component library
  • src/features/ — Feature modules (reading, vocabulary, discovery, etc.)
  • src/hooks/ — Custom React hooks
  • src/i18n/ — Internationalization configuration and translations
  • src/lib/ — Utility functions and shared libraries
  • src/styles/ — Global styles
  • src/test/ — Test utilities and fixtures
  • src/types/ — TypeScript type definitions
  • public/ — Static assets (favicon, manifest, etc.)

Local Development

Requirements

  • Node.js 20.x
  • pnpm 9.14.2
  • Readmigo API (backend) running

Install and Run

# Install dependencies
pnpm install

# Configure environment variables (copy example and fill in)
cp .env.example .env.local

# Start the dev server (port 3001)
pnpm dev

# Run unit tests
pnpm test

# Run E2E tests
pnpm test:e2e

# Build production bundle
pnpm build

# Start production server
pnpm start

# Type checking
pnpm typecheck

# Linting
pnpm lint

Deployment

The web app is deployed on Vercel; the configuration file is vercel.json.

Environment URL Trigger
Production https://web.readmigo.app Push to main branch
Preview {branch}.readmigo.vercel.app Pull request created

The GitHub Actions workflow (ci.yml) runs linting and type checking on every commit; once they pass, deployment to Vercel happens automatically.

Environment Variables

REQUIRED:

  • NEXT_PUBLIC_API_URL — Readmigo API base URL
  • NEXT_PUBLIC_POSTHOG_KEY — PostHog project API key
  • NEXT_PUBLIC_AMPLITUDE_KEY — Amplitude API key
  • NEXT_PUBLIC_SENTRY_DSN — Sentry error tracking DSN
  • NEXTAUTH_SECRET — NextAuth.js encryption secret
  • NEXTAUTH_URL — Application base URL

Related Repos

Documentation