A digital Kanban board made with React
"The Kanban technique emerged in the late 1940s as Toyota’s reimagined approach to manufacturing and engineering. ... The system’s highly visual nature allowed teams to communicate more easily on what work needed to be done and when. It also standardized cues and refined processes, which helped to reduce waste and maximize value." - via LeanKit.com
Build a Digital Kanban board using:
- React for building the front-end User-Interface (UI)
- HTML and CSS (via sass)
- Express as the Server
- Bookshelf.js as your ORM for the Postgresql Datastore.
Cards contain information about a task.
A Card has 6 properties:
- A unique identifier, e.g. "Card-Id #001".
- A Title
- A Body (task details)
- A priority selection
- A status, the status of a card. Should match the column the card can be found in. Columns: "Queue", "In Progress", or "Done".
- A "Created by" field. This should display name of the person who created the task.
- An "Assigned to field". This should display the name of the person who is currently working on the task.
There should be a form which is used to create a new Card. When a card is first created we need minimal information, the information needed is:
- Title (String)
- Priority (low, Medium, High, Blocker)
- Created By (Full Name)
- Assigned To (Full Name)
All other fields are not needed when creating a new Card. The other fields: "Unique Identifier", and "Status" fields will be automatically added by the application.
When a Card appears in a column there should be a way (something clickable?) to move that card to either the next or previous column.
Columns contain Cards and each column is a collection of Cards that share the same status.
The board you will building will have 3 columns:
- Queue
- A card will automatically appear in this column after creation.
- In Progress
- When a card is being worked on it should be displayed in this column.
- Done
- When work has finished on a card it should be displayed in this column.
caveat: do not try to implement click-and-drag just yet, save it as a stretch goal!
A Kanban board contains multiple Columns (and Columns contain Cards). This is the main application component. It is responsible for retreiving data and passing it down to other child components.
| Property | Type | Options |
|---|---|---|
| id(Pk) | number | serial, not null, unique |
| title | string(255) | not null |
| body | string(1024) | not null |
| priority_id(Fk) | number | not null |
| status_id(Fk) | number | not null |
| created_by(Fk) | number | not null |
| assigned_to(Fk) | number | nullable |
| created_at | TS w/ TZ | not null |
| updated_at | TS w/ TZ | not null |
| Property | Type | Options |
|---|---|---|
| id(Pk) | number | serial, not null, unique |
| first_name | string | not null |
| last_name | string | not null |
| string | not null | |
| created_at | TS w/ TZ | not null |
| updated_at | TS w/ TZ | not null |
| Property | Type | Options |
|---|---|---|
| id(Pk) | number | serial, not null, unique |
| name | string | not null |
| rank | number | not null |
| created_at | TS w/ TZ | not null |
| updated_at | TS w/ TZ | not null |
| Property | Type | Options |
|---|---|---|
| id(Pk) | number | serial, not null, unique |
| name | string | not null |
| rank | number | not null |
| created_at | TS w/ TZ | not null |
| updated_at | TS w/ TZ | not null |
Build an Express server which will serve your index.html and static assets.
PostgreSQL and Bookshelf ORM. Create a UML Schema for your database, consider LucidChart. Add these diagrams to your project.
Make It Pretty!™
Your server will have these routes:
- RESTful API endpoints to create, read, update, and delete kanban cards for your application.
- Remember to use MVC architechture: Models, Views, Controllers!
- You will use
react-routerto add FE routes to the application.
| route | action |
|---|---|
| / | Show the kanban board |
| /admin/users | Show a listing of users of the board |
| /admin/users/new | Show a form to add a new user |
| /admin/users/:id | Detail view of user (Stretch goal) |
| /admin/users/:id/edit | Show form to let user update information (Stretch goal) |
| route | action |
|---|---|
| /admin/priorities/ | Show list of current priorities |
| /admin/priorities/new | Show form to add new Priority |
| /admin/priorities/:id/edit | Show form to update selected Priority |
| /admin/statuses/ | Show list of current statuses |
| /admin/statuses/new | Show form to add new Status |
| /admin/statuses/:id/edit | Show form to update selected Status |
Add drag and drop functionality
- create a desktop and mobile view. Tablet view is not needed (possible stretch goal).