Morioh
Login
JavaScript Dev

JavaScript Dev

3 years ago

Community Site SPA Based on ReactJS

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

Foundations

Resources

Blogs
Discussions
Books

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

Download Details:

Author: WRidder

Demo: http://react-spa.herokuapp.com/

Source Code: https://github.com/WRidder/react-spa

#reactjs #react #javascript

Community Site SPA Based on ReactJS
2.70 GEEK