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?

Components Lazy-Loading

(Prefetching auto-handled since Vue CLI 3+)

Dynamic imports (works for most browsers).
Improve browser support by using Async components, it would offer more control over Component's loading / error states.
[] Use AntD (or any CSS Framework)
[] CSS Module
[] Form Validations
[] Page Transitions
[] Loading State
[] Setup environment variables
[] Setup API proxy with Axios
[] More Accessibility
[] 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.6 KiB Raw Blame History Unescape Escape