fruit-project

A test project for Cycloid.io

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

Create a private repository on Github.
Create a new Vue project using Vue-CLI within the new repository: you may use any preprocessors, testing frameworks, linting etc that you like.
Create a branch off of master, commit all your work to this new branch.
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
    
      Noé Viricel

    ### What was challenging?

      Cypress.io

    ### What did you enjoy doing?



    ### If you had more time, what would you improve/do differently?

      - Use AntD (or any CSS Framework)
      - CSS Module
      - Form Validations
      - Page Transitions
      - Loading State
      - Setup environment variables
      - Setup API proxy with Axios
      - More Accessibility
      - Component Lazy Loading
      - Image Caching & Lazy Loading
      - Inject axios globally as $http
      - More test

    ### 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 in a gif

Invite us to your repository: @chayaline, @emilyrosina, @adamwardecki, @dangzo, @thomas-lhuillier, @SavanovicN & @Sergeon

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 tests covering (at least 1) component’s logic
Supply tests for (at least 1) vuex action + mutation

Expectations

We would love to see some of your styling skills, so please do add some custom styles.
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 !

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

3.4 KiB Raw Blame History Unescape Escape