ando-takahiro/fbpage-manager

My first react.js application

Features

• FB login, logout
• Browse multiple pages
• Create new post(published/unpublished)
• Browse posts in each pages

Components

Application

• react.js
• Essence, UI framework on react

Development Environment

• Content pipeline
  • babel
  • webpack
  • node.js
    • I am in the author list 😄
• Test
  • mocha, testing framework
  • enzyme, mock library for react.js
  • sinon.js, general mock library

Design

UI Components

This is my first react.js application. I tried to understand basic ideas of react.js state management.

App

It manages login, logout states by traditional FSM style. There are following states.

LoginWindow

It shows FB login button with message.

PageWindow

It is the root component of manager.

• switch page
• show new posts after sending

Post

It expands and collapses post content.

PostComposer

• send a new post
• show effects to help users

SpinnerWindow.jsx

It shows spin with message.

TitleBar

It provides 2 menus.

• page list
• setting menu(logout)

Automated Tests

There are 2 types of tests in tests/ directory.

• unit test: test for utility functions using mocha and sinon
• integration test: test for components using mocha, enzyme and sinon
  • make sure login, logout flow

Usage

• install node v5.11.1
• git clone [this repo]
• npm install -d
• npm run build
• npm run prod
• open http://localtest.me:8000

and test

• npm run test:serv
• open http://localtest.me:8001