This assessment is designed to test an examinee’s knowledge of Front-end Development and its implementations on VueJs framework. It is divided into 3 levels, with each feature having to be accomplished consecutively.
Assessment Point System: The assessment total is 60 points with additional 30 bonus points. See breakdown below for more detail.
| Levels | Points | Bonus | Total |
|---|---|---|---|
| Level 1 | 10 | 5 | 15 |
| Level 2 | 20 | 10 | 30 |
| Level 3 | 30 | 15 | 45 |
| TOTAL | 60 | 30 | 90 |
Asessment Duration: Examinee is given 3 days to complete the assessment. On a separate spreadsheet, please log the time spent per functionality (start time and end time). For any questions regarding the exam please send inquiry to jonathan@ssagroup.com or HR.
Output: Examinee is expected to send an email with attachment to their output files (preferably a zip file). Alternatively, examinee can attach a link to their GitHub Repository, Google Drive, Dropbox, or any other storage service to download the output if the file is too large to be attached on email, or for other reason.
- Clone this repository.
git clone https://github.com/ssa-academy/senior-frontend-developer-assessment.git - Install package dependencies
npm install - Run the development server
npm run serve
- Develop User Management pages
-
Create pages for:
- Displaying all users
- Creating new user
- Updating user
- Displaying single user details
-
On create and edit pages, create a form with the following fields:
First Name- This is a required text field.Last Name- This is a required text fieldUsername- This is a required text field.Email- This is a required email field. This should only contain a valid email value.Password- This is a required password field.
-
Add a label text for each field.
-
Add a placeholder text on each field.
-
Add a validation for the fields.
-
Add a submit button. Clicking this button will display an alert/notification that the user has been added.
- Add page to view deactivated users.
- Make use of reusable components
- Develop emptystate component to tables
- Develop button components
-
Do all the steps in Level 1 but make use and re-use of Vue components as much as possible.
-
Implement a delete functionality that will soft-delete existing users.
-
Add emptystate component to the table if empty.
-
Implement an edit button that will redirect to the edit page (no update function yet).
- Add permanent delete button to the soft-delete table.
- Add restore button to the soft-delete table.
- Integrate REST API to the app
- Do all steps in Level 1 and Level 2
- Implement an API client with the following details:
- Base URL is
http://oreo.rippl3s.com/api/v1 - Use the following credentials to retrieve a fresh token to be used in the app:
-
POSThttps://oreo.rippl3s.com/api/v1/loginUse the following credentials:
+------------+-----------+----------------------+-----------+-----------+------------+ | First Name | Last Name | Email | Username | Password | Role | +------------+-----------+----------------------+-----------+-----------+------------+ | Jane | Smith | jane@ssagroup.com | janesmith | Jane@8799 | Examinee | +------------+-----------+----------------------+-----------+-----------+------------+Request:
{ "username": "janesmith", "password": "Jane@8799" }Response:
{ "user": { "id": 1, "prefixname": "Dr.", "firstname": "Jane", "middlename": "Stark", "lastname": "Smith", "suffixname": null, "username": "janesmith", "email": "jane@ssagroup.com", "photo": "data:image/png;base64,<hash>", "type": "superadmin", "email_verified_at": null, "created_at": "2020-10-08 09:36:29", "updated_at": "2020-10-08 10:15:21", "deleted_at": null, "avatar": "data:image/png;base64,<hash>", "birthday": null, "created": "45 minutes ago", "deleted": "", "details": { ... }, "details:common": [ ... ], "details:others": [ ... ], "displayname": "Jane S. Smith", "is:superadmin": true, "modified": "6 minutes ago", "permissions": [ ... ], "role": "Examinee", "roles": [ 5 ] }, "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjhkYzc4MmQ3NzU5YWI4MjM2ZTFkOGU4MGIxZTM4ZWJmODk0YmUzYmZhZjU3NWMxMWZiYTc0M2I2ZWY4ZmE2YmJjZjliNmQ3Mjg0ZjVhYTc4In0.eyJhdWQiOiIxIiwianRpIjoiOGRjNzgyZDc3NTlhYjgyMzZlMWQ4ZTgwYjFlMzhlYmY4OTRiZTNiZmFmNTc1YzExZmJhNzQzYjZlZjhmYTZiYmNmOWI2ZDcyODRmNWFhNzgiLCJpYXQiOjE2MDIxNTI1MDQsIm5iZiI6MTYwMjE1MjUwNCwiZXhwIjoxNjMzNjg4NTA0LCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.TktHs1otSWTmEClasZCTML8DrFqX3NKk63rwz3AKjN92nbsyKoWlq_RJmQBGkdy-RAsMQ7lkKdMo-2Fr60WJ9ILTDja5-4p3lMcgTHVImmiI1Azm4XKea7tL56o9FYITXY7pmOZSaeWoT_mtxhZOgnC9V0lNyHWCoZJnP5mpQVhyMrsDxadKw-PUIuQ6lTZip5UIX_DgPpOPwWcLOvbY-LQ7hK3DG9cTgYPb9WgRwKXc59Lv-K_XOcLwY73eeMrutBfbbv9tcdw6zrYvEMChCM_QDnLSNf-ccySUZyQwFEmC8WuksIepN-tJPOQXFlX41ON_Y4qrUpalPWpgQwGGOGyCH0Tz1GaeIYhTeoVlyhy9OUvqdtcwFpjeZvb_9oL5vn9Ua7mNTa2kaeWEJgQ4p8TbWNNgoH24SNCGj_TCPyNvQspoUGOrhvJ5686mw_8vEyT3ETDqgFVKVl53JOzJO5v654aRQh9iYToQvzBnjswySuJ_xbiLk4GM4jLuA1lc9SYoqwwhFYC6aSsgedMInmTQM8_-k-veDajI-13y-TSZHjdtubertoy4rwXgAFgvpCMv9lW17SrER_vfUXDv07hIxumodw0HlUGfqT-b7sxhV-CUb8MqfhIx26fqyLALluks_HRYGSZd5rlw6ayJVkMqJp6fP5BFVYR6rNW3R0I" }
-
- Base URL is
- Implement the following API:
- Create new users:
POSThttps://oreo.rippl3s.com/api/v1/user/tests- Request:
{ "firstname": "Angelina", "lastname": "Jolie", "username": "angel", "email": "angelina@demo.io", "password": "Angel@1000", "photo": <UploadedFile> or NULL } - Response:
{ "data": { "prefixname": null, "firstname": "Angelina", "middlename": null, "lastname": "Jolie", "suffixname": null, "username": "angel", "email": "angel@demo.io", "photo": null, "type": "test", "updated_at": "2020-10-08 10:58:00", "created_at": "2020-10-08 10:58:00", "id": 4, "avatar": "data:image/png;base64,<hash>", "birthday": null, "created": "1 second ago", "deleted": "", "displayname": "Angelina Jolie", "modified": "1 second ago", "role": "" } }
- Update existing users:
PUThttps://oreo.rippl3s.com/api/v1/user/tests/${id}- Request:
{ "firstname": "Angelina", "lastname": "Jolie", "username": "angelina", "email": "angelina@demo.io", "password": "Angelina@1000", "photo": null } - Response:
true
- Delete existing user:
DELETEhttps://oreo.rippl3s.com/api/v1/user/tests/${id}- Response:
- Retrieve all existing users:
GEThttps://oreo.rippl3s.com/api/v1/user/tests- Response:
{ "data": [ ... ], "links": { ... }, "meta": { ... } }
- Retrieve a single user:
GEThttps://oreo.rippl3s.com/api/v1/user/tests/${id}- Response:
{ "data": { "id": 1, "prefixname": "Dr.", "firstname": "Jane", "middlename": "Stark", "lastname": "Smith", "suffixname": null, "username": "janesmith", "email": "jane@ssagroup.com", "photo": "data:image/png;base64,<hash>", "email_verified_at": null, "created_at": "2020-10-08 09:36:29", "updated_at": "2020-10-08 10:15:21", "deleted_at": null, "avatar": "data:image/png;base64,<hash>", "birthday": null, "created": "1 hour ago", "deleted": "", "displayname": "Jane S. Smith", "modified": "53 minutes ago", "role": "Examinee" } }
- Create new users:
- Implement pagination.
🍀 Good luck!
Prepared for SSA Academy Software and Web Developer Applicants only.
Do not reproduce document elsewhere.