Giter Club home page Giter Club logo

react-spa's Introduction

Community site SPA based on ReactJS (PoC)

Gitter Build Status Code Climate

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 adminstrative 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

react-spa's People

Contributors

ariabuckles avatar gitter-badger avatar wridder avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.