Build a Task Board with Neon Realtime

Build a React task board that syncs across tabs with Neon Realtime.

Introduction

30 Second Summary

Shared task boards become unreliable when each person sees a different version. Refreshing the page only hides the problem until the next change.

In this project, you will build a shared task board with React on a Neon Postgres database. You will use Neon Realtime so every open browser sees each database change immediately.

What You'll Build

You'll add a task in one browser window and watch it appear in another without refreshing either page.

By the end of this project, you'll have:

A live task board that displays tasks from your Neon Postgres database.
A terminal subscription that streams new rows from an SQL query as the data changes.
Two synchronised browser windows that show task inserts and updates without polling or manual refreshes.
Secret Mission: An optional challenge to push your realtime application skills further.

Are there any prerequisites?

You'll need a free Neon account and the Neon CLI. You'll also need Node.js so you can run the React app locally.

Before We Start

Your live task board depends on Neon Realtime. The beta currently works only in selected regions.

This step prepares your Neon account. It also prepares the local tools that every later command depends on. You will finish with the Neon CLI authenticated in your terminal.

In this step, get ready to:

Prepare a Neon account for the Realtime beta.
Prepare your local development tools.
Authenticate the Neon CLI.

Prepare your Neon access

Your Neon account gives the CLI permission to manage your future database project. Your region choice determines whether that project can use Realtime.

Open the Neon Console.
Create a free account with your preferred sign-in method.
Complete the account verification if Neon requests it.
Return to the Neon Console.

You should see the Neon onboarding flow. This confirms that your account is available for the CLI authentication later in this step.

Which regions support Realtime?

Neon Realtime is available in four regions during the beta. Choose the closest supported region to reduce the distance between your app and its database.

N. Virginia: aws-us-east-1.
Ohio: aws-us-east-2.
Frankfurt: aws-eu-central-1.
Singapore: aws-ap-southeast-1.

Choose the supported region closest to you.
Record your region choice here: your Neon Realtime region.

Prepare your local tools

The Neon CLI runs through Node.js. The CLI requires Node.js 20.19.0 or higher. npm comes with Node.js.

Press Cmd+Space on macOS or the Windows key on Windows.
Type Terminal on macOS or PowerShell on Windows.
Press Enter.
Check your Node.js version and npm version by running these commands:

node --version
npm --version

What do these checks show?

The first command prints your installed Node.js version. The second command confirms that npm is available for installing the Neon CLI.

✔️ I see the required version

Node.js meets the minimum requirement. npm is available for the CLI installation.

Keep this terminal open for the next substep.

ⓧ I see an older version

Your current Node.js version cannot run the required Neon CLI release. Install an LTS release that is version 20.19.0 or higher.

Open the official Node.js download page.
Choose an LTS release that meets the minimum version.
Download the installer for your operating system.
Run the downloaded installer with its default options.
Close your existing terminal.
Reopen your terminal through your operating system search.
Check the updated versions by running these commands:

node --version
npm --version

What should you see?

The first line should show Node.js 20.19.0 or higher. The second line should show an npm version.

Still seeing the older version?

Reopen your terminal so it can detect the new installation.
Confirm that you downloaded an LTS release meeting the minimum version.

If the older version still appears, help me diagnose which Node.js installation my terminal is using.

ⓧ Command not found

Node.js is missing from your command path. Installing an LTS release also installs npm.

Open the official Node.js download page.
Choose an LTS release that meets version 20.19.0 or higher.
Download the installer for your operating system.
Run the downloaded installer with its default options.
Close your existing terminal.
Reopen your terminal through your operating system search.
Confirm the installation by running these commands:

node --version
npm --version

What should you see?

Both commands should print version numbers. This confirms that your terminal can find Node.js and npm.

Commands still unavailable?

Restart your computer so the installer can finish updating your command path.
Run the Node.js installer again if the commands remain unavailable.

If the commands still fail, help me fix my Node.js command path.

A code editor gives you a place to change the React files created later. Any editor that can work with a local folder is suitable.

Choose the code editor you plan to use.
Install the editor from its official website if it is missing.
Press Cmd+Space on macOS or the Windows key on Windows.
Type the name of your chosen editor.
Press Enter.

You should see your editor's start screen. Your terminal is ready too.

Set up the Neon CLI

The Neon CLI lets you manage Neon from your terminal. Authentication connects the CLI to the account you prepared earlier.

Return to your terminal from the previous substep.
Install the latest Neon CLI globally by running this command:

