strapiconf2022-workshop-strapi VS react-instantsearch

services: - type: web name: productivity-tips-api env: node plan: free # Update the following line with your Strapi GitHub repo repo: https://github.com/render-examples/strapiconf2022-workshop-strapi branch: main buildCommand: yarn install && yarn build startCommand: yarn start healthCheckPath: /_health envVars: - key: NODE_VERSION value: ~16.13.0 - key: NODE_ENV value: production - key: CLOUDINARY_NAME sync: false - key: CLOUDINARY_KEY sync: false - key: CLOUDINARY_SECRET sync: false - key: DATABASE_URL fromDatabase: name: strapi property: connectionString - key: JWT_SECRET generateValue: true - key: ADMIN_JWT_SECRET generateValue: true - key: API_TOKEN_SALT generateValue: true - key: APP_KEYS generateValue: true - type: web name: productivity-tips-web env: node plan: free # Update the following line with your Remix GitHub repo repo: https://github.com/render-examples/strapiconf2022-workshop-remix branch: step-5 buildCommand: npm install && npm run build startCommand: npm start envVars: - key: STRAPI_URL_BASE fromService: type: web name: productivity-tips-api envVarKey: RENDER_EXTERNAL_URL databases: - name: strapi plan: free # This database will expire 90 days after creation

We'll start with an example repository that contains only a few changes from the default Strapi project scaffolding. Following the instructions in the Set up Strapi section of the example repository's README, run Strapi locally to get comfortable with Strapi and understand the minor code changes below.

If you want to learn more about how you can customize the UI of the search bar and its options you can check out the documentation of React InstantSearch by Algolia.

I am using one of the algolia code examples - https://github.com/algolia/react-instantsearch/blob/master/examples/media/URLSync.js

Like the speed of our search, but want your own implementation? We got you covered! Internally, our widget uses our Instant Search Client to handle all the requests and functionality. With this client you can build your own solution or connect it to for example instantsearch.js or react-instantsearch-dom. With these packages, you can create your own UI that is connected to Afosto Instant Search. Take a look at the demo on our website, or use the CodePen below as an example.

Add a search bar so your coworkers can search for tips about a specific topic or tool. Algolia’s React InstantSearch library might be useful for this.

react-instantsearch - Lightning-fast search for React and React Native applications, by Algolia

If you want to play around with the various features provided by React InstantSearch you can read more on algolia's documentation. You can also use MeiliSearch's react demo for a more interactive example.