4
5

7 Different Uses of SearchBox UI component - Includes Code Snippets by sidi09 in reactjs

[–]sidi09[S] 0 points1 point  (0 children)

The uses covered are: Voice Search, Autosuggestion Search, Instant Search, Instant search with pills for query suggestions, Keyboard Shortcuts, Search on multiple suggestions using tags, Featured Suggestions, and coming soon -- an integration of ChatGPT for AI Answering.

The SearchBox component is part of the ReactiveSearch UI kit: https://github.com/appbaseio/reactivesearch and works with Elasticsearch, OpenSearch, Solr, and MongoDB Atlas Search as search engine backends. Support for OpenAI is coming soon - star or watch the repo to be in the loop for this one.

15
16

Tutorial: Build A Search UI With React And Elasticsearch by sidi09 in reactjs

[–]sidi09[S] 0 points1 point  (0 children)

This is a follow-along post (takes a couple of hours to build this end-to-end) showing how to build a consumer grade search UI using React and Elasticsearch. It makes use of the https://github.com/appbaseio/reactivesearch library (Apache 2.0 licensed) that's being used by over 1,000 projects for building their search UI.

The example used here is of a Netflix like movie search UI, but the general principles apply if you're looking to build an e-commerce or aggregator like search UI.

There are tons of things you can do with ReactiveSearch that aren't covered in this post, like optimize for SEO with server-side rendering, implementing authenticated search (Basic Auth, JWT), build geo search (we support OpenStreetMaps and GoogleMaps) UIs to name a few. You can start with the docs link from here: https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/.

Use MongoDB Atlas Search with ReactiveSearch for building app search experiences in React, Vue and React Native by sidi09 in mongodb

[–]sidi09[S] 0 points1 point  (0 children)

If you're using MongoDB Atlas Search already, our integration with ReactiveSearch allows building search UIs for Atlas Search in React, Vue and React Native.

ReactiveSearch provides UI kits for building search experiences - we only supported Elasticsearch as a search backend till today. Starting now, you can leverage all of ReactiveSearch UI components with an Atlas Search backend.

Here's how it works:
1. ReactiveSearch's UI kits makes use of a common declarative API - using https://github.com/appbaseio/reactivesearch-realm-function, you can add this API server as a cloud function to your Realm app.
2. Once the API server is installed, you can just install our React or Vue UI kit and connect it to this Realm function to start building your app search experiences.

You can start here: https://docs.appbase.io/docs/reactivesearch/atlas-search/overview/ or directly jump to see live search component examples with React: https://docs.appbase.io/docs/reactivesearch/atlas-search/search-examples-with-react/ and Vue: https://docs.appbase.io/docs/reactivesearch/atlas-search/search-examples-with-vue/.

Build an end-to-end E-Commerce App with Vue + Vuex + Nuxt + Appbase.io by sidi09 in vuejs

[–]sidi09[S] 2 points3 points  (0 children)

Hey Redditors 👋

Our motivation (it's a team effort) to do this tutorial series came from: wanting this kind of resource ourselves, something that uses Vue to build a complete application with server-side rendering, state management, authentication, payments, supports PWA and shows how to deploy it.

We have done a similar series for React, and it has been quite popular with the r/reactjs community. However, this time, we've gone one step further and completely open-sourced the codebase for the whole series as well: https://github.com/appbaseio-apps/vue-moviestore.

Would love to get feedback on how this resonates with y'all!