npm i -g neon@latest

What does this command do?

The global installation makes the neon command available from any folder. The @latest tag selects the latest published CLI release.

Confirm that the Neon CLI is available by running this command:

neon --version

What should you see?

You should see a Neon CLI version number. This confirms that your terminal can run the CLI.

Neon command unavailable?

Reopen your terminal so it can detect the global installation.
Run the installation command again from a terminal with permission to install global npm packages.

If the command remains unavailable, help me fix my Neon CLI installation.

The login command opens a browser authorization flow. Neon uses that flow to connect the CLI without asking you to paste a credential into the terminal.

Start the browser authentication flow by running this command:

neon login

What happens during login?

The command opens your browser for Neon authorization. After approval, the CLI stores the resulting credential locally for future commands.

Sign in with the Neon account you created earlier.
Approve the request to let the CLI access your Neon account.
Return to your terminal after the browser confirms authorization.

Before you run the final check, do you expect the CLI to recognize the same Neon account you used in the browser?

Confirm the authenticated account by running this command:

neon me

What should you see?

You should see details for your Neon account plus its authentication method. This proves that the CLI can act on your account.

Account details missing?

Run the login command above again if the browser flow did not finish.
Approve the authorization request in the same browser where your Neon account is signed in.

If the account check still fails, help me debug my Neon CLI authentication.

That's the setup complete. Your terminal can now manage Neon through your authenticated account.

Your Neon account can now be managed from the terminal. Next up, you will create a project in your chosen region before enabling Realtime.

Create a Realtime Neon Project

A self-updating task board needs a database that can send changes as they happen. Neon Realtime turns ordinary SQL data into live updates for your app.

This step creates the database project in the supported region you identified earlier. It also enables Realtime on the project’s default branch.

In this step, get ready to:

Create a Neon project named task-board-realtime in your supported region.
Enable Realtime through the Neon CLI.
Confirm Realtime is ready in the Neon Console.

Create the Neon project

A Neon project becomes the database home for every task on your board. Its region determines whether the Realtime beta is available.

Set your realtime-supported region ID to aws-us-east-1, aws-us-east-2, aws-eu-central-1, or aws-ap-southeast-1 to match the supported region you identified earlier.
Create the task-board-realtime project by running this command:

neon projects create --name task-board-realtime --region-id [[NEON_REGION_ID="your realtime-supported region ID"]] --no-secrets

What does this command do?

The --name flag gives the project its fixed name.
The --region-id flag places the database in your selected Realtime-supported region.
The --no-secrets flag keeps connection credentials out of your terminal output.

Confirm the output shows task-board-realtime as the project name.
Confirm the output shows your realtime-supported region ID as the region.
Record the value beside ID here: your Neon project ID.

That is the foundation in place: your database project now sits in a region that can run live queries.

Project creation failed?

Check that your selected region uses one of the four supported CLI region IDs shown above.
Check that your Neon account has room for another project.

Still stuck? Help me diagnose why my Neon project creation command failed.

Enable Realtime from the CLI

Realtime runs on a database branch. This command targets the new project by its project ID.

Provisioning usually finishes in a few seconds. A brief pause here is expected.

Enable Realtime on the project’s default branch by running this command:

neon realtime enable --project-id [[NEON_PROJECT_ID="your Neon project ID"]]

What does this command do?

The command sends a Realtime enable request to your recorded project ID.
The missing branch option makes Neon use the project’s default branch.

Wait for the command to confirm that the Realtime enable request was accepted.

The accepted request proves that the CLI reached your project. The Console check next confirms that provisioning has completed.

Realtime enable request failed?

Confirm that your Neon project ID matches the project ID from the creation output.
Confirm that the project region matches your realtime-supported region ID.

Need another pair of eyes? Help me debug my Neon Realtime enable request.

Confirm Realtime in the Neon Console

The CLI confirms that Neon accepted the request. The Realtime page provides the completed-state check.

Protect the Realtime credentials

This screen contains sensitive connection details. Opening it is safe on your own device.

Keep every connection value private.
Redact every connection value before uploading a screenshot.

Before you check, do you expect the Realtime page to be ready already? Your next check puts that expectation to the test.

Open the Neon Console in your browser.
Complete sign-in if Neon prompts you.
Select task-board-realtime from your project list.
Select Postgres database in the project navigation.
Select Realtime.

You’ll see the Realtime page with its connection details. This confirms that Realtime is enabled for task-board-realtime.

