TypeForm used for our app.
Filter use example I
Filter use example II
Architecture of our system
What it does
It's a web application that helps and guides you through the process of choosing and booking a trip. It lets you analize the destinations with filters like Price, Temperature or Air Pollution. Once you chose your perfect destination, the app plans the whole trip, including flights, hotels and rental cars.
You start by choosing your origin city, departure date and trip length. The app then shows you all possible flights that match and lets you use several filters to narrow down the destinations. Once you are happy with the filters you can navigate through each destination. Each of them prepares an itinerary that includes flights, hotels and car rental services provided by Sky-Scanner. Finally you can book the whole trip with one click.
Choosing and planing a trip has never been faster!
How I built it
For the front-end we used React + D3.js to deliver a clear UI with some powerful visualization of flights and cities. We filter in the client side using a crossfilter algorithm. We also used the icon set Sky-Scanner provides in their fron-end library. For the back-end we used and architecture of Nginx-Gunicorn-Django, the communication is based on the REST framework provided by Django, executing on an Ec2 Instance. The server process all the petition made by the Front-End calculating or consulting previous information stored on a Database, in tihs case a RDS instance on AWS, obtained from others APIs (WDC Climate for data about weather in different Countries/Cities, SkyScanner APIs for Flights an Destinations, Pixabay for images of the locations...).
Challenges I ran into
We had to learn to use the algorithms for data filtering and rendering in real time. Also learn to use the APIs and REST paradigm.
Accomplishments that I'm proud of
We managed to create a beautiful and easy interface paired with very powerful filter and visualization of the flight data.
What I learned
Some of use learned and used React for the first time. We were also new to D3.js and is has been a challenge. And, of course, Django REST Framework.
What's next for Fly-Filter
We plan to expand the functionality to let users add more cities and destinations to a single trip, and the dataset and API used to support that. Also the elaboration of Data Processing for improve the information collected.