fruit-api

Intro

You've been given the task of creating a simple application with create/read/delete API requests for some fruit. Unfortunately, it looks like the backend developer who was in charge of creating the API was under an influence of psychedelic substances. Or just not very good at his job. The request to get a list of fruit doesn't make sense at all! We've reached out to the dev and asked him to fix the issue. His response was that it's not a bug but a feature. Ugh. Looks like you'll need to find a workaround and parse the request on your own.

Task

1. Create a private repository on Github.
2. Create a new Vue project using Vue-CLI within the new repository: you may use any preprocessors, testing frameworks, linting etc that you like
3. Create a branch off of master, commit all your work to this new branch
4. When you are finished, open a PR to master (but do not merge it). In the PR description, copy, paste and answer the following:

   ### Your name
   
   ### What was challenging?
   
   ### What did you enjoy doing?
   
   ### If you had more time, what would you improve/do differently?
   
   ### How much time (more or less) it took you to complete the task?
   
   ### What do you think about the task itself? (Was it a good experience? If not why?)
   
   ### Summary as a gif
   <!-- Show us a gif that represents how you feel about this test, as a whole. -->
   <!-- We don't need you to create a gif showing the project you made. -->
   

5. Invite us to your repository
   • @EmilyRosina
   • @dangzo
   • @RobertParkin
   • @omnichronous
   • @SiaGiann
   • @jtarulla

The specification

We would like you to create a simple Vue web app.

• You will need a view/page displaying a list of fruits. It needs to be fetched using the fruit-api (see the installation/usage instruction below)
• Each item will allow the user to navigate to the fruit detail view
• The user should be allowed to add/remove fruits

Must haves

• Show us how you would solve this using vuex
• Supply unit tests covering (at least 1) component’s logic
• Supply unit tests for (at least 1) vuex action + mutation

Expectations

You can find the stack we use for our application in the next section, you don't necessarily need to use all of the same tools, but in order to remain in line with what is expected of the position, as well as making the review process easier, we request that you use Vue 2, as well as vanilla JavaScript (as opposed to using TypeScript).

That being said, whether or not you use a framework/library for your CSS, we would also like you to include at least some of your own custom styles, so we can get an idea of your styling proficiency

Also, keep in mind:

• We don't expect perfection.
• We want to have an idea of how you confront a problem, plus what drives and motivates you.
• Feel free to surprise us!

Our stack

• Vanilla javascript (no typescript)
• Vue 2
• Vuetify 2
• Sass (dart-sass)
• Jest for unit tests
• Cypress for e2e tests

The API:

The API is using the ESM module loader so please make sure that you have at least node@13.12.0 installed before running it.

To use the API:

• npm i fruit-api
• add "api": "fruit-api" to the scripts section of your package.json file
• run npm run api to serve the fruit-api
• you can view the API documentation at https://localhost:3000 (or another port number, if 3000 is already in use)

Recommended documentation

Scaffolding	State Management	Routing
Vue-CLI	Vuex	Vue-router