Realtime Q&A Chat with Prisma Pulse

This repository contains an example app that uses Prisma Pulse in a fullstack chat application:

• Next.js as the frontend
• Express as the backend
• socket.io for the websocket connection between client and server
• Prisma Pulse to get real-time updates from the database
• PostgreSQL as the database

It's forked from the Prisma Fullstack Simple Chat sample app.

Prerequisites

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)

Getting started

1. Clone the repository

Clone the repository, navigate into it and install dependencies in the client and server directories:

git clone https://github.com/SquiggleConf/realtime-qa-with-prisma-pulse
cd realtime-qa-with-prisma-pulse/client
npm install
cd ../server
npm install

2. Configure environment variables

Create a .env file in the ./server directory:

# make sure you're inside the `server` directory
touch .env

Now, open the ./server/.env file and update the DATABASE_URL and PULSE_API_KEY environment variables with the values of your connection string, your Pulse and Resend API keys:

# ./server/.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.

3. Run a database migration to create the Message table

The Prisma schema file in this project contains a single Message model. You can map this model to the database and create the corresponding Message table using the following command inside the server directory:

# make sure you're inside the `server` directory
npx prisma migrate dev --name init

You now have a table called Message in your database.

4. Start the server

Make sure you're inside the ./server directory and start the long-running server that streams changes from the database:

# make sure you're inside the `server` directory
npm run dev

The server will accept WebSocket connections at http://localhost:3001.

Next, open a new terminal tab/window to run the Next.js app from inside the ./client directory:

# make sure you're inside the `client` directory
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.

5. Use the app

Write text into the chat box and send it. If you open multiple tabs/windows, new users will appear who can contribute to the chat as well. The text will appear in all tabs/windows at the same time.

Resources

• Pulse examples
• Pulse documentation
• Pulse announcement blog post
• Prisma Discord