• Demo Page

  • A page contains the classic Todo List as follows:

    

• Cocomic

  • An open-source platform for comic/manga collaboration (SFU CMPT470 course project, no typescript). source code here.

    

• yarn - dependency manager
• express - node.js framework for backend
• materialize - a modern responsive front-end framework based on Material Design
• sass - CSS pre-processors
• postcss - CSS post-processor
• webpack 4 - module bundler
• webpack-dev-middleware - offers a dev middleware for webpack, which arguments a live bundle to a directory
• webpack-hot-middleware - add hot reloading into an existing server without webpack-dev-server
• followed ES6 standard
• babel - compile ES6 to ES5
• react - building user interfaces
• react-hot-loader 4 - hot module reload!
• react-router 4 - routing
• react-redux - the official react bindings for redux (a predictable state container for js apps)
• connected-react-router - a redux binding for react-router 4, currently a replacement for react-router-redux v5
• immutable.js - persistent Immutable data structures for react redux state management
• Typescript - a typed superset of javascript that scales
• DefinitelyTyped - high quality TypeScript type definitions
• editorconfig - maintain consistent coding styles between different editors and IDEs
• eslint - lint javascript files (.js, .jsx)
• tslint - lint typescript files (.ts, .tsx)
• stylelint - lint style files (.css, .scss)
• postgresql - advanced open source database
• prismjs - code syntax highlight
• jest - painless javascript testing
• coveralls - test coverage
• husky - git hooks
• circle-ci 2 - continuous integration tool for testing and deployment
• heroku - a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
• docker - the open-source application container engine

• node
• yarn (recommended) or npm
• docker (recommended) with docker-compose

The easiest way to run the example project is to use docker-compose:

docker-compose up --build

that's it :)

You can also follow instructions below if you want to customize it.

Go to project root directory:

yarn install

If you find permission problem when trying to install yarn globally, check this out.

You can either

• run postgresql and redis using docker images:

docker-compose up -d postgres redis

or

• maintain it by yourself, if so, make sure you set the right config in backend/config.json.

On development (with react-hot-reload and redux-devtools):

yarn run-dev

On production (with uglify-js and other optimazitions):

yarn run-prod

Thanks to webpack-bundle-analyzer, we can analyze and then optimize our assets bundle through DLL Plugin.

yarn profile

yarn test

yarn coveralls

yarn deploy

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

MIT License