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
   • @RobertParkin
   • @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

Expectations

You can find the stack we use for our application in the next section, however, we are currently undergoing some changes/upgrades to it. You are free to use tools and libraries that are not part of it, but there are some guidelines we require you to follow:

• Use VueJS (version 2 or 3 is fine)
• As we do not, and have no current plans to use Typescript, we ask that you do not use it to make our review process easier
• Solve this problem using some kind of state management, either Vuex or Pinia
• Cover your app's core functionalities with Jest-based unit tests
• Show us at least some of your custom styling so we can assess your CSS 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 (currently working to update to Vue 3)
• Vuetify 2
• Vuex (with plans to start migrating to pinia soon)
• Sass (dart-sass)
• Jest + testing library for unit tests

The API:

The API is using the ESM module loader so please make sure that you have at least [email protected] 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 |