WanderXP — Organize your travel with ease
Tags: linodehackathon, flutter, flask
Published: 2023-02-20 16:09:40


## Overview

It's always a hassle to manage all the necessities while deciding a travel plan. What if you could keep everything organized inside a single app?

{% youtube N0MrxzBc7tk %}

**WanderXP** helps you to keep your travel requirements organized including flight and hotel details, and the notable places that you don't want to miss visiting.

### Category Submission:

Integration Innovators

### App Link

The app is designed for mobile platforms (_small form factor_), but as Flutter is used for building so it's a cross-platform app capable of running on Android, iOS, Windows, Linux, and Web.

Web app link: https://wanderxp.flutterflow.app
> Please scale the window to mobile form factor while running on web.


Mobile app link (Android): https://appdistribution.firebase.dev/i/a0b42613bd16e37e
> Please try this for better experience, as it's optimized for mobile platforms.

> You can also follow the steps on the GitHub project page if you want to try out the app on other platforms.

## Project Description

The primary features of the app are as follows:

* Store multiple trip information (travel start & end dates, flight info, hotel info, places to visit during the trip).
* Upload documents in a organized manner (like flight and hotel booking documents).
* Secure user management with a robust authentication system.
* Discover new suggestions for popular places to travel.

### Architecture

Here's an overview of the entire architecture of the cross-platform application along with the backend infrastructure built with Flask and managed on Linode:

![WanderXP Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnd1u4szw3w6r197weha.png)

The tech stack used for building this project:

* [**FlutterFlow**](https://flutterflow.io): It's a no-code platform that I have used for designing the app from scratch, connecting with the REST API, and then generating the source code in Flutter.

* [**Flask**](https://flask.palletsprojects.com/en/2.2.x): Used for building the REST API to manage user authentication, database CRUD operations, and storing files.

* [**Linode**](https://www.linode.com): For getting access to the cloud computing infrastructure along with their managed database (SQL) and object storage.

### Frontend app

The Flutter application consists of the following screens/pages:

* SplashScreen
* HomePage
* LoginPage
* SignUpPage
* DiscoverPage
* TripViewPage
* CreateTripPage
* FlightInfoPage
* HotelReservationPage
* PlacesToVisitPage
* TripPage
* EditProfile

![HomePage, LoginPage, SignUpPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/466lw1hlyyy0htg5usig.png)

![DiscoverPage, TripViewPage, EditProfile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzgidzkdq1o5g8uambt2.png)

![CreateTripPage, FlightInfoPage, HotelReservationPage, PlacesToVisitPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ye3orqt3grsptvclahwv.png)


### Backend REST API

The REST API built with Flask mainly consists of the following endpoints:

* **`/register`**: To create account for a new user.
* **`/login`**: To log in an already registered user.
* **`/places`**: Fetching all the top places to discover.
* **`/place`**: To retrieve a single place with the ID.
* **`/places_to_visit/<trip_id>`**: Retrieve all the places to visit by the provided trip ID.
* **`/trips/<trip_id>`**: Retrieve a single trip by its ID.
* **`/trips/<trip_id>/update`**: Update the details of a trip.
* **`/trips`**: Retrieve and store trip based on the `uid` (Unique user identifier) provided.
* **`/store_file`**: For storing a file to the Object Storage.
* **`/get_file`**: For retrieving a file from the storage.

### Linode

Overview of the Linode Cloud Console:

![Linode Cloud Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrp1lq44pqb5teeyulfw.png)

Managed Database using MySQL v8 for storing user data, trips, places, and more:

![Managed Database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9jedd5zu233ynxf8swj.png)

Object Storage used for storing user flight and hotel booking  files:

![Object Storage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fx941o6yrg8xbs10a13.png)

### Link to Source Code

The entire app is open sourced - try it out and also feel free to contribute to this project 😉 :

{% github sbis04/wander_xp %}

### Permissive License

The project is licensed under the [MIT License](https://github.com/sbis04/wander_xp/blob/main/LICENSE).

## Background

To most people the problem with travel management might not seem that hard to solve. But upon searching we found that there's very limited applications available on the market that provides a minimalist UI and also gets the job done.

The second reason behind building a travel management app was that I wanted to learn how to use Linode, and this seemed to me a very good usecase of Managed Database and Object Storage services provided by Linode.


### How I built it

I have mainly used three services provided by Linode:

* [Shared CPU](https://www.linode.com/products/shared): I used a `Ubuntu 22.04` shared compute instance.

* [Managed Database](https://www.linode.com/products/databases) (with `MySQL v8.0.26`): For storing user data, location information and the trips planned by each user. I have also designed a robust email-password authentication system 

* [Object storage](https://www.linode.com/products/object-storage): For storing the trip documents like flight bookings and hotel reservation files.

![Managed Database and Object Storage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o6rwj10s3rk6blq898u.png)

This was my first time using Linode for managing the backend of a mobile application. And, the entire integration process was pretty smooth for me (some of the documentation pages helped a lot).

This hackathon helped me to learn how to build a end-to-end product (consisting of a frontend, backend, and cloud server). Thanks to Linode & DEV team for organzing this hackathon! 🙂

> One suggestion of improvement: "_It would have been a lot faster while working with the Managed Database if there was a SQL viewer/editor inside the Linode Cloud Console (I spent a lot of time authenticating into the database locally and then running the SQL command to view the table data every time while testing the queries from the mobile app)_"

### Additional Resources/Info

Some resources that helped while working on this project are as follows:

* https://www.linode.com/docs/guides/flask-and-gunicorn-on-ubuntu
* https://www.linode.com/docs/products/storage/object-storage/guides/aws-sdk-for-python