Assignment of Algolia-Alexandre Viretti

Project

Stack

I've chosen Vue JS because I'm more efficient with this framework. I use SCSS that I find more practical than CSS. And of course HTML.

Duration

To be honest, I began this assignment at 9 this morning , and I finished this afternoon around 5 PM. So it took me more than 3/4 hours recommended.

Steps

First step

I followed the different points on the mail, I didn't really encounter issues on setup Algolia, I choose the dataset of the Airports, because I love to travel and I had lots idea to implement on this app. But if we had to redo it I would choose a different data.

First step

I've setup my Vue project, I downloaded dependencies that I needed.

Third step

Read the doc of Algolia, and tried to grab most of it.

Fourth step

Developpement.

Design

I coded flat design with some grid and flex box. I tried to stay sober, to get a better interaction with users. Easy to understand, easy to interact.

Testimony

Problems encountered: There is not enough data on airport to implement it as I wanted, that's why if I had to do it again, I would choose an others set of datas. I wanted to make an API call because I wanted to add pictures from Pixabay, so I installed Axios library, I called my api Pixabay with city in params but it never worked and I lost a lot of time. I asked on stackOverFlow but no answer. My problem is with Axios I can't return a jpg link to bind on the src of img tag. So I decided to create a new component Card to store each link in data but I did not know how to do it because ais-hits is not an array or something else I could iterate over. Other, i found really interesting to interract with Algolia. I hope this will meet your expectations.