WRidder/react-spa

"use strict";
var React = require("react");
var DocumentTitle = require("local/components/core/documentTitle.jsx");
var MarkdownViewer = require("local/components/markdown/viewer.jsx");

var homeMarkedown = "[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/WRidder/react-spa?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\n[![Build Status](https://travis-ci.org/WRidder/react-spa.svg?branch=master)](https://travis-ci.org/WRidder/react-spa)\n\nA Proof of Concept real-time single page application based on React and (Re)flux to discover best practices regarding a multitude of use cases. Contains a simple server with in-memory database in `./server`.\n\n[**Demo on Heroku**](http://react-spa.herokuapp.com/)  \n(Automatically deployed from this repository on travis build)\n\n### Installation\n#### Just running the demo\n1. Run `$ npm install` in the ./server directory\n2. Start the server in ./server using `$ node src/server.js`. Should open a port on 8080.\n3. Navigate your browser to http://localhost:8080.\n\n#### For developers\n1. Run `$ npm install` in the base and in the ./server directory\n2. Run `$ bower install` in the base directory\n3. Start the server in ./server using `$ node src/server.js`. Should open a port on 8080.\n4. **[optional]** Install gulp globally using `npm install -g gulp`\n5. Run `$ gulp` in the base directory. This will watch for file changes and build when necessary.\n6. Navigate your browser to http://localhost:8080; will reload on client changes.\n\nTested using npm 2.1.0 and node 0.10.33\n\n### Current state\n* Discovery\n* **Proof of concept**\n* Refactoring\n* Stabilizing\n\n### Goal\nCreate a more advanced example (w.r.t. your average TODO app) of creating a SPA using ReactJS. Initially as a personal exercise to go *through the mud* once while hoping to share new insights gained during the process and discuss various approaches. \n\nThis will be by no means a production ready application. Objectives and goals are subject to change.\n\n#### Primary objectives\n* Find sensible approaches to using reactjs with (re)flux\n* Scalable solutions (both in size and regarding developers)\n* Isomorphic application\n* Tests (unit, integration and functional) for all essential components\n* Build methods\n* Realtime connections\n* File/folder layout\n\n#### Secondary objectives\n* Load modules on demand\n* SEO \n* Accessibility\n\n### Application design\n#### Features\n* User login and registration\n* Forum-like discussions\n* Realtime connections\n* Stackoverflow-like questions\n* Chat\n* Updates\n\n#### Roles\n* Guest\n  * Can view public pages\n  * Can login\n  * Can create account\n* User\n  * Can view restricted pages\n  * Can create questions, discussions and comments. \n  * Can delete own comments\n* Moderator\n  * Can edit/delete questions, discussions and comments from other users\n* Administrator\n  * Can access adminstrative area\n  * Can list/disable/remove users\n\n#### Layout\n**Home page**\n\n```\n+---------------------------------------------------------------------------+\n| Logo                                                 Account   Updates(5) |\n| +----------+ +-----------+ +-------------+  +-------------+ +-----------+ |\n| | Home     | | Questions | | Discussions |  | About       | | Chat      | |\n| +----------+ +-----------+ +-------------+  +-------------+ +-----------+ |\n|                                                                           |\n+---------------------------------------------------------------------------+\n|  Homepage                                                                 |\n|                                                                           |\n|                            List of updates                                |\n|                                                                           |\n+---------------------------------------------------------------------------+\n|(c) notice                                                                 |\n+---------------------------------------------------------------------------+\n```\n\n### Libraries\n* [ReactJS](https://facebook.github.io/react/)\n* [Reflux](https://github.com/spoike/refluxjs)\n* [React-router](https://github.com/rackt/react-router/)\n* [ImmutableJS](https://github.com/facebook/immutable-js)\n* [Material-ui](https://github.com/callemall/material-ui)\n* [SocketIO](http://socket.io/)\n\n### Foundations\n* [React starter kit](https://github.com/kriasoft/react-starter-kit)\n\n### Resources\n#### Blogs\n* [krawaller.se](http://blog.krawaller.se/)\n* [spoike.ghost.io](http://spoike.ghost.io/)\n\n#### Discussions\n* [Google ReactJS group](https://groups.google.com/forum/#!forum/reactjs)\n* [ReactJS subreddit](https://www.reddit.com/r/reactjs/search?q=reactjs&sort=relevance&restrict_sr=on&t=all)\n\n#### Books\n* [Developing a React.js Edge](http://shop.oreilly.com/product/9781939902122.do)\n\n### Changelog\n**[06-jan-14]** Added demo app to heroku    \n**[01-dec-14]** Improving isomorphic rendering  \n**[30-nov-14]** Isomorphic app support  \n**[24-nov-14]** Sessions (login/logout/profile); html5 puhsState; single server  \n**[22-nov-14]** Initial version\n";

var Home = React.createClass({
  render: function() {
    return (
      <DocumentTitle title="Home">
        <div>
          <h1>Home</h1>
          <p>This is a live demonstration site for the react-spa application build automatically from the latest version. You can login using the credentials provided on the login page</p>
          <p>If you encounter any problems, have suggestions or ideas, please head over to the GitHub page!</p>
          <MarkdownViewer value={homeMarkedown}/>
        </div>
      </DocumentTitle>
    );
  }
});
module.exports = Home;