Skip to content

Commit c2276a9

Browse files
lakhansamanilakhansamani
committed
initial commit
0 parents  commit c2276a9

6 files changed

Lines changed: 12415 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# Project dependencies
2+
.cache
3+
.idea
4+
node_modules
5+
yarn-error.log
6+
lerna-debug.log
7+
8+
# Build directory
9+
**/public
10+
**/.cache
11+
.DS_Store
12+
lib
13+
dist
14+
15+
# Logs
16+
logs
17+
*.log
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*
21+
22+
# Runtime data
23+
pids
24+
*.pid
25+
*.seed
26+
*.pid.lock
27+
28+
# Directory for instrumented libs generated by jscoverage/JSCover
29+
lib-cov
30+
31+
# Coverage directory used by tools like istanbul
32+
coverage
33+
34+
# nyc test coverage
35+
.nyc_output
36+
37+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
38+
.grunt
39+
40+
# Bower dependency directory (https://bower.io/)
41+
bower_components
42+
43+
# node-waf configuration
44+
.lock-wscript
45+
46+
# Compiled binary addons (http://nodejs.org/api/addons.html)
47+
build/Release
48+
49+
# Dependency directories
50+
node_modules/
51+
jspm_packages/
52+
53+
# Typescript v1 declaration files
54+
typings/
55+
56+
# Optional npm cache directory
57+
.npm
58+
59+
# Optional eslint cache
60+
.eslintcache
61+
62+
# Optional REPL history
63+
.node_repl_history
64+
65+
# Output of 'npm pack'
66+
*.tgz
67+
68+
# Yarn Integrity file
69+
.yarn-integrity
70+
71+
# dotenv environment variables file
72+
.env
73+
74+
# macos
75+
.DS_Store
76+
77+
# build
78+
/dist

‎Layout.js‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import React, { useEffect, useState } from "react";
2+
3+
const getStars = async () => {
4+
try {
5+
const res = await fetch(
6+
"https://api.github.com/repos/appbaseio/reactivesearch?callback=callback"
7+
);
8+
const data = await res.text();
9+
const lines = data.split("\n");
10+
lines.splice(0, 1, "{");
11+
lines.splice(-2, 1, "}");
12+
return JSON.parse(lines.join("\n")).data.stargazers_count;
13+
} catch (error) {
14+
throw error;
15+
}
16+
};
17+
export default ({ children }) => {
18+
const [stars, setStars] = useState(
19+
window.sessionStorage.getItem("appbase_rs_star_count")
20+
);
21+
useEffect(() => {
22+
const sessionData = window.sessionStorage.getItem("appbase_rs_star_count");
23+
console.log("session data", sessionData);
24+
if (!sessionData) {
25+
async function fetchData() {
26+
const currentStars = await getStars();
27+
console.log("stars", currentStars);
28+
setStars(currentStars);
29+
window.sessionStorage.setItem("appbase_rs_star_count", currentStars);
30+
}
31+
fetchData();
32+
}
33+
}, [stars]);
34+
return (
35+
<div>
36+
<div
37+
style={{
38+
position: "fixed",
39+
top: 0,
40+
left: 0,
41+
right: 0,
42+
margin: 0,
43+
display: "flex",
44+
alignItems: "center",
45+
justifyContent: "space-between",
46+
}}
47+
>
48+
<div
49+
style={{
50+
// background: "#173baa",
51+
padding: 20,
52+
display: "flex",
53+
alignItems: "center",
54+
borderBottomRightRadius: 5,
55+
}}
56+
>
57+
<img
58+
src="https://opensource.appbase.io/reactivesearch/images/RSlogo.svg"
59+
alt="rs logo"
60+
/>
61+
<span
62+
style={{
63+
marginLeft: 10,
64+
fontSize: 24,
65+
fontWeight: "light",
66+
}}
67+
>
68+
Reactive<span style={{ fontWight: "700" }}>Search</span>
69+
</span>
70+
{stars && (
71+
<div style={{ display: "flex", marginLeft: 10 }}>
72+
<a
73+
href="https://github.com/appbaseio/reactivesearch"
74+
target="_blank"
75+
style={{
76+
padding: "2px 5px 2px 4px",
77+
color: "#333",
78+
textDecoration: "none",
79+
textShadow: "0 1px 0 #fff",
80+
whiteSpace: "nowrap",
81+
cursor: "pointer",
82+
borderRadius: "3px",
83+
fontSize: 12,
84+
backgroundRepeat: "no-repeat",
85+
border: "1px solid #d5d5d5",
86+
backgroundColor: "#eee",
87+
display: "flex",
88+
alignItems: "center",
89+
}}
90+
>
91+
<span
92+
style={{
93+
display: "inline-block",
94+
width: "14px",
95+
height: "14px",
96+
marginRight: "4px",
97+
backgroundImage: `url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMTIgMTIgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTIgMTIgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiAxMy40Yy0xMC41IDAtMTkgOC41LTE5IDE5YzAgOC40IDUuNSAxNS41IDEzIDE4YzEgMC4yIDEuMy0wLjQgMS4zLTAuOWMwLTAuNSAwLTEuNyAwLTMuMiBjLTUuMyAxLjEtNi40LTIuNi02LjQtMi42QzIwIDQxLjYgMTguOCA0MSAxOC44IDQxYy0xLjctMS4yIDAuMS0xLjEgMC4xLTEuMWMxLjkgMC4xIDIuOSAyIDIuOSAyYzEuNyAyLjkgNC41IDIuMSA1LjUgMS42IGMwLjItMS4yIDAuNy0yLjEgMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEgMC43LTMuNyAyLTUuMWMtMC4yLTAuNS0wLjgtMi40IDAuMi01YzAgMCAxLjYtMC41IDUuMiAyIGMxLjUtMC40IDMuMS0wLjcgNC44LTAuN2MxLjYgMCAzLjMgMC4yIDQuNyAwLjdjMy42LTIuNCA1LjItMiA1LjItMmMxIDIuNiAwLjQgNC42IDAuMiA1YzEuMiAxLjMgMiAzIDIgNS4xYzAgNy4zLTQuNSA4LjktOC43IDkuNCBjMC43IDAuNiAxLjMgMS43IDEuMyAzLjVjMCAyLjYgMCA0LjYgMCA1LjJjMCAwLjUgMC40IDEuMSAxLjMgMC45YzcuNS0yLjYgMTMtOS43IDEzLTE4LjFDNTEgMjEuOSA0Mi41IDEzLjQgMzIgMTMuNHoiLz48L3N2Zz4=)`,
98+
backgroundSize: "100% 100%",
99+
backgroundRepeat: "no-repeat",
100+
}}
101+
/>
102+
<span>Star</span>
103+
</a>
104+
<a
105+
href="https://github.com/appbaseio/dejavu/stargazers"
106+
target="_blank"
107+
style={{
108+
marginLeft: "4px",
109+
backgroundColor: " #fafafa",
110+
border: "1px solid #d4d4d4",
111+
padding: "2px 5px 2px 4px",
112+
color: "#333",
113+
textDecoration: "none",
114+
textShadow: "0 1px 0 #fff",
115+
whiteSpace: "nowrap",
116+
cursor: "pointer",
117+
borderRadius: "3px",
118+
fontSize: 12,
119+
}}
120+
>
121+
{stars}
122+
</a>
123+
</div>
124+
)}
125+
</div>
126+
<div style={{ paddingRight: 20 }}>
127+
<img
128+
src="https://appbase.io/static/svg/appbase-dark.svg"
129+
alt="logo"
130+
height={40}
131+
/>
132+
</div>
133+
</div>
134+
<div
135+
style={{
136+
display: "flex",
137+
flexDirection: "column",
138+
justifyContent: "center",
139+
alignItems: "center",
140+
width: "100%",
141+
}}
142+
>
143+
{children}
144+
</div>
145+
<div
146+
style={{
147+
position: "fixed",
148+
bottom: 0,
149+
left: 0,
150+
right: 0,
151+
fontSize: 16,
152+
padding: 10,
153+
textAlign: "center",
154+
}}
155+
>
156+
<a
157+
href="https://reactivesearch-course.appbase.io"
158+
style={{ color: "dodgerblue", textDecoration: "none" }}
159+
>
160+
https://reactivesearch-course.appbase.io
161+
</a>{" "}
162+
| Use arrow keys or spacebar to navigate between slides.
163+
</div>
164+
</div>
165+
);
166+
};

