This repository contains an example app that uses Prisma Pulse in a fullstack application to display and update a real-time leaderboard:
- Next.js (frontend) with a custom server (backend)
- React Flip Move for animating React components
- socket.io for the websocket connection between client and server
- Prisma Pulse to get real-time updates from the database
- PostgreSQL as the database
Note: The custom server is required because Pulse requires a long-running connection to the database. As an alternative to the custom server included in this app, you can also build your own server using a library/framework like Express, Fastify or NestJS.
To successfully run the project, you will need the following:
- The connection string of a Pulse-ready database (if you don't have one yet, you can configure your database following the instructions in our docs or use a Railway template)
- A Pulse API key which you can get by enabling Pulse in a project in your Prisma Data Platform account (learn more in the docs)
Clone the repository, navigate into it and install dependencies:
git clone [email protected]:prisma/prisma-examples.git --depth=1
cd prisma-examples/pulse/fullstack-leaderboard
npm install
Create a .env
in the root of the project directory:
touch .env
Now, open the .env
file and update the DATABASE_URL
and PULSE_API_KEY
environment variables with the values of your connection string and your Pulse API keys:
# .env
DATABASE_URL="__YOUR_DATABASE_CONNECTION_STRING__"
PULSE_API_KEY="__YOUR_PULSE_API_KEY__"
Note that __YOUR_DATABASE_CONNECTION_STRING__
and __YOUR_PULSE_API_KEY__
are placeholder values that you must replace with the values of your own connection string and Pulse API key.
The Prisma schema file in this project contains a single Player
model. You can map this model to the database and create the corresponding Player
table using the following command:
npx prisma migrate dev --name init
You now have a table called Player
in your database.
Next, run the following command to seed the database with some dummy data:
npx prisma db seed
The is invoked the seed script and created three Player
records in the database.
Make sure you're inside the server
directory and start the long-running server that streams changes from the database:
npm run server
The server will accept WebSocket connections at http://localhost:3001
.
Next, run the Next.js app:
npm run dev
You can open the app at http://localhost:3000
.
Every new tab/window you open in your browser and point to that URL will instantiate its own WebSocket connection to the long-running server.
Click on the buttons at the bottom to increase the score of a player and see how the leaderboard updates in real-time.
Because the app requires a custom server to enable the WebSocket connections, you need to deploy the frontend and the backend separately.
In the following, you find instructions to deploy the app via Railway. In order to deploy successfully, you need:
- a Railway account
- the Railway CLI installed on your machine
Create a new