abdelrahman-essawy / nuxt-st01

JavaScript Code Test (Nuxt.js/Next.js)

This is a simple test to evaluate your skills in JavaScript and Nuxt.js/Next.js.

Instructions

1. Fork this repository
2. Create a new branch with your name
3. Complete the test
4. Push your changes to your forked repository
5. Send us the link to your forked repository

P.S. dot not forget to commit your changes.

Test Duration

• 2 hours and 30 minutes

Prerequisites

• Node.js (v14 LTS or higher)

Run the backend server

cd server
npm install
npm run start

Output:

Server listening on port http://localhost:4000

API documentation

Postman Collection (⬇️Download)

Method	Auth	Endpoint	Body	Description
GET	No	/users		Get all users
GET	Yes	/todos		Get user todos
POST	Yes	/todos	task string	Create a new todo
PUT	Yes	/todos/:id		Toggle todo completion
DELETE	Yes	/todos/:id		Delete a todo

Body type: application/json

Example body:

{
  "task": "Buy milk"
}

Authentication

The API sometimes requires authentication. the authentication type is Basic Auth

You can find the credentials in the server/data/users.json file.

Example curl:

curl --location --request GET 'http://localhost:4000/todos' \
--header 'Authorization: Basic enVja2VyOjEyMzQ1Ng=='

Example axios:

await axios.post(endpoint, {}, {
  auth: {
    username: 'zucker',
    password: '123456'
  }
});

Available users

Avatar	Username	Password
	zucker	123456
	felon	123123
	robon	secret

Requirements

User login page

• User should be able to select a user from the list of users.
• User should be able to see user details (name, avatar).
• User required to enter only password to login after selecting his account from the list.

User dashboard page

• User should be able to see the list of todos for the selected user.
• User should be able to create a new todo.
• User should be able to toggle todo completion.
• User should be able to delete a todo.

User Account

• User should be able to view his name and avatar in the app header.
• User should be able to logout.

---

Good luck!👍