24/Consulting front-end interview

Simple project for evaluate frontend skills. Complete all tasks and submit a pull-request to proceed.

Getting started

Clone this repo and install project dependencies.

pnpm i
# npm install

Start web and mock API server running concurrently start and dev scripts.

pnpm dev
# npm run dev

And in a new terminal window:

pnpm start
# npm run start

Or simply:

pnpm start-dev
# npm run start-dev

Now your dev sever respond to http://localhost:3000/ and your mock API server to http://localhost:3001/todo

# list
GET http://localhost:3001/todo
# pagination
GET http://localhost:3001/todo?_limit=10&_page=1
# filter
GET http://localhost:3001/todo?state=done
# fulltext
GET http://localhost:3001/todo?_q=test
# detail
GET http://localhost:3001/todo/1 
# create a new todo
POST http://localhost:3001/todo 
# update a todo
PUT http://localhost:3001/todo/1 
# delete a todo
DELETE http://localhost:3001/todo/1
# auth
GET|POST|PUT|DELETE http://localhost:3001/660/todo
# login
POST http://localhost:3001/login
{
  "email": "johndoe@24consulting.it",
  "password": "24consulting"
}
# register
POST http://localhost:3001/register
{
  "email": "everyman@24consulting.it",
  "password": "e5BWqM"
}

Legenda

must: Must be done to pass the test.
should: Could be skipped but is reccomended.
may: Not necessary but adds points.
no: Should not be done.

Skills

• SCSS (must);
• ES6 (must);
• Test (should);
• Auth with access token (should);
• Typescript (may);
• Boilerplate with Vite, Prettier, Stylelint and ESLint (may);
• JS Framework (may);
• State management (may);
• Routing (may);
• Framework CSS / Component library (no).

Tasks

1. Show the Todo list

• must: Create the Todo list fetching data from API;
• should: Paginate the Todo list with _page and _limit query parameters.

2. Filter Todo

• must: Filter Todo by state;
• should: Filter the Todo list by a fulltext search with query parameter _q.

3. Auth

• should: Call the API with an access token auth;
• may: User register interface;
• may: Login interface;
• may: Token persistence on page refresh.

4. Add a Todo

• must: Add a Todo with POST;
• should: Do the POST request with an access token.

5. Edit a Todo

• must: Edit a Todo with PUT;
• should: Do the PUT request with an access token.

6. Delete a Todo

• must: Delete a Todo with DELETE;
• should: Do the DELETE request with an access token.

7. Add a Google Font

• should: Use a Google Font inside the project.

8. Test

• may: Add an e2e test.