Still see Enable Realtime?

Wait a few seconds for provisioning to finish.
Refresh the Realtime page.
Confirm that task-board-realtime is the selected project.

If the page still does not show the connection details, help me troubleshoot the pending Realtime setup.

Your Neon project now has Realtime enabled on its database branch. Next up, you’ll bootstrap the React starter and see it running locally.

Run the Realtime React Template

Your task-board-realtime project now has Neon Realtime enabled in a supported region. That database can now provide live changes.

A browser needs a connected application before it can display those changes.

In this step, you will scaffold the React starter. You will connect it to your existing Neon project before running it locally.

In this step, get ready to:

Bootstrap the Realtime React starter on your Desktop.
Connect the starter to the task-board-realtime project.
Run the development server to see the starter application.

Prepare the local app folder

The Neon CLI can scaffold the official Realtime React starter from one template. The generated project includes the packages needed to run the app.

Move to your Desktop by running this command:

cd ~/Desktop

What does this command do?

The cd command changes the terminal's current location. Your new app folder appears on the Desktop where it is easy to find.

The bootstrap can take a few minutes while it downloads the starter files. A quiet terminal during dependency installation is expected.

Create the my-app folder by running the command below:
Keep dependency installation enabled when the setup prompt appears.
Keep project linking enabled when the setup prompt appears.
Select task-board-realtime when the CLI lists your Neon projects.

neon bootstrap my-app --template realtime-react

What does this command create?

The directory argument creates a new my-app folder on your Desktop.
The template option selects Neon's Realtime React starter.
The setup flow installs the starter dependencies.
The project selection links the local folder to task-board-realtime.

Confirm the bootstrap summary names the my-app folder.
Confirm the project selection points to task-board-realtime.

Good progress. Your React starter now exists locally with its dependencies installed.

Did the bootstrap stop early?

Check that the terminal is on your Desktop. Remove or rename an existing my-app folder before trying the bootstrap again.

If the dependency installation or project linking fails, help me debug the Neon bootstrap. You can also ask the Neon Discord community.

Connect the template to Neon

The starter includes a neon.ts configuration file. Deploying that configuration pulls the linked database details into the local app.

Keep local credentials private

The deployment writes database credentials to .env.local. Keep this file private because it contains the secret used to seal Realtime queries.

Apply the generated Neon configuration from the my-app folder by running:

cd my-app
neon deploy

What does this deployment do?

The first line moves the terminal into the local app folder.
The deploy command applies the services declared in neon.ts to the linked Neon project.
The deployment writes DATABASE_URL to .env.local.
The deployment also writes NEON_REALTIME_URL and NEON_REALTIME_SECRET to the same file.

Check the final deployment summary for a successful configuration.
Use your code editor's folder-opening control to open my-app from your Desktop.
Confirm neon.ts appears in the code editor's file tree.
Confirm .env.local appears in the file tree without opening it.

Did the deployment use the wrong project?

Check the deployment summary for the linked project name. Use the Neon CLI's project-linking flow again if it does not show task-board-realtime.

If the expected environment file is missing, help me debug the Neon deployment.

Launch the starter application

The starter needs its database schema before the page can use it. The included setup script applies that schema to the linked database.

Prepare the starter database by running:

npm run db:setup

What does the setup script do?

The setup script runs the starter's database migrations against task-board-realtime. This gives the starter application the database structure it expects.

Confirm the setup command finishes without a migration error.

Did the database setup fail?

Confirm the earlier deployment completed successfully. A missing local environment file prevents the setup script from reaching your database.

If the migration still fails, help me debug the starter database setup.

Before you start the server, what do you expect the browser to show when the local address loads?

Start the local development server by running:

npm run dev

What happens while this runs?

The Vite development server starts the React application on your computer. The terminal process stays active while the server is running.

Keep this terminal running while you use the app. Press Ctrl+C when you are ready to stop the server.

Leave the development server running in the terminal.
Open http://localhost:5173 using your terminal's link control.

You will see the shared starter application in your browser. This page confirms that the local app is running with the linked Neon configuration.

Does the starter page fail to load?

Confirm the development server is still running in the my-app terminal. Check that the browser address uses port 5173.

If the page reports a database problem, help me debug the local Realtime starter.

Your local starter is running with the task-board-realtime database configuration. Next, you will subscribe to a SQL query and watch a new row stream into the terminal.

Test a Live SQL Subscription

