# Use and adapt react-messenger

Use the documented interfaces and source layout for **react-messenger**. The sections below retain the README’s examples and configuration details.

## Demo video

[![Arabic commerce walkthrough in desktop and phone frames](https://github.com/qentrah/react-messenger/blob/migrate/nextjs/assets/demo/device-preview.gif)](assets/demo/device-showcase.mp4)

Watch the full recording: [Device showcase (30 seconds)](https://raw.githubusercontent.com/qentrah/react-messenger/migrate/nextjs/assets/demo/device-showcase.mp4) · [Mobile](https://raw.githubusercontent.com/qentrah/react-messenger/migrate/nextjs/assets/demo/mobile-commerce.mp4) · [Desktop](https://raw.githubusercontent.com/qentrah/react-messenger/migrate/nextjs/assets/demo/desktop-commerce.mp4).

The showcase places the real desktop and mobile recordings inside device frames. Click the preview to open the full video.

Recorded from the working application: browse electronics, choose storage and multiple colors, select delivery and extras, enter sample customer details, review an order, and complete simulated payment. The walkthrough uses Arabic UI, fictional products, and demo mode. No real purchase or payment occurs. Both desktop and mobile walkthrough checks passed.

Recording details and chapter timestamps: [demo assets](https://github.com/qentrah/react-messenger/blob/migrate/nextjs/assets/demo/README.md). Re-record with `npm run build` followed by `npm run record:demo -- --workers=1`.

## Run locally

Use Node.js 24.21.0 (`.nvmrc` included) and npm 12.2.0. Node.js 24.15.0–24.x or 26+ is required by npm 12.

```sh
npm ci
npm run dev
```

Open http://localhost:3000. For production:

```sh
npm run build
npm start
```

`npm start` now runs the Next.js production server; use `npm run dev` for development. Deploy using any Node.js host that supports Next.js. No environment variables or external accounts are required for demo mode. Live assistant mode is optional and requires the server settings below.

## What changed

- Create React App and `react-scripts` replaced with the Next.js App Router and Turbopack.
- React 16 replaced with React 19.3.0; Next.js 16.3.8 installed. Direct runtime packages use the latest stable npm versions checked on October 3, 2026.
- Axios and runtime Random User API requests replaced with bundled demo contacts and local portraits, so the page can render on the server and run without a third-party API connection.
- Moment replaced with native `Date` arithmetic and `Intl.DateTimeFormat`. UTC timestamps render consistently during server rendering and hydration.
- Shave DOM mutation replaced with CSS ellipsis. The old Ionicons CDN font replaced with locally bundled Lucide SVG icons.
- Obsolete ReactDOM initialization, CRA service worker, public HTML template, and stale Yarn lockfile removed. npm is the canonical package manager; `package-lock.json` has been regenerated.
- Next.js metadata, manifest, optimized local contact images, accessible buttons, focus indicators, and native modal dialogs added.
- Sidebar and messages scroll independently. The composer stays within the message panel. On narrow screens, select a conversation and use the back button to return to the list.

## Commands in the root manifest

The captured [package.json](https://github.com/qentrah/react-messenger/blob/HEAD/package.json) declares the following scripts. Run them from the directory containing that manifest.

| Command | Script |
| --- | --- |
| `npm run dev` | `next dev` |
| `npm run build` | `next build` |
| `npm run start` | `next start` |
| `npm run lint` | `node --experimental-strip-types node_modules/eslint/bin/eslint.js --flag unstable_native_nodejs_ts_config . --max-warnings=0` |
| `npm run test` | `tsx --test tests/*.test.ts` |
| `npm run typecheck` | `next typegen && tsc --noEmit` |

## Troubleshoot a local change

1. Reproduce the smallest example from the [quick-start guide](/docs/up-to-code-react-messenger/quick-start-guide).
2. Compare required configuration and dependency versions with the README.
3. Check the linked issue tracker for the same error. Include the command, runtime version, and relevant error when reporting a problem; omit credentials.

## Source and help

- [GitHub repository](https://github.com/qentrah/react-messenger)
- [Original README](https://github.com/qentrah/react-messenger/blob/migrate/nextjs/README.md)
- [Issues and existing reports](https://github.com/qentrah/react-messenger/issues)

The catalog identifies the license as **MIT**. Read the repository license before redistributing source or assets.