├── logo.png
├── .gitignore
├── BACKEND_INSTRUCTIONS.md
├── MOBILE_INSTRUCTIONS.md
├── readme.md
└── FRONTEND_INSTRUCTIONS.md


/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ash-project/realworld-starter-kit/master/logo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /bower_components
 6 | 
 7 | # IDEs and editors
 8 | /.idea
 9 | .project
10 | .classpath
11 | *.launch
12 | .settings/
13 | 
14 | 
15 | #System Files
16 | .DS_Store
17 | Thumbs.db
18 | 


--------------------------------------------------------------------------------
/BACKEND_INSTRUCTIONS.md:
--------------------------------------------------------------------------------
1 | > *Note: Delete this file before publishing your app!*
2 | 
3 | # [Backend API spec](https://github.com/gothinkster/realworld/tree/master/api)
4 | 
5 | For your convenience, we have a [Postman collection](https://github.com/gothinkster/realworld/blob/master/api/Conduit.postman_collection.json) that you can use to test your API endpoints as you build your app.
6 | 


--------------------------------------------------------------------------------
/MOBILE_INSTRUCTIONS.md:
--------------------------------------------------------------------------------
 1 | > *Note: Delete this file before publishing your app!*
 2 | 
 3 | # [Mobile Icons (iOS/Android)](https://github.com/gothinkster/realworld/tree/master/spec/mobile_icons)
 4 | 
 5 | ### Using the hosted API
 6 | 
 7 | Simply point your [API requests](https://github.com/gothinkster/realworld/tree/master/api) to `https://conduit.productionready.io/api` and you're good to go!
 8 | 
 9 | ### Styles/Templates
10 | 
11 | Unfortunately, there isn't a common way for us to reuse & share styles/templates for cross-platform mobile apps.
12 | 
13 | Instead, we recommend using the Medium.com [iOS](https://itunes.apple.com/us/app/medium/id828256236?mt=8) and [Android](https://play.google.com/store/apps/details?id=com.medium.reader&hl=en) apps as a "north star" regarding general UI functionality/layout, but try not to go too overboard otherwise it will unnecessarily complicate your codebase (in other words, [KISS](https://en.wikipedia.org/wiki/KISS_principle) :)
14 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # ![RealWorld Example App](logo.png)
 2 | 
 3 | > ### [YOUR_FRAMEWORK] codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld) spec and API.
 4 | 
 5 | 
 6 | ### [Demo](https://github.com/gothinkster/realworld)    [RealWorld](https://github.com/gothinkster/realworld)
 7 | 
 8 | 
 9 | This codebase was created to demonstrate a fully fledged fullstack application built with **[YOUR_FRAMEWORK]** including CRUD operations, authentication, routing, pagination, and more.
10 | 
11 | We've gone to great lengths to adhere to the **[YOUR_FRAMEWORK]** community styleguides & best practices.
12 | 
13 | For more information on how to this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo.
14 | 
15 | 
16 | # How it works
17 | 
18 | > Describe the general architecture of your app here
19 | 
20 | # Getting started
21 | 
22 | > npm install, npm start, etc.
23 | 
24 | 


--------------------------------------------------------------------------------
/FRONTEND_INSTRUCTIONS.md:
--------------------------------------------------------------------------------
  1 | > *Note: Delete this file before publishing your app!*
  2 | 
  3 | ### Using the hosted API
  4 | 
  5 | Simply point your [API requests](https://github.com/gothinkster/realworld/tree/master/api) to `https://conduit.productionready.io/api` and you're good to go!
  6 | 
  7 | ### Routing Guidelines
  8 | 
  9 | - Home page (URL: /#/ )
 10 |     - List of tags
 11 |     - List of articles pulled from either Feed, Global, or by Tag
 12 |     - Pagination for list of articles
 13 | - Sign in/Sign up pages (URL: /#/login, /#/register )
 14 |     - Uses JWT (store the token in localStorage)
 15 |     - Authentication can be easily switched to session/cookie based
 16 | - Settings page (URL: /#/settings )
 17 | - Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
 18 | - Article page (URL: /#/article/article-slug-here )
 19 |     - Delete article button (only shown to article's author)
 20 |     - Render markdown from server client side
 21 |     - Comments section at bottom of page
 22 |     - Delete comment button (only shown to comment's author)
 23 | - Profile page (URL: /#/profile/:username, /#/profile/:username/favorites )
 24 |     - Show basic user info
 25 |     - List of articles populated from author's created articles or author's favorited articles
 26 | 
 27 | # Styles
 28 | 
 29 | Instead of having the Bootstrap theme included locally, we recommend loading the precompiled theme from our CDN (our [header template](#header) does this by default):
 30 | 
 31 | ```html
 32 | <link rel="stylesheet" href="//demo.productionready.io/main.css">
 33 | ```
 34 | 
 35 | Alternatively, if you want to make modifications to the theme, check out the [theme's repo](https://github.com/gothinkster/conduit-bootstrap-template).
 36 | 
 37 | 
 38 | # Templates
 39 | 
 40 | - [Layout](#layout)
 41 |   - [Header](#header)
 42 |   - [Footer](#footer)
 43 | - [Pages](#pages)
 44 |   - [Home](#home)
 45 |   - [Login/Register](#loginregister)
 46 |   - [Profile](#profile)
 47 |   - [Settings](#settings)
 48 |   - [Create/Edit Article](#createedit-article)
 49 |   - [Article](#article)
 50 |   
 51 | 
 52 | ## Layout
 53 | 
 54 | 
 55 | ### Header
 56 | 
 57 | ```html
 58 | <!DOCTYPE html>
 59 | <html>
 60 |   <head>
 61 |     <meta charset="utf-8">
 62 |     <title>Conduit</title>
 63 |     <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
 64 |     <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
 65 |     <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
 66 |     <!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
 67 |     <link rel="stylesheet" href="//demo.productionready.io/main.css">
 68 |   </head>
 69 |   <body>
 70 | 
 71 |      <nav class="navbar navbar-light">
 72 |       <div class="container">
 73 |         <a class="navbar-brand" href="index.html">conduit</a>
 74 |         <ul class="nav navbar-nav pull-xs-right">
 75 |           <li class="nav-item">
 76 |             <!-- Add "active" class when you're on that page" -->
 77 |             <a class="nav-link active" href="">Home</a>
 78 |           </li>
 79 |           <li class="nav-item">
 80 |             <a class="nav-link" href="">
 81 |               <i class="ion-compose"></i>&nbsp;New Post
 82 |             </a>
 83 |           </li>
 84 |           <li class="nav-item">
 85 |             <a class="nav-link" href="">
 86 |               <i class="ion-gear-a"></i>&nbsp;Settings
 87 |             </a>
 88 |           </li>
 89 |           <li class="nav-item">
 90 |             <a class="nav-link" href="">Sign up</a>
 91 |           </li>
 92 |         </ul>
 93 |       </div>
 94 |     </nav>
 95 | 
 96 | 
 97 | ```
 98 | 
 99 | ### Footer
100 | ```html
101 |     <footer>
102 |       <div class="container">
103 |         <a href="/" class="logo-font">conduit</a>
104 |         <span class="attribution">
105 |           An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed under MIT.
106 |         </span>
107 |       </div>
108 |     </footer>
109 | 
110 |   </body>
111 | </html>
112 | ```
113 | 
114 | ## Pages
115 | 
116 | ### Home
117 | ```html
118 | <div class="home-page">
119 | 
120 |   <div class="banner">
121 |     <div class="container">
122 |       <h1 class="logo-font">conduit</h1>
123 |       <p>A place to share your knowledge.</p>
124 |     </div>
125 |   </div>
126 | 
127 |   <div class="container page">
128 |     <div class="row">
129 | 
130 |       <div class="col-md-9">
131 |         <div class="feed-toggle">
132 |           <ul class="nav nav-pills outline-active">
133 |             <li class="nav-item">
134 |               <a class="nav-link disabled" href="">Your Feed</a>
135 |             </li>
136 |             <li class="nav-item">
137 |               <a class="nav-link active" href="">Global Feed</a>
138 |             </li>
139 |           </ul>
140 |         </div>
141 | 
142 |         <div class="article-preview">
143 |           <div class="article-meta">
144 |             <a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
145 |             <div class="info">
146 |               <a href="" class="author">Eric Simons</a>
147 |               <span class="date">January 20th</span>
148 |             </div>
149 |             <button class="btn btn-outline-primary btn-sm pull-xs-right">
150 |               <i class="ion-heart"></i> 29
151 |             </button>
152 |           </div>
153 |           <a href="" class="preview-link">
154 |             <h1>How to build webapps that scale</h1>
155 |             <p>This is the description for the post.</p>
156 |             <span>Read more...</span>
157 |           </a>
158 |         </div>
159 | 
160 |         <div class="article-preview">
161 |           <div class="article-meta">
162 |             <a href="profile.html"><img src="http://i.imgur.com/N4VcUeJ.jpg" /></a>
163 |             <div class="info">
164 |               <a href="" class="author">Albert Pai</a>
165 |               <span class="date">January 20th</span>
166 |             </div>
167 |             <button class="btn btn-outline-primary btn-sm pull-xs-right">
168 |               <i class="ion-heart"></i> 32
169 |             </button>
170 |           </div>
171 |           <a href="" class="preview-link">
172 |             <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
173 |             <p>This is the description for the post.</p>
174 |             <span>Read more...</span>
175 |           </a>
176 |         </div>
177 | 
178 |       </div>
179 | 
180 |       <div class="col-md-3">
181 |         <div class="sidebar">
182 |           <p>Popular Tags</p>
183 | 
184 |           <div class="tag-list">
185 |             <a href="" class="tag-pill tag-default">programming</a>
186 |             <a href="" class="tag-pill tag-default">javascript</a>
187 |             <a href="" class="tag-pill tag-default">emberjs</a>
188 |             <a href="" class="tag-pill tag-default">angularjs</a>
189 |             <a href="" class="tag-pill tag-default">react</a>
190 |             <a href="" class="tag-pill tag-default">mean</a>
191 |             <a href="" class="tag-pill tag-default">node</a>
192 |             <a href="" class="tag-pill tag-default">rails</a>
193 |           </div>
194 |         </div>
195 |       </div>
196 | 
197 |     </div>
198 |   </div>
199 | 
200 | </div>
201 | ```
202 | 
203 | ### Login/Register
204 | 
205 | ```html
206 | <div class="auth-page">
207 |   <div class="container page">
208 |     <div class="row">
209 | 
210 |       <div class="col-md-6 offset-md-3 col-xs-12">
211 |         <h1 class="text-xs-center">Sign up</h1>
212 |         <p class="text-xs-center">
213 |           <a href="">Have an account?</a>
214 |         </p>
215 | 
216 |         <ul class="error-messages">
217 |           <li>That email is already taken</li>
218 |         </ul>
219 | 
220 |         <form>
221 |           <fieldset class="form-group">
222 |             <input class="form-control form-control-lg" type="text" placeholder="Your Name">
223 |           </fieldset>
224 |           <fieldset class="form-group">
225 |             <input class="form-control form-control-lg" type="text" placeholder="Email">
226 |           </fieldset>
227 |           <fieldset class="form-group">
228 |             <input class="form-control form-control-lg" type="password" placeholder="Password">
229 |           </fieldset>
230 |           <button class="btn btn-lg btn-primary pull-xs-right">
231 |             Sign up
232 |           </button>
233 |         </form>
234 |       </div>
235 | 
236 |     </div>
237 |   </div>
238 | </div>
239 | ```
240 | 
241 | ### Profile
242 | 
243 | ```html
244 | <div class="profile-page">
245 | 
246 |   <div class="user-info">
247 |     <div class="container">
248 |       <div class="row">
249 | 
250 |         <div class="col-xs-12 col-md-10 offset-md-1">
251 |           <img src="http://i.imgur.com/Qr71crq.jpg" class="user-img" />
252 |           <h4>Eric Simons</h4>
253 |           <p>
254 |             Cofounder @GoThinkster, lived in Aol's HQ for a few months, kinda looks like Peeta from the Hunger Games
255 |           </p>
256 |           <button class="btn btn-sm btn-outline-secondary action-btn">
257 |             <i class="ion-plus-round"></i>
258 |             &nbsp;
259 |             Follow Eric Simons 
260 |           </button>
261 |         </div>
262 | 
263 |       </div>
264 |     </div>
265 |   </div>
266 | 
267 |   <div class="container">
268 |     <div class="row">
269 | 
270 |       <div class="col-xs-12 col-md-10 offset-md-1">
271 |         <div class="articles-toggle">
272 |           <ul class="nav nav-pills outline-active">
273 |             <li class="nav-item">
274 |               <a class="nav-link active" href="">My Articles</a>
275 |             </li>
276 |             <li class="nav-item">
277 |               <a class="nav-link" href="">Favorited Articles</a>
278 |             </li>
279 |           </ul>
280 |         </div>
281 | 
282 |         <div class="article-preview">
283 |           <div class="article-meta">
284 |             <a href=""><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
285 |             <div class="info">
286 |               <a href="" class="author">Eric Simons</a>
287 |               <span class="date">January 20th</span>
288 |             </div>
289 |             <button class="btn btn-outline-primary btn-sm pull-xs-right">
290 |               <i class="ion-heart"></i> 29
291 |             </button>
292 |           </div>
293 |           <a href="" class="preview-link">
294 |             <h1>How to build webapps that scale</h1>
295 |             <p>This is the description for the post.</p>
296 |             <span>Read more...</span>
297 |           </a>
298 |         </div>
299 | 
300 |         <div class="article-preview">
301 |           <div class="article-meta">
302 |             <a href=""><img src="http://i.imgur.com/N4VcUeJ.jpg" /></a>
303 |             <div class="info">
304 |               <a href="" class="author">Albert Pai</a>
305 |               <span class="date">January 20th</span>
306 |             </div>
307 |             <button class="btn btn-outline-primary btn-sm pull-xs-right">
308 |               <i class="ion-heart"></i> 32
309 |             </button>
310 |           </div>
311 |           <a href="" class="preview-link">
312 |             <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
313 |             <p>This is the description for the post.</p>
314 |             <span>Read more...</span>
315 |             <ul class="tag-list">
316 |               <li class="tag-default tag-pill tag-outline">Music</li>
317 |               <li class="tag-default tag-pill tag-outline">Song</li>
318 |             </ul>
319 |           </a>
320 |         </div>
321 | 
322 | 
323 |       </div>
324 | 
325 |     </div>
326 |   </div>
327 | 
328 | </div>
329 | ```
330 | 
331 | ### Settings
332 | 
333 | ```html
334 | <div class="settings-page">
335 |   <div class="container page">
336 |     <div class="row">
337 | 
338 |       <div class="col-md-6 offset-md-3 col-xs-12">
339 |         <h1 class="text-xs-center">Your Settings</h1>
340 | 
341 |         <form>
342 |           <fieldset>
343 |               <fieldset class="form-group">
344 |                 <input class="form-control" type="text" placeholder="URL of profile picture">
345 |               </fieldset>
346 |               <fieldset class="form-group">
347 |                 <input class="form-control form-control-lg" type="text" placeholder="Your Name">
348 |               </fieldset>
349 |               <fieldset class="form-group">
350 |                 <textarea class="form-control form-control-lg" rows="8" placeholder="Short bio about you"></textarea>
351 |               </fieldset>
352 |               <fieldset class="form-group">
353 |                 <input class="form-control form-control-lg" type="text" placeholder="Email">
354 |               </fieldset>
355 |               <fieldset class="form-group">
356 |                 <input class="form-control form-control-lg" type="password" placeholder="Password">
357 |               </fieldset>
358 |               <button class="btn btn-lg btn-primary pull-xs-right">
359 |                 Update Settings
360 |               </button>
361 |           </fieldset>
362 |         </form>
363 |       </div>
364 | 
365 |     </div>
366 |   </div>
367 | </div>
368 | ```
369 | 
370 | ### Create/Edit Article
371 | 
372 | ```html
373 | <div class="editor-page">
374 |   <div class="container page">
375 |     <div class="row">
376 | 
377 |       <div class="col-md-10 offset-md-1 col-xs-12">
378 |         <form>
379 |           <fieldset>
380 |             <fieldset class="form-group">
381 |                 <input type="text" class="form-control form-control-lg" placeholder="Article Title">
382 |             </fieldset>
383 |             <fieldset class="form-group">
384 |                 <input type="text" class="form-control" placeholder="What's this article about?">
385 |             </fieldset>
386 |             <fieldset class="form-group">
387 |                 <textarea class="form-control" rows="8" placeholder="Write your article (in markdown)"></textarea>
388 |             </fieldset>
389 |             <fieldset class="form-group">
390 |                 <input type="text" class="form-control" placeholder="Enter tags"><div class="tag-list"></div>
391 |             </fieldset>
392 |             <button class="btn btn-lg pull-xs-right btn-primary" type="button">
393 |                 Publish Article
394 |             </button>
395 |           </fieldset>
396 |         </form>
397 |       </div>
398 | 
399 |     </div>
400 |   </div>
401 | </div>
402 | 
403 | 
404 | ```
405 | 
406 | ### Article
407 | 
408 | ```html
409 | <div class="article-page">
410 | 
411 |   <div class="banner">
412 |     <div class="container">
413 | 
414 |       <h1>How to build webapps that scale</h1>
415 | 
416 |       <div class="article-meta">
417 |         <a href=""><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
418 |         <div class="info">
419 |           <a href="" class="author">Eric Simons</a>
420 |           <span class="date">January 20th</span>
421 |         </div>
422 |         <button class="btn btn-sm btn-outline-secondary">
423 |           <i class="ion-plus-round"></i>
424 |           &nbsp;
425 |           Follow Eric Simons <span class="counter">(10)</span>
426 |         </button>
427 |         &nbsp;&nbsp;
428 |         <button class="btn btn-sm btn-outline-primary">
429 |           <i class="ion-heart"></i>
430 |           &nbsp;
431 |           Favorite Post <span class="counter">(29)</span>
432 |         </button>
433 |       </div>
434 | 
435 |     </div>
436 |   </div>
437 | 
438 |   <div class="container page">
439 | 
440 |     <div class="row article-content">
441 |       <div class="col-md-12">
442 |         <p>
443 |         Web development technologies have evolved at an incredible clip over the past few years.
444 |         </p>
445 |         <h2 id="introducing-ionic">Introducing RealWorld.</h2>
446 |         <p>It's a great solution for learning how other frameworks work.</p>
447 |       </div>
448 |     </div>
449 | 
450 |     <hr />
451 | 
452 |     <div class="article-actions">
453 |       <div class="article-meta">
454 |         <a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
455 |         <div class="info">
456 |           <a href="" class="author">Eric Simons</a>
457 |           <span class="date">January 20th</span>
458 |         </div>
459 | 
460 |         <button class="btn btn-sm btn-outline-secondary">
461 |           <i class="ion-plus-round"></i>
462 |           &nbsp;
463 |           Follow Eric Simons <span class="counter">(10)</span>
464 |         </button>
465 |         &nbsp;
466 |         <button class="btn btn-sm btn-outline-primary">
467 |           <i class="ion-heart"></i>
468 |           &nbsp;
469 |           Favorite Post <span class="counter">(29)</span>
470 |         </button>
471 |       </div>
472 |     </div>
473 | 
474 |     <div class="row">
475 | 
476 |       <div class="col-xs-12 col-md-8 offset-md-2">
477 | 
478 |         <form class="card comment-form">
479 |           <div class="card-block">
480 |             <textarea class="form-control" placeholder="Write a comment..." rows="3"></textarea>
481 |           </div>
482 |           <div class="card-footer">
483 |             <img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
484 |             <button class="btn btn-sm btn-primary">
485 |              Post Comment
486 |             </button>
487 |           </div>
488 |         </form>
489 |         
490 |         <div class="card">
491 |           <div class="card-block">
492 |             <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
493 |           </div>
494 |           <div class="card-footer">
495 |             <a href="" class="comment-author">
496 |               <img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
497 |             </a>
498 |             &nbsp;
499 |             <a href="" class="comment-author">Jacob Schmidt</a>
500 |             <span class="date-posted">Dec 29th</span>
501 |           </div>
502 |         </div>
503 | 
504 |         <div class="card">
505 |           <div class="card-block">
506 |             <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
507 |           </div>
508 |           <div class="card-footer">
509 |             <a href="" class="comment-author">
510 |               <img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
511 |             </a>
512 |             &nbsp;
513 |             <a href="" class="comment-author">Jacob Schmidt</a>
514 |             <span class="date-posted">Dec 29th</span>
515 |             <span class="mod-options">
516 |               <i class="ion-edit"></i>
517 |               <i class="ion-trash-a"></i>
518 |             </span>
519 |           </div>
520 |         </div>
521 |         
522 |       </div>
523 | 
524 |     </div>
525 | 
526 |   </div>
527 | 
528 | </div>
529 | ```
530 | 


--------------------------------------------------------------------------------