‎deck.mdx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import customTheme from "./theme";
2+
import Layout from "./Layout";
3+
export const theme = customTheme;
4+
5+
<Layout>
6+
7+
# Getting started
8+
9+
</Layout>
10+
11+
---
12+
13+
<Layout>
14+
15+
## Bootstrap a Project
16+
17+
Here is a list of things that we need to scaffold the project
18+
19+
- Get Dataset
20+
- ElasticSearch Cluster
21+
- Import the dataset into ElasticSearch
22+
- Bootstrap a React Project
23+
- Install ReactiveSearch
24+
- Connect to ElasticSearch with `<ReactiveBase />`
25+
26+
</Layout>
27+
28+
---
29+
30+
<Layout>
31+
32+
## Get Dataset
33+
34+
Let's download sample [dataset](https://www.kaggle.com/yelp-dataset/yelp-dataset) for Yelp
35+
_Ref: https://www.kaggle.com/yelp-dataset/yelp-dataset_
36+
37+
</Layout>
38+
39+
---
40+
41+
<Layout>
42+
43+
## Create ElasticSearch Cluster
44+
45+
We will be using [Appbase.io](https://dashboard.appbase.io) to create ElasticSearch cluster
46+
47+
</Layout>
48+
49+
---
50+
51+
<Layout>
52+
53+
## Quick Demo
54+
55+
</Layout>
56+
57+
---
58+
59+
<Layout>
60+
61+
## Import dataset
62+
63+
[Appbase.io](https://dashboard.appbase.io) comes with great development tools,
64+
which will allow us to quickly import the data
65+
66+
</Layout>
67+
68+
---
69+
70+
<Layout>
71+
72+
## Quick Demo
73+
74+
</Layout>
75+
76+
---
77+
78+
<Layout>
79+
80+
## Bootstrap React Project
81+
82+
We will be using [CodeSandbox](https://codesandbox.io/) to quickly Bootstrap the React project
83+
84+
</Layout>
85+
86+
---
87+
88+
<Layout>
89+
90+
## Quick Demo
91+
92+
</Layout>
93+
94+
---
95+
96+
<Layout>
97+
98+
## Install ReactiveSearch
99+
100+
```
101+
yarn add @appbaseio/reactivesearch
102+
```
103+
104+
> _Ref: https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/_
105+
106+
</Layout>
107+
108+
---
109+
110+
<Layout>
111+
112+
## Connect to ElasticSearch
113+
114+
```
115+
<ReactiveBase
116+
app="yelp"
117+
url="YOUR_ELASTICSEARCH_CLUSTER_URL"
118+
>
119+
120+
// other components will go here.
121+
<div>Hello ReactiveSearch!</div>
122+
123+
</ReactiveBase>
124+
```
125+
126+
> _Ref: https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/_
127+
128+
</Layout>
129+
130+
---
131+
132+
<Layout>
133+
134+
In the next video we will see how to build **Search** for Yelp Data.
135+
136+
</Layout>

0 commit comments

Comments
 (0)