wongwf82/dev-test.joseflegal.com

A full stack application for coding take home challenge.

Josef coding challenge

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.

How it works

• 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

Coding task

Frontend

In src/views/Layout.vue, you'll find a component loading data from an API.

1. Render the list of files from the API.

2. Create a reusable component to render the items, using a combination of props and slots.

3. 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.

4. Create a computed property that takes the file's data and filters it for tags that include kitten then sorts it by date.

Backend

In src/views/Rules.vue you'll find a Vue.js view with detailed instructions about the problem.

1. Modify the checkGroup function in the file so it returns true if all rules and groups apply, otherwise false.

2. Try your best to implement the task in an efficient and elegant way.

Extra credit

1. The data is currently being managed locally in src/views/Layout.vue and src/views/Rules.vue, migrate it to a vuex module in src/store. See example in src/store/user.
2. Write some unit tests for your challenge in /tests/unit.

QA

In src/views/QA.vue you'll find a Vue.js view that we want you to test 🧐.

1. 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 for entity.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] 

2. e2e frontend testing: Using Cypress(or a tool of your preference) test form submission on the QA page.
3. 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.

Getting the project running

# 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

Scripts

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

Customize configuration

See Configuration Reference.