├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── App.js ├── index.js └── styles.css └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | *.swp 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Reactivesearch Starter App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). 4 | 5 | Step-by-step guide available at [ReactiveSearch Quickstart Doc](https://docs.reactivesearch.io/docs/reactivesearch/react/overview/quickstart/). 6 | 7 | ### Develop 8 | 9 | ``` 10 | yarn && yarn start 11 | ``` 12 | 13 | should open something like this 14 | 15 | ![](https://i.imgur.com/Zgp5lGk.png) 16 | 17 | 18 | ### Configure 19 | 20 | The ReactiveSearch components code resides in `src/App.js` file. For building this app, we use: 21 | 22 | 1. [ReactiveSearch.io](https://reactivesearch.io) for the search backend: You can use ReactiveSearch as a hosted Elasticsearch or OpenSearch cloud service, or connect to an existing Elasticsearch or OpenSearch deployment 23 | 2. A simple flex based layout system, you can use Materialize's or Bootstrap's grid, or roll your own layout - the ReactiveSearch components are layout agnostic. 24 | 3. The following components: 25 | - **ReactiveBase** - ReactiveBase is the provider component that connects the UI with the backend app. 26 | - **SearchBox** - SearchBox component provides a search box UI relevant suggestions. 27 | - **MultiList** - MultiList component is used for displaying facets with an option to perform multiple selections. 28 | - **SingleRange** - SingleRange component is used for displaying the star ratings. 29 | - **ResultCard** - ResultCard component is used for displaying the **hits** as a card layout. 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactivesearch-starter-app", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@appbaseio/reactivesearch": "^4.2.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1" 12 | }, 13 | "devDependencies": { 14 | "@babel/runtime": "7.13.8", 15 | "typescript": "4.1.3" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ], 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | } 35 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesome-reactivesearch/reactivesearch-starter-app/6e28f1f541b962a14ce19c3c699a3c694d7eec1e/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | Starter App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | ReactiveBase, 4 | SearchBox, 5 | MultiList, 6 | ReactiveList, 7 | SingleRange, 8 | ResultCard 9 | } from "@appbaseio/reactivesearch"; 10 | 11 | import "./styles.css"; 12 | 13 | function App() { 14 | return ( 15 | 20 | {/* other components will go here. */} 21 |
22 |
30 | 40 | 51 |
52 |
53 | 67 | ( 77 | 78 | {data.map((item) => ( 79 | 80 | 86 | 91 | 92 | {item.authors + 93 | " " + 94 | "*".repeat(item.average_rating_rounded)} 95 | 96 | 97 | ))} 98 | 99 | )} 100 | /> 101 |
102 |
103 | 104 | ); 105 | } 106 | 107 | export default App; 108 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')); 6 | root.render(); -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | .multilist .input-class { 2 | height: auto; 3 | } --------------------------------------------------------------------------------