My very first travel app

The nine weeks of the web development training at Ironhack Berlin are gone! I had a great time and I will miss my teachers and colleagues, as well as enjoying life at the German capital.

Web development teachers and students

To finish my training I had to present a final project and decided to develop a travel app. I have been working many years in the Tourism / Travel industry and wanted to develop a website using well-know API (Application Programming Interface).

So I developed a website called “myTravelApp” in 2 iterations. The website is a full-stack responsive application developed using JavaScript. You can access the code in my GitHub repository: https://github.com/amerzbach/myTravelAppReact

You can test the app accessing to: https://mytravelapp-react.herokuapp.com/

User story

myTravelApp” allows you to search for flights, hotels and activities in any destination worldwide in a simple way.

Also from the homepage you can search in a combined way for all 3 products.

Based on a tabbed interface you can access to:

  • Flights information including total duration, number of stops, airline and flight number, arrival and departure times
  • Hotel description, photos and location
  • Activities description
Flights search implemented using Lufthansa Open API
Hotel Information provided by Hotelbeds APItude
Combined search of Flights + Hotels + Activities

Front-End

In the first iteration was developed using Handlebarsjs while for the second version presented I re-designed it using the popular React library. In both cases, I used also Bootstrap and CSS. In the beginning, React was a bit hard to understand, but after the learning process, I started to love it.

Back-End

For the back-end part, I used NodeJS, Express and a MongoDB database. To access the APIs I used Axios library.

One of my main objectives was learning to use well-known APIs, the ones I use are:

The most interesting part here was to setup a multi-layer API calls from the front-end to the back-end and from there to the API Provider. I had to do it this way because the APIs required authentication and this is only to be set up securely from the back-end.
Moreover, for the combined search of Flights + Hotels + Activities, I learned how to parallelize 4 API calls at the same time to improve performance.

Tools

During the Ironhack training and the project I learned also to use:

  • Microsoft Visual Studio Code
  • GitHub as the code repository
  • MongoDB Compass
  • Postman to simulate API calls
  • Heroku as the hosting platform
Using Microsoft Visual Studio Code to code

Lessons learned

  1. React is much better for front-end development compared to other alternatives​
  2. Is important to read the API documentation​, however, could not be easy to understand for beginners like me.
  3. API authentication is the first step to use the API​
  4. API Authentication – requires API Calls from the back to store authentication keys​
  5. Each API use its authentication method, for example: Lufthansa Open API uses Token-based auth​entication and Hotelbeds APITUDE: SHA-256 Encryption​
  6. As I used non-productive test API – not always stable – Plan alternatives for your app demo in case your API does not work or perform well.

Un comentario sobre “My very first travel app

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.