Your starter app proves the local template can reach the database. A static screen cannot prove that a database change reaches an active subscriber.

A terminal test isolates the Neon Realtime data path. You will watch one SQL insert update a live result.

In this step, get ready to:

Prepare a small table with a sample row.
Subscribe to a live query from the terminal.
Watch a second row stream into the active subscription.

Prepare a table for the live query

A live query needs a stable result set to watch. A small items table in Postgres keeps the changing rows easy to spot.

Create a second terminal session in the code editor from earlier.
Set its current directory to the local template folder from earlier.
Prepare the test table with its first row by running these commands:

neon psql -- -c "CREATE TABLE items (id UUID PRIMARY KEY DEFAULT gen_random_uuid(), value TEXT)"
neon psql -- -c "INSERT INTO items (value) VALUES ('foo')"

What do these commands set up?

The first command creates an items table with a generated identifier for each row.
The second command adds foo as the baseline value for the subscription.

Check the command output for successful table creation.
Check the command output for one inserted row.

Your test table now has a baseline row that the live subscription can display.

Table setup failed?

Confirm that the new terminal is inside the local template folder from earlier.
Check that the Neon CLI still targets task-board-realtime.
Skip the table-creation line when retrying if the table already exists.

You can ask for help debugging the table setup or ask the Neon community.

Start the live subscription

A subscription stays connected after it shows the current rows. The command keeps this terminal busy until you stop it with Ctrl+C.

Start the live subscription from the second terminal by running this command:

neon realtime subscribe "SELECT * FROM items"

What does this command do?

The command subscribes to the full result of the SELECT * FROM items query. Neon sends the current rows when the subscription starts.

The connection remains active after the initial result. Each database change refreshes the displayed query result.

Leave the subscription process running.
Check the displayed result for the row containing foo.

No initial row in the subscription?

Confirm that the subscription command is still running in the second terminal.
Confirm that the table setup reported a successful initial insert.
Check that both terminal sessions target the same linked Neon project.

You can help me debug an empty Neon Realtime subscription or ask the Neon community.

Insert a row and watch it stream

The database change must come from a separate session while the subscription stays connected. A third terminal lets the insert happen without stopping the live monitor.

Create a third terminal session in the code editor from earlier.
Set its current directory to the local template folder from earlier.

Before you run the insert, do you expect the subscription to stay on the first row or include the new row?

Insert a second row from the third terminal by running this command:

neon psql -- -c "INSERT INTO items (value) VALUES ('bar')"

What does this test prove?

The command adds bar through a separate database session.

The active subscription receives that database change. It updates the full query result without another request.

Switch back to the second terminal from earlier.
Check the active subscription result for the newly inserted row.

You should see the live result update to include both foo and bar. The subscription received the inserted row without polling or a manual refresh.

That is the realtime path working from end to end. Your database change now reaches a live subscriber as soon as the query result changes.

Inserted row not appearing?

Confirm that the subscription remained running while you inserted the second row.
Check that the insert command reported a successful row insertion.
Confirm that both terminal sessions target the same Neon project branch.

You can help me debug why my inserted row is missing from the live result or ask the Neon community.

Your terminal has proved that Neon can keep a query result live. Next, you will bring that behavior into the task board interface.

Build the Live Task Board

Your terminal subscription proved that Neon Realtime can stream database changes. The React starter still presents its sample list.

In this step, you'll define task records in Postgres. You'll connect the starter component to a live query through useLiveQuery.

In this step, get ready to:

Create the tasks table with task text plus completion status.
Replace the starter query with a live tasks query.
Render database task rows in the browser.

Create the tasks table

Each task record needs a field for its wording. It also needs a Boolean field that stores its completion state.

Return to the Neon Console for task-board-realtime.
Select Tables from the project navigation.
Use the schema management controls to create a table named tasks with an automatically generated primary key.
Save the table definition.

Good progress. You now have a database home for every task.

Add a required text column that stores the wording of each task.
Save the schema change.

You should see the text column listed in the tasks schema.

Add a required Boolean column with an incomplete default.
Save the schema change.

You should now see columns for task wording plus completion status.

Use Add record to save two short tasks from your own to-do list with different completion values.

The Tables view should show both records with their stored completion values.

Can't see the new table or rows?

Use the schema refresh control if tasks does not appear after saving.
Check that each task has text if a record does not save.
Confirm that each completion value matches the Boolean column type.

Use help me debug my tasks table for targeted help. Visit the Neon community for another perspective.

