Hello ๐ & welcome to the Josef coding challenge. We appreciate you taking the time to complete the assignment, and we're excited about the prospect of you joining the team!
The goal of this assignment is to get a sense of how you think and solve problems. If you're having build issues ๐ง with the project, please don't hesitate to contact us.
The challenge is to build upon a simple Vue.js application.
You may want to install Vue Dev Tools to enrich your Vue dev experience.
- Fork this repo into your account
- Make a new branch
- When you are finished, make a PR on your fork, and invite the person specified in the email to your fork
- We will take a look at your solution, and we might ask you several questions after
In src/views/Layout.vue
, you'll find a component loading data from an API.
-
Render the list of files from the API.
-
Create a reusable component to render the items, using a combination of props and slots.
-
The design / UI is open for you to decide ๐จ. Try to use some of the scss variables in
src/styles/resources/_variables.scss
to give it a Josef feel. -
Create a computed property that takes the file's data and filters it for tags that include
kitten
then sorts it by date.
In src/views/Rules.vue
you'll find a Vue.js view with detailed instructions about the problem.
-
Modify the
checkGroup
function in the file so it returnstrue
if all rules and groups apply, otherwisefalse
. -
Try your best to implement the task in an efficient and elegant way.
- The data is currently being managed locally in
src/views/Layout.vue
andsrc/views/Rules.vue
, migrate it to a vuex module insrc/store
. See example insrc/store/user
. - Write some unit tests for your challenge in
/tests/unit
.
In src/views/QA.vue
you'll find a Vue.js view that we want you to test ๐ง.
- API testing: Using Postman(or a tool of your preference), test functionality of the REST API for the
entity
object. Validate listing, creating, editing and deleting objects. Additionally, test a uniqueness requirement forentity.id
property. Objects can be accessed and modified using requests:
GET http://localhost:3000/entities
GET http://localhost:3000/entities/[id]
POST http://localhost:3000/entities
PUT http://localhost:3000/entities/[id]
DELETE http://localhost:3000/entities/[id]
- e2e frontend testing: Using Cypress(or a tool of your preference) test form submission on the QA page.
- Extra credit: Using Lighthouse run an audit of the QA page and document your performance and acesebility findings.
When done, save required files in the tests/
folder and add instructions to the README.md
๐.
- Be sure and include as much information as you can about how you are testing and what future tools improvements you might add going forward.
# Fork this project, then clone your fork
git clone https://github.com/...
cd dev-test.joseflegal.com
# Install dependencies
nvm install
npm install
# Start development server
npm run dev
# Visit http://localhost:9001
Script | Description |
---|---|
npm run dev |
Starts json server on 3000 and Compiles and hot-reloads for development on 9001 |
npm run test:unit |
Run your unit tests |
npm run test:e2e |
Run your end-to-end tests |
npm run lint |
Lints and fixes files |
npm run build |
Compiles and minifies for production |