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.
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
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.
.
├── App.js
├── App.test.js
├── assets
├── components
├── index.js
├── index.scss
├── lib
├── store
└── testUtilsSome 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.
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.
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.
Though, it implements several interesting ideas and UI effects, the board was initially intended to serve personal goals and developed for latest iOS Safari.
- 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.
- swipeable-react - catching swipe interactions
- react-beautiful-dnd - great drag and drop module for React
- unexpected-dom - easily test React components and events