Render tasks with useLiveQuery

The template already connects the application to Realtime. Your change gives its existing hook a task query plus a table-shaped interface.

Why use a live query?

A live query keeps the result of a SELECT synchronized with the database. The useLiveQuery hook updates the component when matching rows change.

This keeps the task board tied to Postgres without polling or refetch code.

Switch back to the code editor from earlier.
Search the application workspace for useLiveQuery.
Select the search result that currently renders the starter list.
Replace the starter list with a table that reads tasks through the existing useLiveQuery hook. Show the task text plus completion status in each row.
Save the edited file.

Before you check, do you expect the starter items or your database tasks to appear after a full page reload?

Return to the browser from earlier.
Refresh the task board page.

You should see the starter list replaced by two task rows from the tasks table. Each row should show its task text plus its completion status.

Still seeing the starter list?

Search for useLiveQuery again if the original starter items remain.
Check that the live query reads from tasks if the page shows no rows.
Check that the rendered fields match the two columns you created if either cell is empty.

Use help me debug my live task board for targeted help. Visit the Neon community if the issue depends on your template environment.

That's the core board working. Next, you'll test the shared experience across two browser windows.

Sync Tasks Across Two Windows

Your task board already renders database rows through useLiveQuery. One window cannot prove that separate subscribers stay synchronized.

This step tests the shared experience that Neon Realtime is built for. You will add a task in one browser window. A second window should update from the database change without a refresh.

In this step, get ready to:

Open the local task board in two browser windows.
Add one task through the board to verify cross-window synchronization.

Open the task board in two browser windows

Each browser window creates its own page instance. Loading the same local address gives you two independent subscriptions to the task query.

Return to the browser tab from earlier that shows your task board.
Record the address shown in that browser window here: your local task board URL.

You now have the exact address that connects a browser window to your running local app.

Use your browser menu to create a second browser window.

You now have a separate window ready to load its own copy of the task board.

Enter your local task board URL in the second window's address bar.
Load the address in the second window.

You should see the same existing task rows in both browser windows.

Place both browser windows side by side.

How do two windows stay in sync?

Each window runs its own useLiveQuery subscription against the same task query.

A task submission writes a row to tasks. Neon Realtime pushes the changed query result to both subscriptions.

Add a task and watch it sync

The task form writes your new task to the database. The live query turns that database change into an update for every connected window.

Leave the second browser window untouched.
Enter Window sync check in the task field in the first browser window.

Before you submit the task, do you think the untouched window will update without any help from the first window?

Use the task form's submit control to add the task.

In the first window, you should see Window sync check appear on the task board.

Look at the second browser window without refreshing it.

You should see Window sync check appear in the second window. Both boards now show the row inserted through the task board UI.

You made the full loop work. The first window wrote the task while Neon Realtime delivered the database change to the second.

Task missing from the second window?

Confirm that both windows use your local task board URL.
Confirm that the development server from earlier is still running.
Add another task after the second window finishes loading.
Help me debug a task that saves in one window but does not appear in the other.

Your two-window task board is now synchronized. Next, you will update a task directly in the Neon SQL editor. Both windows should follow the database change.

Update Tasks from the SQL Editor

Your two task board windows already synchronize new tasks through Neon Realtime. The browser-to-browser path is working.

This final test changes a row directly in the Neon SQL Editor. Both React views should follow the database without a refresh.

In this step, get ready to:

Prepare the two live task board views for comparison.
Run an UPDATE statement against the tasks table.
Confirm the direct database change reaches both windows.

Prepare the two live views

A direct database update is easiest to prove when both browser windows begin with the same task state. Keeping both windows open removes refresh from the test.

Return to the first task board window from earlier.
Position the second task board window beside it.

Both boards should show the same task list. At least one task should still be incomplete.

Run a direct SQL update

An UPDATE statement changes an existing row in Postgres. The RETURNING clause gives you immediate proof of the changed record.

Return to the Neon Console for the task-board-realtime project from earlier.
Select Postgres database in the sidebar.
Select SQL Editor.
Choose task-board-realtime in the database selector.
Confirm the selected branch matches the branch used by your local app.
Replace any existing editor contents with this query:

-- Complete the first open task and return the changed row.
UPDATE tasks
SET completed = TRUE
WHERE id = (
  SELECT id
  FROM tasks
  WHERE completed = FALSE
  ORDER BY id
  LIMIT 1
)
RETURNING *;

