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:

Feedbacks

Your name

Noé Viricel

What was challenging?

Cypress.io, as I never used it before, I started to learn the basis from their documentation. It looks very interesting in a product quality point of view, I never had the occasion to go that far in a product development process.
A bit tricky at first to choose which API data to keep.

What did you enjoy doing?

I appreciated the opportunity to imagine an app from a raw array of data. With no graphical support of any kind. It gave me the opportunity to truly showcase my creativity and skills on different subject. I have taken the time to confirm knowledge and go further into testing data store (Vuex).

Spoiler: I admit that I tried to stick to your graphic environement

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

Improve "Component's dynamic imports" browser support by using Async components, it would offer more control over Component's loading / error states.
Use CSS Framework (I'm fond of AntDesign and Tailwind CSS)
CSS Module as the app will grow, offering styles more modularity.
Vue.js Composition API on a larger app.
Form and Props validation.
Page Transitions
Better loading state management
Setup .env file for environnement isolation (dev / test / prod).
Work on CSS Accessibility
Caching & Lazy Loading
Inject axios globally (as $http)
Notification System (Errors, Infos, Warning, Success)
More unit test
Definitely more End-to-End test :)
and probably more ...

How much time (more or less) it took you to complete the task?

I've made this app in 5 days of code, more or less 25 hours ... (I did count commits timestamps 😩)

What do you think about the task itself? (Was it a good experience? If not why?

I believe it's a good exercise with enough constraints to let you express yourself (in a coder's mind I mean). I think that this task allows to approach each stage of a Frontent project conception.

I rather be tested like that than with a bulk of logic tests (that I find arbitrary) as I am more in a situation to think and develop ideas.

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

5.0 KiB Raw Permalink Blame History Unescape Escape