# Node Vite React Express PostgreSQL watchlist

A watchlist app for planning movie and show nights, with a React interface over an Express JSON API. It runs on Tokay as one Web Service. Your list lives in a PostgreSQL database, so it survives every redeploy.

The repository has a Vite client and an Express server, a common and performant web architecture. If you asked an AI to build you a website with a backend, you would probably get something close to this. Tokay recognizes the two halves and deploys them together, so you never wire them up yourself.

## Facts

- Runtime: Node.js
- Framework: React, Vite, and Express
- Service types: Web Service
- Resources: PostgreSQL
- Required secrets: None

## What it does

The page shows a list of movies and shows that you can scroll, search by title, and filter by mood.

You can switch the view between waiting, watched, and all. A live count shows how many titles are waiting.

When you finish watching something, press Mark watched. Changed your mind? Put it back.

You can add your own titles with a format and a mood, and they appear in the list right away.

## Deploy it

Bring this folder to Tokay any way you like. Paste or upload it in the dashboard, push it with git, or hand it to your AI agent along with [our agent instructions](https://app.tokay.io/llms.txt). Tokay figures out the rest.

Working in Claude, ChatGPT, VS Code, or another MCP client? Connect the [Tokay MCP server](https://tokay.io/docs/platform-mcp) and ask your agent to deploy this example. It signs in through your browser, so there is no token to paste.

New to Tokay? The [getting started guide](https://tokay.io/getting-started) walks you through your first deploy.

## Finish setup in Tokay

The watchlist needs PostgreSQL to keep your recommendations. Open **Environment**, find `DATABASE_URL` under **From your infrastructure**, and choose **Confirm database**. Keep `app`, then choose **Confirm**.

When `DATABASE_URL` says **Good to go**, follow the deployment tracker. Tokay tests the database migration against a copy before release. If **Go Live** appears, choose it. When the Service status says **Live**, click the live URL in the top section to open the watchlist.

## Try it

1. Search for `moon`, choose **space**, then switch between **waiting** and **watched**.
2. Add a recommendation of your own.
3. Update the code as you like and deploy again. Your addition is still there because it was saved in your app's database.

## How it works

The Express server serves both the React page and the JSON API from one address. When you mark a title watched, the page calls the API and the API updates a row in PostgreSQL. Refresh or redeploy and your list looks the same, because the data lives in the database instead of the app.

Wondering where the database comes from? Tokay creates it for you. It recognizes the migration file in this code, tests it on a copy of your database before touching the real one, and runs it during the deploy. The app then adds a few starting titles so your first visit is not an empty page.

## Secrets

This example needs none. Tokay supplies `DATABASE_URL` when you confirm the managed PostgreSQL database.

## Grow from here

Try the [task tracker](/examples/node-express-postgres-task-tracker) when you want a smaller interface and more API examples.

## Source files

- [.gmrc](https://tokay.io/examples/src/node-vite-react-express-postgres-watchlist/.gmrc)
- [client/index.html](https://tokay.io/examples/src/node-vite-react-express-postgres-watchlist/client/index.html)
- [client/package.json](https://tokay.io/examples/src/node-vite-react-express-postgres-watchlist/client/package.json)
- [client/src/App.jsx](https://tokay.io/examples/src/node-vite-react-express-postgres-watchlist/client/src/App.jsx)
- [client/src/main.jsx](https://tokay.io/examples/src/node-vite-react-express-postgres-watchlist/client/src/main.jsx)
- [client/src/style.css](https://tokay.io/examples/src/node-vite-react-express-postgres-watchlist/client/src/style.css)
- [client/vite.config.js](https://tokay.io/examples/src/node-vite-react-express-postgres-watchlist/client/vite.config.js)
- [migrations/committed/000001-watchlist.sql](https://tokay.io/examples/src/node-vite-react-express-postgres-watchlist/migrations/committed/000001-watchlist.sql)
- [package.json](https://tokay.io/examples/src/node-vite-react-express-postgres-watchlist/package.json)
- [server/index.js](https://tokay.io/examples/src/node-vite-react-express-postgres-watchlist/server/index.js)

## Download and source

- [Download the complete project](https://tokay.io/examples/downloads/node-vite-react-express-postgres-watchlist.zip)
- Last updated: 2026-07-31
- Example revision: `52c7b7f`
- [View this revision on GitHub](https://github.com/tokayio/tokay-examples/tree/52c7b7ffd52e157375b08f1f11ff4fbe6c498642/node-vite-react-express-postgres-watchlist)
- [Deploy a React app with a backend](https://tokay.io/use-cases/deploy-react-app-with-backend)