Histeria

A fantastic comic viewer in the world.

Prerequisites

node >= 8.0
npm >= 5.0
yarn >= 1.0

Techniques

react - A declarative, efficient, and flexible JavaScript library for building user interfaces.
redux - a predictable state container for JavaScript apps.
react-redux - Official React bindings for Redux
react-router - A complete routing library for React
redux-promise-middleware - Redux middleware for resolving and rejecting promises with conditional optimistic updates.
redux-thunk - Allows you to write action creators that return a function instead of an action.
webpack - module bundler.
babel - A compiler for writing next generation JavaScript.
css-modules - Modulize CSS.
react-swipeable - Swipe bindings for react.

Contribute

Install packages by npm or yarn

yarn install

Start webpack dev server

yarn start

Visit http://localhost:8000 in browser

Development Guide

Development

To enable redux-logger and fetch fake data from local at src/api/)

yarn start

To enable test server in development mode

SERVER=1 yarn start

Production

Production build will exclude unnecessary resources (ex: redux-logger only for debugging), ship with server url and minimize resources as small as possible to optimize website experience.

yarn build

It's up to you to spin up a local server in dist folder to see production result, for example launching a python server in dist

python -m SimpleHTTPServer

and go to visit http://localhost:8000

Clean dist resources

yarn clean

Push to gh-pages (it requires `yarn build` and follow a `git commit` before publishing)

yarn gh-pages

Steps to gh-pages publish

yarn build

git commit new changes (including build results in dist/*)

yarn gh-pages

Application State Structure

{
  comicDrawer: {
    open: false,
    comicId: 1
  },

  comicList: {
    offset: 0,
    comicsPerPage: 35
  },

  comicViewer: {
    comicId: 1,
    episodeId: 1
  },

  comics: {
    isFetching: false,
    fetchError: false,
    entries: {
      1: {
        id: 1,
        title: 'title1'
      },
      2: {
        id: 2,
        title: 'title2'
      }
    }
  },

  episodes: {
    comicId: 1,
    isFetching: false,
    fetchError: false,
    entries: {
      1: {
        id: 1,
        title: 'title1'
      },
      2: {
        id: 2,
        title: 'title2'
      }
    }
  },

  filter: {
    categories: {
      latest: 'Latest',
      favorite: 'favorite'
    },
    query: '<user query>'
  },

  pages: {
    comicId: 1,
    episodeId: 2,
    isFetching: false,
    fetchError: false,
    entries: [
      'http://path/to/page1',
      'http://path/to/page2'
    ]
  },

  userPrefs: {
    favorites: [1, 3, 7],
    reads: [
      {
        comicId: 1,
        episodeId: 1
      },
      {
        comicId: 1,
        episodeId: 2
      }
    ]
  }
}

ricglz/histeria