flow-task
flow-task copied to clipboard
moubi
Interactive task board for your mobile browser written in React ✍️
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
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
moubi