Application to be used to test some skills. It is not required to know most of the toolset below before making this test -- you need to know basically JS, ReactJS and Redux (flux) and you are good to go.
- ReactJS
- Redux
- react-router (v3) (learn more)
- redux-saga (learn more)
- Tachyons (learn more)
- Feature-centric folder structure (learn more)
- StandardJS (JavaScript Style Guide) (learn more)
- Webpack
- NodeJS
- Yarn (better alternative to npm) (learn more)
- Server-side rendering with Client and Server hot reloading
- Make sure you have Node.js installed (v6.0+ required)
- Install Yarn
- Run
yarn install npm run dev- Check out
http://localhost:3000 - Have fun!
Everything is saved automatically via redux-storage on browser localStorage. There is a fake API on src/config/api, where you will find the following endpoints with the responses:
GET /todos
200 OK
{
ok: true,
problem: "NONE",
data: {
todos: [
{
id: "41701948-7d3c-457d-8b06-7293b24309b3",
createdAt: "2016-12-06T06:08:40.447Z",
completed: true,
listID: "def456",
text: "A great todo ",
...and any other list attributes you want
},
{
id: "60d0ec43-f9a1-44ce-b20b-ae8578737045",
createdAt: "2016-12-06T06:08:27.939Z",
completed: false,
listID: "abc123",
text: "Another great todo ",
...and any other list attributes you want
}
]
}
}
GET /todos/:id
200 OK
{
ok: true,
problem: "NONE",
data: {
todo: [
{
id: "41701948-7d3c-457d-8b06-7293b24309b3",
createdAt: "2016-12-06T06:08:40.447Z",
completed: true,
listID: "def456",
text: "A great todo ",
...and any other list attributes you want
}
]
}
}
GET /lists/:id
200 OK
{
ok: true,
problem: "NONE",
data: {
list: [
{
id: "abc123",
createdAt: "2016-12-06T06:08:40.447Z",
...and any other list attributes you want,
todos: [
{
id: "41701948-7d3c-457d-8b06-7293b24309b3",
createdAt: "2016-12-06T06:08:40.447Z",
completed: true,
listID: "abc123 ",
text: "A great todo ",
...and any other list attributes you want
}
]
}
]
}
}
GET /lists
200 OK
{
ok: true,
problem: "NONE",
data: {
lists: [
{
id: "abc123",
createdAt: "2016-12-06T06:08:40.447Z",
name: "A Productive List",
...and any other list attributes you want
},
{
id: "def456",
createdAt: "2016-12-06T06:08:50.447Z",
name: "Another Productive List",
...and any other list attributes you want
}
]
}
}
GET /:any
404 Not Found
{
ok: false,
problem: "CLIENT_ERROR",
data: {
error: 'Item not found'
}
}
POST /lists
Accepted attributes:
| Attr | Description | Required |
|---|---|---|
| name | the name of the list | true |
| any | any other attribute you want | false |
200 OK
{
ok: true,
problem: "NONE",
data: {
list: {
id: "abc123",
createdAt: "2016-12-06T06:08:40.447Z",
name: "A Productive List",
...and any other list attributes you want
}
}
}
POST /todos
Accepted attributes:
| Attr | Description | Required |
|---|---|---|
| text | the body of the item | true |
| listID | the parent list of the item | true |
| any | any other attribute you want | false |
200 OK
{
ok: true,
problem: "NONE",
data: {
todo: {
id: "abc123",
createdAt: "2016-12-06T06:08:40.447Z",
completed: false,
listID: "def456",
...and any other todo attributes you want
}
}
}
PUT /todos/:id
Accepted attributes:
| Attr | Description | Required |
|---|---|---|
| text | the body of the it | true |
| completed | if this todo was completed | true |
| any | any other attribute you wan | false |
200 OK
{
ok: true,
problem: "NONE",
data: {
todo: {
id: "abc123",
createdAt: "2016-12-06T06:08:40.447Z",
completed: false,
listID: "def456",
...and any other todo attributes you want
}
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent