Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brunojppb/kanban-ui
A basic React app with a backend to be used in React.js interviews
https://github.com/brunojppb/kanban-ui
frontend javascript react reactjs
Last synced: about 1 month ago
JSON representation
A basic React app with a backend to be used in React.js interviews
- Host: GitHub
- URL: https://github.com/brunojppb/kanban-ui
- Owner: brunojppb
- Created: 2018-05-28T10:57:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-25T18:51:30.000Z (almost 2 years ago)
- Last Synced: 2023-05-05T14:51:28.700Z (over 1 year ago)
- Topics: frontend, javascript, react, reactjs
- Language: JavaScript
- Homepage: https://bpaulino.com/kanban-ui/
- Size: 1.17 MB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kanban UI
A kanban board created with React.js.
Requirements:
- It should preferably be built with plain React.js, but you can use any JS framework, or none at all, Vanilla JS is just fine
- You can use any http request library for API communication
- It should have a kanban board with 3 lists: **Todo**, **Doing** and **Done**
- It should be possible to insert new tasks
- It should be possible to delete current tasks
- It should be possible to edit current tasks
- It should be possible to move tasks between lists
- It should not include any CSS framework
- The layout should be responsive to some degree, at least for mobile devices
You can check a live version of this Kanban board [HERE](https://bpaulino.com/kanban-ui). You can also take a look at the code, but if you copy, we will know 🙂
## Backend API
The API is ready and available here: https://kanban-api-rails.herokuapp.com/todos
The API responds with [JSON](https://www.json.org/json-en.html) for all endpoints.
### Endpoints:
- GET `/todos` - List all tasks in the database.
Response:
```json
[
{
"id": 1,
"content": "this is the content",
"state": 1,
"created_at": "2018-05-29T09:12:57.752Z",
"updated_at": "2018-05-29T09:12:57.752Z"
},
{
"id": 2,
"content": "this is the content 2",
"state": 2,
"created_at": "2018-05-29T09:12:57.752Z",
"updated_at": "2018-05-29T09:12:57.752Z"
},
]
```
- POST `/todos` - Create a new task.
Request:
```js
{
todo: {
content: "this is the new content",
state: 1 // State can only possibly be: 1 - Todo, 2 - Doing, 3 - Done
}
}
```
Response:
```js
{
"id": 1,
"content": "this is the new content",
"state": 1,
"created_at": "2018-05-29T09:12:57.752Z",
"updated_at": "2018-05-29T09:12:57.752Z"
}
```
- PUT `/todos/{id}` - Update an existing task.
Request:
```js
{
todo: {
content: "this is the updated content",
state: 3 // State can only possibly be: 1 - Todo, 2 - Doing, 3 - Done
}
}
```
Response:
```js
{
"id": 1,
"content": "this is the new content",
"state": 1,
"created_at": "2018-05-29T09:12:57.752Z",
"updated_at": "2018-05-29T09:12:57.752Z"
}
```
- DELETE `/todos/{id}` - Delete existing task
Response: `Empty response`