abdullin / gtd

Sample app for Getting Things Done with Facebook Flux and ReactJS

Sample GTD app with Facebook Flux and React.JS

This is a sample TODO app demonstrating use of Facebook Flux and React.JS.

It was initially introduced at a talk for an outstanding DDDBE community (Domain-Driven Design Belgium). You can watch the whole video and read more about the talk.

Design

To be more precise, this is an example isomorphic Flux web application using fluxible-app, fluxible-plugin-routr, and fluxible-plugin-fetchr.

Version of Flux used here is a bit different from the original Flux, as explained in the original Facebook Flux.

The reasons for choosing Yahoo Fluxible:

1. Methodology is closer to CQRS/ES community with event-driven design experience. It is easier to understand and reason about.

2. Yahoo Fluxible allows building isomorphic applications.

Differences from Yahoo Fluxible that could show up in this code:

1. actions are called events
2. action creators - event creators

Running the Sample

To run the sample:

1. Install Node.JS.

2. Install webpack globally (it bundles scripts for the client):

    > npm install webpack -g
   

3. Browse to web folder and execute:

    > ./run.sh
   

4. Open your browser at http://localhost:3000. Then, type in the textbox and hit Enter to add your first TODO item.

Features

This sample has only a couple of features at this point:

1. In-memory server-side storage (in node.js process).
2. Compose new tasks to Inbox View (type in the text box and hit Enter).
3. Complete tasks by checking them.
4. Edit tasks by clicking on the task name (currently allows only to manage completion and starring).
5. Mark tasks as important by starring them in edit view.
6. Agenda View shows incomplete tasks. Starred tasks come first.
7. Starred View shows starred tasks.

Projects and Contexts do nothing at this point.

Updates and News

You can follow my blog on Software Design for any materials and updates on this project.