forked from GetStream/stream-react-example
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.ejs
More file actions
344 lines (297 loc) · 14.8 KB
/
Copy pathindex.ejs
File metadata and controls
344 lines (297 loc) · 14.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html>
<head>
<title>React / Redux Tutorial: Build an example app with Stream</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="canonical" href="http://cabin.getstream.io" />
<meta name="description" content="This full stack React & Redux tutorial created by getstream.io teaches you how to build an Instagram style example app with activity streams and newsfeeds.">
<meta property="og:title" content="Cabin - A React/Redux Tutorial Series by GetStream.io">
<meta property="og:site_name" content="Cabin - A React/Redux Tutorial Series by GetStream.io">
<meta property="og:url" content="http://cabin.getstream.io">
<meta property="og:description" content="This example application created by getstream.io teaches you how to to build an Instagram style application with activity streams and newsfeeds.">
<meta property="fb:app_id" content="1714548178824131">
<meta property="og:type" content="website">
<meta property="og:image" content="http://cabin.getstream.io/img/og_cabin.jpg" />
<link rel="stylesheet" href="css/core.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Work+Sans:500,600,400|Anonymous+Pro:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/cabin.js"></script>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
(i[r] =
i[r] ||
function() {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(
window,
document,
'script',
'https://www.google-analytics.com/analytics.js',
'ga'
);
ga('create', 'UA-48587325-5', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="wrap">
<section class="hero">
<div class="art animated fadeIn"></div>
<row class="header animated fadeInDown">
<column cols="2" class="logo">
<img src="/img/Logo.svg" alt="Cabin: Learn React & Redux">
</column>
<column cols="10">
<div class="right">
<a href="/demo" class="btn" small outline title="Demo">DEMO</a>
<!-- <a href="https://github.com/GetStream/stream-react-example" class="btn" outline target="_blank">GITHUB</a> -->
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/getstream/stream-react-example" data-style="mega" data-count-href="/getstream/stream-react-example/stargazers" data-count-api="/repos/getstream/stream-react-example#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star getstream/stream-react-example on GitHub">Star</a>
</div>
</column>
</row>
<row class="content">
<column cols="7">
<img src="/img/hero-react-redux.svg" width="194" height="71" class=" animated zoomIn" alt="7 React and Redux Tutorials"/>
<h6 class=" animated zoomIn">BROUGHT TO YOU BY <a href="//getstream.io" target="_blank" title="GetStream.io">GETSTREAM.IO</a></h6>
<h1 class="animated zoomIn">Learn React & Redux With Cabin</h1>
<p class="animated zoomIn">These 7 tutorials teach you how to build a feature-rich, scalable social network app using React and Redux. The first 6 tutorials are available today. Enter your email to stay up to date about the upcoming posts:</p>
<form autocomplete="off" method="#" action="#" class="forms animated zoomIn updates-1">
<div class="btn-append">
<input type="email" name="email" class="input-big" placeholder="Enter Your Email" required="required" />
<span>
<button class="btn submit-updates-1" type="white" big>SUBMIT</button>
</span>
</div>
</form>
<span class="subscribe white">Stay updated about new tutorials ↗ </span>
<a href="#partner" class="hero-jump" title="Partners"> </a>
</column>
<column cols="4">
</column>
</row>
</section>
<!-- <row centered>
<a href="#partner" class="hero-jump"> </a>
</row> -->
<section id="partner" class="partners">
<row centered>
<column cols="10" class="card animated fadeIn">
<span class="label text-centered">Maximizing Efficiency</span>
<p class="h2">Built With These Great Services</p>
<p>Cabin is built using React and Redux. Stream powers the feed technology, Algolia search, Mapbox the custom maps, Keen analytics and ImgIX the image resizing. These APIs are powerful and scalable and allow you to build a fully featured app.</p>
<img src="/img/partners-flare.png" alt="API partners used in this full stack app tutorial" />
</column>
</row>
<row centered>
<span class="label text-centered shim">TOPICS COVERED</span>
</row>
</section>
<section class="topics">
<row centered>
<h2 class="h1">Getting Started</h2>
</row>
<row centered>
<ul>
<a href="https://getstream.io/blog/cabin-react-redux-example-app-introduction/" class="btn green" target="_blank" title="Cabin Tutorial - Step 1">Step 1 →</a>
<li>Full-Stack Node & React Application Structure</li>
<li>Webpack Overview & Basics</li>
</ul>
</row>
<!-- <row centered class="shim">
<form autocomplete="off" method="#" action="#" class="forms updates-2">
<div class="btn-append">
<input type="email" name="search" class="input-big" placeholder="Enter Your Email to Stay Updated" required="required" />
<span>
<button class="btn submit-updates-2" type="white" big>SUBMIT</button>
</span>
</div>
</form>
</row> -->
<row>
<column cols="4" offset="2" class="text-centered">
<img src="/img/reactlogo.svg" width="40" height="36" alt="React logo" />
<h2>React</h2>
<ul>
<a href="https://getstream.io/blog/cabin-react-redux-example-app-react/" class="btn green" target="_blank" title="Cabin Tutorial - Step 2">Step 2 →</a>
<li>History & Philosophy of <a href="https://facebook.github.io/react/" target="_blank">React</a></li>
<li>JSX Overview & Basics</li>
<li>React Components, In-Depth</li>
</ul>
</column>
<column cols="4" class="text-centered">
<img src="/img/reduxlogo.svg" width="37" height="35" alt="Redux logo" />
<h2>Redux</h2>
<ul>
<a href="https://getstream.io/blog/cabin-react-redux-example-app-redux/" class="btn green" target="_blank" title="Cabin Tutorial - Step 3">Step 3 →</a>
<li><a href="http://redux.js.org/" target="_blank">Redux</a> Overview</li>
<li>State vs DOM Manipulation</li>
<li>Redux Fundamentals</li>
<li>Reducers & Actions</li>
</ul>
</column>
</row>
<row>
<column cols="11" offset="1">
<span class="clicktweet text-centered">Tweet: "Cabin: Free Fully Functioning React & Redux App with Tutorials: http://bit.ly/1VtuQ1R"</span>
<a href="https://twitter.com/intent/tweet?text=Cabin%3A%20free%20fully%20functioning%20React%20%26%20Redux%20app%20with%20tutorials%20http%3A%2F%2Fbit.ly%2F1VtuQ1R" target="_blank" class="twittercta">Click To Tweet</a>
</columns>
</row>
<row>
<column cols="4" offset="2" class="text-centered">
<img src="/img/streamlogo.svg" width="56" height="28" alt="Stream logo" />
<h2>Feeds</h2>
<ul>
<a href="https://getstream.io/blog/cabin-react-redux-example-app-stream/" class="btn green" target="_blank" title="Cabin Tutorial - Step 4">Step 4 →</a>
<li>Feeds powered by Getstream.io</li>
<li>Stream Overview</li>
<li>Adding Activities</li>
<li>Enriching Data</li>
<li>Aggregation</li>
<li>Realtime Notifications</li>
</ul>
</column>
<column cols="4" class="text-centered">
<img src="/img/imgixlogo.svg" width="91" height="34" alt="Imgix logo" />
<h2>Image Processing</h2>
<ul>
<a href="https://getstream.io/blog/cabin-react-redux-example-app-imgix/" class="btn green" target="_blank" title="Cabin Tutorial - Step 5">Step 5 →</a>
<li>Image hosting by ImgIx.com</li>
<li>Setup</li>
<li>Image Adjustments</li
<li>Instagram-Like Filters</li>
</ul>
</column>
</row>
<row>
<column cols="4" offset="2" class="text-centered">
<img src="/img/keenlogo.svg" width="35" height="30" alt="Keen logo" />
<h2>Analytics</h2>
<ul>
<a href="https://getstream.io/blog/cabin-react-redux-example-app-keen/" class="btn green" target="_blank" title="Cabin Tutorial - Step 6">Step 6 →</a>
<li>Analytics with Keen</li>
<li>State vs DOM Manipulation</li>
<li>Redux Fundamentals</li>
<li>Reducers & Actions</li>
</ul>
</column>
<column cols="4" class="text-centered">
<img src="/img/algolialogo.svg" width="33" height="37" alt="Algolia logo" />
<h2>Search</h2>
<ul>
<a href="https://getstream.io/blog/cabin-react-redux-example-app-algolia/" class="btn green" target="_blank" title="Cabin Tutorial - Step 7">Step 7 →</a>
<li>Search powered by Algolia</li>
<li>Overview of Algolia</li>
<li>Implementing Server Side</li>
<li>Implementing Client Side</li>
<li>Awesome Search Options</li>
</ul>
</column>
</row>
<row>
<column cols="4" offset="2" class="text-centered">
<img src="/img/mapboxlogo.svg" width="86" height="24" alt="Mapbox logo" />
<h2>Maps</h2>
<ul>
<a href="https://getstream.io/blog/cabin-react-redux-example-app-mapbox/" class="btn green" target="_blank">Step 8 →</a>
<li>Custom maps with Mapbox.com</li>
<li>Client & Server Side Setups</li>
<li>Integration Tips</li>
<li>Mapbox Product Breakdowns</li>
</ul>
</column>
<column cols="4" class="text-centered">
<img src="/img/digitaloceanlogo.svg" width="54" height="30" alt="DigitalOcean logo" />
<h2>Cloud Server</h2>
<ul>
<a href="https://www.digitalocean.com/community/tutorials/how-to-deploy-a-node-js-app-using-terraform-on-ubuntu-14-04" class="btn green" target="_blank">Step 9 →</a>
<li>Hosting through DigitalOcean</li>
<li>Automating Deployments</li>
<li>Process Management with pm2</li>
<li>Terraform Configuration</li>
</ul>
</column>
</row>
<row centered>
<column cols="12" class="text-centered">
<img src="/img/bonus.svg" width="129" height="98" class="bonus-img" alt="Bonus tips for React & Redux"/>
</column>
</row>
<row centered>
<column cols="12" class="text-centered">
<h3 class="text-centered bonus-title">React/Redux - Best Practices & Gotchas</h3>
</column>
</row>
<row centered>
<ul>
<a href="https://getstream.io/blog/react-redux-best-practices-gotchas/" class="btn green" target="_blank">Go To Bonus →</a>
<li>Clearly articulate best practices when it comes to <a href="https://facebook.github.io/react/" target="_blank">React</a> & <a href="http://redux.js.org/index.html" target="_blank">Redux</a></li>
<li>Avoid common React/Redux pitfalls</li>
<li>Structure a production level application that can scale</li>
<li>Utilize tools such as <a href="https://facebook.github.io/immutable-js/" target="_blank">Immutable.js</a>, <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en" target="_blank">Chrome's React developer tools</a>, and middleware, such as <a href="https://github.com/getsentry/raven-js" target="_blank">Raven</a></li>
<li>Understand the React event system</li>
<li><a href="http://webpack.github.io/" target="_blank" title="Webpack">Webpack</a> overview & basics</li>
</ul>
</row>
</section>
<section class="end">
<img src="/img/end-bg.jpg" alt="Background image" />
<row centered>
<a href="https://github.com/GetStream/stream-react-example" class="btn primary" title="GitHub">GITHUB</a>
</row>
<row centered>
<a href="/demo" class="demo" title="Demo">DEMO</a>
</row>
</section>
<footer>
<row centered>
<span class="label text-centered">DESIGN KIT</span>
</row>
<row centered>
<h2 class="text-centered">Get the Design Assets</h2>
</row>
<row centered>
<form autocomplete="off" method="#" action="#" class="forms auto-center sketch-1">
<div class="btn-append">
<input type="email" name="email" class="input-big" placeholder="Enter Your Email" required="required" />
<span>
<button class="btn submit-sketch-1" type="white" big>DOWNLOAD NOW</button>
</span>
</div>
</form>
</row>
<row class="meta">
<column cols="7">
© 2017 Stream.io INC | A Techstars NYC Company | Proudly Built in Boulder and Amsterdam
</column>
<column cols="2" offset="2">
<div class="social right">
<a href="https://twitter.com/getstream_io" target="_blank" title="Twitter">
<img src="/img/twitter.svg" alt="Twitter"/>
</a>
<a href="https://github.com/GetStream" target="_blank" title="GitHub">
<img src="/img/github.svg" alt="GitHub" />
</a>
<a class="last" href="https://plus.google.com/107168613155747146780" target="_blank" title="Google Plus">
<img src="/img/gplus.svg" alt="Google Plus" />
</a>
</div>
</column>
</row>
</footer>
</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/1854208.js"></script>
</body>
</html>