A simple react application that renders a list of tasks categorized
into three lanes: To Do, In Progress, and Completed.
Built using react hooks, styled-components, and the react-beautiful-dnd library.
You will need node and yarn installed.
# clone the repo
git clone https://github.com/CBMasri/task-app.git
# go into app's directory
cd task-app
# install dependencies
yarn install
# serve with hot reload at localhost:3000
yarn start
# build for production with minification
yarn build
# launch the test runner
yarn test
Each lane represents a task state. When a task is first created, it will appear
under the To Do lane. Tasks can be moved between lanes using the mouse or via
keyboard commands. Task data will be saved in your local browser
storage.
| Action | |
|---|---|
| Create a task | Enter the task in the input box (Enter to confirm) |
| Edit a task | Click the text of the task you wish to edit (Enter to confirm, Esc to abort) |
| Remove a task | Click the red X which appears when you hover over a task |
| Remove all tasks | Click the Clear Tasks button in the top right |
react-beautiful-dnd comes with built-in accessibility controls.
| Action | Keyboard Command |
|---|---|
| Move to next item | Tab |
| Select a task | Space |
| Move the task | Arrow keys |
| Complete the move | Space |
| Abort the move | Esc |
Heroku provides a builpack
for apps bootstrapped with create-react-app.
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git push heroku master
heroku open
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent