In this tutorial we build a fullstack web app that allows us to search a collection of retro games data, using:

Use Xata's serverless data platform to store & retrieve data without needing a database

Use React Server & Client Components using Next.js 13 and its app/ directory

Implement full-text search with boosting via the Xata SDK

My friend & avid retro gamer Sara Vieira had compiled a great collection of retro games data for her awesome site letsplayretro.games, a Next app which already had a ton of great features. But one feature Sara still wished for was full-text search over not just games' names, but all their metadata, with the ability to prioritize (aka "boost") the highest-rated games in the search results.

Since every minute spent coding is one less minute spent playing NES, neither of us wanted to waste a lot of time on making this happen. That's when it dawned on me that I knew of a way to easily implement full-text, boosted search over her tabular data: Xata provides it out of the box!

The tutorial covers how to:

Import CSV data into Xata

Set up the Xata SDK in a Next project

Use the new app/ directory in Next 13

Build React Server and Client components in app/

Perform full-text search with boosting via the Xata SDK

(Almost) use the new use() hook to fetch data from Client Components

Project code on Github

search-retro-games.vercel.app - an enhanced version of the project featuring: Filtering search results by console; Aggregating to count the total number of games; Debounced search input to avoid over-fetching; More details in search results & game pages