What does this query do?

The nested SELECT locates the earliest incomplete task.
The UPDATE statement sets completed to TRUE for that row.
The RETURNING clause displays the changed row in the results pane.

Before you run it, consider whether both open boards will react to a change that bypasses the app.

Click Run in the SQL Editor.

The results pane should show one row whose completed value is true.

No Updated Row?

Confirm task-board-realtime is selected in the database selector.
Add a task from one board if every existing row is complete.
Run the update again.

If the query still returns no row, help me debug the SQL update.

Confirm both windows updated

The SQL results prove the database row changed. The browser windows prove Realtime carried that change into every live view.

Before you bring the boards back, consider whether the direct SQL update should reach one window or both.

Bring both task board windows back into view without refreshing either one.

You should see the same task marked complete in both windows. No manual refresh should be needed.

Did a Board Stay Unchanged?

Confirm both windows use the local app instance from earlier.
Confirm the development server is still running.
Confirm the app connects to the branch selected in the SQL Editor.

If a board still shows the old state, help me debug the Realtime update.

You proved the full loop: a direct database edit now reaches both live task boards without polling. Your task board follows the database wherever the change begins.

Secret mission

Test Reconnection After a Missed Update

One browser misses a task while it is closed. Reopen it to prove the live query catches up to the current database state before realtime updates continue.

Clean Up Your Resources

At this scale, your task board remains covered by Neon's free plan. Decide whether to keep its resources active, pause the local processes for later, or delete everything.

Resources you used:

A Neon Realtime project named task-board-realtime with Realtime enabled.
A tasks table with task records inside the Neon project.
A local React template application configured for task-board-realtime.
A local development server for the task board.
A terminal live query subscription connected to the database.

The region matters because Realtime beta availability is limited. Keep a record of the supported region you selected.

Return to the Neon Console project page for task-board-realtime to find its assigned region.
Record the region here: your Neon region.

Keep everything running

No action is needed. Choose this option if you are still testing the synchronized task board or plan to extend it.

Keep task-board-realtime on the free plan.
Keep the local React template application on your computer.
Leave the development server running while you are actively testing the task board.
Leave the terminal live subscription running while you are testing database changes.

Realtime remains free during the beta. This project's database usage stays within the free plan at this scale.

Pause - I'll come back to this later

Shut down the local processes to free up your computer's resources. Your Neon project and application folder remain ready for your return.

Return to the terminal running the local development server.
Stop the development server using your terminal's interrupt control.
Switch back to the terminal running the live query subscription.
Stop the live query subscription using your terminal's interrupt control.
Close both task board browser windows.
Keep task-board-realtime on the free plan.
Keep the local React template application on your computer.

Both terminals return to their prompts. Your database records and local application remain available for your next session.

Delete - I don't want to use this again

Deleting the project can feel drastic. The database and its task records disappear with the project.

Return to the terminal running the local development server.
Stop the development server using your terminal's interrupt control.
Switch back to the terminal running the live query subscription.
Stop the live query subscription using your terminal's interrupt control.
Close both task board browser windows.

Both terminals should return to their prompts. The local processes are now stopped.

The Neon project contains the tasks table. Removing the project also removes every task record stored in that table.

Return to the Neon Console project page for task-board-realtime.
Find the project deletion controls in the project settings area.
Use the project deletion control to delete task-board-realtime.
Complete the confirmation shown by the Neon Console.
Return to the Neon Console project list.

You should no longer see task-board-realtime in the project list. This confirms that the Neon project and its database have been removed.

The local React template application is stored separately on your computer. Remove its top-level folder to finish the cleanup.

Find the application's top-level folder in your code editor's file sidebar.
Use the folder's context menu to reveal it in Finder on macOS or File Explorer on Windows.
Move the folder to Trash on macOS or Recycle Bin on Windows.
Empty Trash on macOS or Recycle Bin on Windows.

You should no longer find the local React template application folder on your computer. All project resources have now been removed.

Nice Work!

Fantastic work! Your React task board now keeps two browser windows synchronized through Neon Realtime whenever a database row changes.

You've learned how to:

Stream a new row from a Postgres database into the terminal through a live SELECT subscription.
Build a React task board that renders records from the tasks table with the useLiveQuery hook.
Prove cross-window synchronization by adding a task in one browser. Watch a direct SQL update reach both windows without a refresh.
Push your live-query skills further through the optional Secret Mission.

Ready to quiz yourself?