Community site SPA based on ReactJS (PoC)

A 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.

Demo on Heroku
(Automatically deployed from this repository on travis build)

Installation

Just running the demo

1. Run $ npm install in the ./server directory
2. Start the server in ./server using $ node src/server.js. Should open a port on 8080.
3. Navigate your browser to http://localhost:8080.

For developers

1. [optional] Install gulp globally using npm install -g gulp
2. Run $ npm install in the base directory
3. Start the server in ./server using $ node src/server.js. Should open a port on 8080.
4. Run $ gulp in the base directory. This will watch for file changes and build when necessary.
5. Navigate your browser to http://localhost:8080; will reload on client changes.

Tested using npm 2.1.0 and node 0.10.33

Current state

• Discovery

• Proof of concept <

• Refactoring
• Stabilizing

Goal

Create 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.

This will be by no means a production ready application. Objectives and goals are subject to change.

Primary objectives

• Find sensible approaches to using reactjs with (re)flux
• Scalable solutions (both in size and regarding developers)
• Isomorphic application
• Tests (unit, integration and functional) for all essential components
• Build methods
• Realtime connections
• File/folder layout

Secondary objectives

• Load modules on demand
• SEO
• Accessibility

Application design

Features

• User login and registration
• Forum-like discussions
• Realtime connections
• Stackoverflow-like questions
• Chat
• Updates

Roles

• Guest
  • Can view public pages
  • Can login
  • Can create account
• User
  • Can view restricted pages
  • Can create questions, discussions and comments.
  • Can delete own comments
• Moderator
  • Can edit/delete questions, discussions and comments from other users
• Administrator
  • Can access administrative area
  • Can list/disable/remove users

Layout

Home page

+---------------------------------------------------------------------------+
| Logo                                                 Account   Updates(5) |
| +----------+ +-----------+ +-------------+  +-------------+ +-----------+ |
| | Home     | | Questions | | Discussions |  | About       | | Chat      | |
| +----------+ +-----------+ +-------------+  +-------------+ +-----------+ |
|                                                                           |
+---------------------------------------------------------------------------+
|  Homepage                                                                 |
|                                                                           |
|                            List of updates                                |
|                                                                           |
+---------------------------------------------------------------------------+
|(c) notice                                                                 |
+---------------------------------------------------------------------------+

Libraries

• ReactJS
• Reflux
• React-router
• ImmutableJS
• Material-ui
• SocketIO

Foundations

• React starter kit

Resources

Blogs

• krawaller.se
• spoike.ghost.io

Discussions

• Google ReactJS group
• ReactJS subreddit

Books

• Developing a React.js Edge

Changelog

[06-jan-14] Added demo app to heroku
[01-dec-14] Improving isomorphic rendering
[30-nov-14] Isomorphic app support
[24-nov-14] Sessions (login/logout/profile); html5 puhsState; single server
[22-nov-14] Initial version