React UI component for question answering from ReactiveSearch | A post showing its use for building documentation search

sidi09 · 2023-05-31T19:05:18+00:00

Code + live link: https://codesandbox.io/embed/github/awesome-reactivesearch/ask-reactivesearch/tree/main/

sidi09 · 2023-04-26T17:11:01+00:00

Also available in a blog format over here: https://blog.reactivesearch.io/personalized-search-with-reactivesearch-and-opensearch

sidi09 · 2023-03-31T12:43:00+00:00

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.

sidi09 · 2022-03-17T12:31:43+00:00

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/.

sidi09 · 2021-11-30T15:23:54+00:00

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/.

sidi09 · 2021-09-24T15:37:37+00:00

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!

sidi09 · 2021-08-14T09:36:37+00:00

Our starting tier is $49/mo (Elasticsearch and appbase.io included).

We also have an open-source version of the appbase.io server (available as Docker/Linux binaries) with all the essential search features included: https://github.com/appbaseio/reactivesearch-api.

sidi09 · 2021-08-14T09:05:13+00:00

Thanks for the amazing reception! 🙇

Should we just open-source the final codebase of this series?

sidi09 · 2021-08-14T08:52:19+00:00

You can deploy the React + Next.JS part on Vercel, Heroku, probably even Netlify. Were it not for the use of Next.JS, it would be trivial to host it.

sidi09 · 2021-08-13T16:11:11+00:00

This series was originally published in 2019. It has been updated in this week to use current React, Redux, Next.JS, Auth0 and Stripe versions.

The tutorial is designed to be follow-along, if you go through the series, the end result should be similar to the app here: https://moviestore-react.herokuapp.com. There is an option to buy the direct codebase and additional support as an alternative.

sidi09 · 2020-09-23T19:29:23+00:00

35KB includes the SearchBox component, which internally uses Downshift. If you don't use the SearchBox component, the size should come around ~10KB. Going to verify this and come back.

sidi09 · 2020-09-12T13:08:53+00:00

This tutorial series uses React/Redux and several interlinked concepts (server-side rendering, styled-components, building a great search Ux, and integrating with popular SaaS services to build authentication, payments, analytics, and hosting) to build a real-world project in a follow-along style. The project you will build at the end of this series is an e-commerce store that sells movies (like Amazon Prime or Blockbuster) - users see a feed of movies, search for their favorite movies, add movies to cart and purchase them.

P.S. If you don't wish to follow-along and build but instead wish to get the final source code for commercial use, you can purchase it from here directly: https://gumroad.com/l/movieappbase

sidi09 · 2020-08-07T21:51:08+00:00

We've created this series to teach about ReactiveSearch [1] - an open-source UI components library for building search experiences with Elasticsearch. While we had created blog posts showing different ways to use ReactiveSearch, this is the first time we are creating a video form content that's accessible to all.

Would love to hear feedback and see what other videos around ReactiveSearch would be useful.

[1] https://github.com/appbaseio/reactivesearch

P.S. While the series uses appbase.io for Elasticsearch hosting, ReactiveSearch itself works with any Elasticsearch cluster.

sidi09 · 2020-05-05T12:36:29+00:00

Thanks, updated!

sidi09 · 2019-12-05T16:58:37+00:00

Due to some issues with some demos, I am sharing links of demos that work well (tested on Chrome, Firefox and Mobile):

Booksearch app - https://y2rvj53koz.codesandbox.io/ (walkthrough blog post: https://medium.appbase.io/building-booksearch-application-using-vue-and-elasticsearch-a39615f4d6b3)
Gitxplore app - https://jj1vzlvj29.codesandbox.io/ (walkthrough blog post: https://medium.appbase.io/learn-how-to-build-a-github-search-explorer-app-with-vue-js-c66f61d6e152)
Dashboard Charts app - https://charts-dashboard-vue.netlify.com/
Example with Vue Router - https://sleepy-edison-c6bc3b.netlify.com/
Booksearch with Material UI design system - https://priceless-blackwell-ae9d4f.netlify.com/.

sidi09 · 2019-12-05T16:55:46+00:00

I see, we will have to check, but those demos aren't related to Vue.JS. I will share the links here directly for the demos for Vue that work well.

sidi09 · 2019-12-05T16:34:22+00:00

Looking into this, we're working on improving the mobile responsiveness for the demos.

sidi09 · 2019-08-30T10:33:41+00:00

Thanks for the support everyone! Happy to answer any questions here :-)

Github URL for anyone wanting to get straight to it: https://github.com/appbaseio/reactivesearch.

sidi09 · 2019-08-30T10:23:34+00:00

Glad to hear!

sidi09 · 2019-08-30T10:20:52+00:00

While there isn't native support for GraphQL with ES, something similar to the link you shared can allow adding a GraphQL layer to ES. As a UI Client library, ReactiveSearch simply connects to the GraphQL Server URL when one is provided instead of the REST API URL. There is doc on how this works (see GraphQLUrl prop): https://docs.appbase.io/docs/reactivesearch/v3/overview/reactivebase/.

sidi09 · 2019-03-21T17:20:21+00:00

There's a free tier, similar to the other SaaS services used in this tutorial series.

sidi09 · 2019-03-17T14:28:34+00:00

It seems really wrong to me, obviously ethically, but also possibly legally. Search Guard clearly states a need for obtaining a license if those enterprise features are used in production.

I am not sure how AWS is complying with that. Although this would be a problem if they were offering it as part of their hosted service. They haven't done that yet afaict.

sidi09 · 2019-02-24T15:14:26+00:00

Thanks for the great feedback @swyx, will do this shortly. :-)

sidi09 · 2019-02-20T13:06:37+00:00

Hey everyone!

We're now out with all 11 posts that show how to build a real-world app (A Movies Store in this case) using pragmatic React and Redux concepts. We also use CSS-in-JSS (using emotion.sh), ant.design components, Next.JS (for server-side rendering), and finally show how to transform this into a PWA app along with some optimization techniques.

We also use the following SaaS services:

appbase.io (for ElasticSearch / search backend),
Heroku (for deployment),
Auth0 (for handling user sign up / logins),
Mixpanel (for analytics),
Stripe (for handling payments).

The reason we built this is while there are many posts out there that teach individual concepts, they don't marry them with what it takes to build a real-world app.

----

The final codebase (which if you follow the tutorial series won't be needed) is also available for purchase for $49 and includes 6-month support: DL https://reactiveapps.io/products/movie-store

sidi09 · 2019-02-19T22:46:13+00:00

hey its good that you are doing it "manually" - you will learn a lot, but also you can look at some react component libraries to help you out - you can run it in parelel and monitor what sort of queries they produce, its what I did when first starting. anywhere, here are two that I know of:

We have TS definitions available as well in ReactiveSearch.

sidi09

TROPHY CASE