cell_tower Broadcast Station
visibility 2.6K views schedule 3 years ago
CULCHR.TV Vintage Exclusive
Vintage Sneakers Streetwear +37

Filter and search content in your web apps using Remix and Tigris Data

In just about any type of company, adding search is extremely valuable for your customers. The scope of building one that's full-featured, however, can feel pretty daunting. Tigris Data is out to make filtered search much less difficult to implement, and in this video we'll walk through how you can build your own directory app using Tigris Data and Remix. - source code: https://github.com/learnwithjason/tigris-music-list - demo: https://aged-breeze-5399.fly.dev/ Thanks to Tigris Data for sponsoring this video! Next steps and additional resources: - Faceted search documentation for Tigris Data: https://www.tigrisdata.com/docs/sdkstools/typescript/database/search/#faceted-search - More implementation examples of Tigris in other frameworks: https://github.com/tigrisdata/tigris-examples-ts - Remix docs: http://remix.run/docs - Ask questions in the Tigris Data Discord: https://www.tigrisdata.com/discord/ - Ask questions in the Remix Discord: https://rmx.as/discord Join the LWJ Discord for behind the scenes, sneak peeks, and more: https://discord.gg/lwj Chapters: 00:00 - Overview 00:09 - Team Meeting (skit) 01:04 - Tigris Data offers faceted search as a built-in 01:37 - What we're going to build 02:17 - Clone the starter repo 02:44 - Start the app locally and review the structure 03:24 - Update tsconfig.json 03:39 - Set up a Tigris Data account 03:51 - Create a new project 04:05 - Get application credentials 04:35 - Model the Tigris Data collection 06:36 - Marking fields as search fields 07:27 - Create a database setup script 08:10 - Run the setup script before dev and deployment 09:01 - Write a script to add data to the collection 10:35 - Run the seed script 10:54 - Create a function to search the artists collection 11:42 - Use the search function to query artists 12:17 - Define a Remix loader function to load artist data from Tigris 12:32 - Display live artist data in the UI 13:21 - Add free text search 14:06 - Add a search input component 15:29 - Use a query string parameter as the search query 16:10 - Add support for faceted search 17:07 - Display live genre data in the UI 17:47 - Create a utility function to get the genre from the URL path 18:50 - Update the search function to use the selected genre 19:20 - Identify the currently selected genre in the UI 19:54 - Verifying that everything works 20:25 - Additional resources and next steps

0:00 / 0:00
visibility 2,618 views thumb_up 78 comment 9 schedule 20:44 2023 3 years ago
In just about any type of company, adding search is extremely valuable for your customers. The scope of building one that's full-featured, however, can feel pretty daunting. Tigris Data is out to make filtered search much less difficult to implement, and in this video we'll walk through how you can build your own directory app using Tigris Data and Remix. - source code: https://github.com/learnwithjason/tigris-music-list - demo: https://aged-breeze-5399.fly.dev/ Thanks to Tigris Data for sponsoring this video! Next steps and additional resources: - Faceted search documentation for Tigris Data: https://www.tigrisdata.com/docs/sdkstools/typescript/database/search/#faceted-search - More implementation examples of Tigris in other frameworks: https://github.com/tigrisdata/tigris-examples-ts - Remix docs: http://remix.run/docs - Ask questions in the Tigris Data Discord: https://www.tigrisdata.com/discord/ - Ask questions in the Remix Discord: https://rmx.as/discord Join the LWJ Discord for behind the scenes, sneak peeks, and more: https://discord.gg/lwj Chapters: 00:00 - Overview 00:09 - Team Meeting (skit) 01:04 - Tigris Data offers faceted search as a built-in 01:37 - What we're going to build 02:17 - Clone the starter repo 02:44 - Start the app locally and review the structure 03:24 - Update tsconfig.json 03:39 - Set up a Tigris Data account 03:51 - Create a new project 04:05 - Get application credentials 04:35 - Model the Tigris Data collection 06:36 - Marking fields as search fields 07:27 - Create a database setup script 08:10 - Run the setup script before dev and deployment 09:01 - Write a script to add data to the collection 10:35 - Run the seed script 10:54 - Create a function to search the artists collection 11:42 - Use the search function to query artists 12:17 - Define a Remix loader function to load artist data from Tigris 12:32 - Display live artist data in the UI 13:21 - Add free text search 14:06 - Add a search input component 15:29 - Use a query string parameter as the search query 16:10 - Add support for faceted search 17:07 - Display live genre data in the UI 17:47 - Create a utility function to get the genre from the URL path 18:50 - Update the search function to use the selected genre 19:20 - Identify the currently selected genre in the UI 19:54 - Verifying that everything works 20:25 - Additional resources and next steps