Flow Task Save

Simple yet interactive task board for your mobile browser. Written in React with create-react-app.

We have live demo too!

Getting started

Go to your project folder and

git clone [email protected]:moubi/flow-task.git
cd flow-task/
yarn
yarn start

That's it. Navigating to http://localhost:3002 will bring the board with some example data from the localStorage.

Prior installation

The project is built with node version 10.15.1. This is set in the .nvmrc file. You may need to additionally install it on your development machine. With nvm:

nvm install 10.15.1
nvm use

Backend integration

master branch represents pure frontend app that uses localStorage database for columns and tasks data. This is set in src/lib/Api.js. There are also two backend integrations for deployment on php and node enabled hostings.

• Php (feature/php-backend branch)
• Node (feature/node-backend branch)

Check corresponding READMEs for more info.

Words on structure

.
├── App.js
├── App.test.js
├── assets
├── components
├── index.js
├── index.scss
├── lib
├── store
└── testUtils

Some interesting paths:

|-- components - all React app components (Board, Column, Task and Loader).

|-- store - actions and reducers split between the columns and tasks modules.

|-- testUtils - testing utilities for simulating events, working with store and getting component instalnces.

|-- lib - contains Api.js to handle localStorage queries for data.

Tests

Trigger the test suite by

yarn test

Tests cover all the components, reducers and actions. Each test (*.test.js) is placed next to its target file.

Deployment

To build a create-react-app project run:

yarn build

All the production files are then stored in the build/ folder.

Node and php backends have their own build process.

Support

Though, it implements several interesting ideas and UI effects, the board was initially intended to serve personal goals and developed for latest iOS Safari.

Contributing (aka roadmap)

• Android support - there shouldn't be much missing
• DB implementation (perhaps MongoDB?)
• Keep it simple, quick, but interactive (challenge: having usable, but not sassy UI)
• Avoid being Trello, Jira or Asana board alternative

Good starting point is the project board. Open an issue if you need (there is no strict rule or a template) or email me directly. Your contribution is 100% welcome.

Authors

Miroslav Nikolov

License

MIT

Acknowledgments

• swipeable-react - catching swipe interactions
• react-beautiful-dnd - great drag and drop module for React
• unexpected-dom - easily test React components and events