Learn how to implement filtered search functionality in web applications using Remix and Tigris Data in this 21-minute tutorial video. Build a directory app that demonstrates the power of faceted search, a built-in feature of Tigris Data. Follow along as the instructor guides you through setting up a Tigris Data account, modeling data collections, creating database scripts, and implementing search functions. Discover how to add free text search, incorporate query string parameters, and support faceted search by genre. By the end of the tutorial, you'll have created a functional artist directory with powerful search capabilities, and gained valuable insights into integrating Tigris Data with Remix for efficient content filtering and searching in web applications.
Filter and Search Content in Your Web Apps Using Remix and Tigris Data
Overview
Syllabus
- Overview
- Team Meeting skit
- Tigris Data offers faceted search as a built-in
- What we're going to build
- Clone the starter repo
- Start the app locally and review the structure
- Update tsconfig.json
- Set up a Tigris Data account
- Create a new project
- Get application credentials
- Model the Tigris Data collection
- Marking fields as search fields
- Create a database setup script
- Run the setup script before dev and deployment
- Write a script to add data to the collection
- Run the seed script
- Create a function to search the artists collection
- Use the search function to query artists
- Define a Remix loader function to load artist data from Tigris
- Display live artist data in the UI
- Add free text search
- Add a search input component
- Use a query string parameter as the search query
- Add support for faceted search
- Display live genre data in the UI
- Create a utility function to get the genre from the URL path
- Update the search function to use the selected genre
- Identify the currently selected genre in the UI
- Verifying that everything works
- Additional resources and next steps
Taught by
Learn With Jason
