DEV Community

Cover image for WanderXP — Organize your travel with ease
Souvik Biswas
Souvik Biswas

Posted on

WanderXP — Organize your travel with ease

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?

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

The tech stack used for building this project:

  • FlutterFlow: 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: Used for building the REST API to manage user authentication, database CRUD operations, and storing files.

  • Linode: 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

DiscoverPage, TripViewPage, EditProfile

CreateTripPage, FlightInfoPage, HotelReservationPage, PlacesToVisitPage

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

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

Managed Database

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

Object Storage

Link to Source Code

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

GitHub logo sbis04 / wander_xp

Organise your travel with ease

WanderXP

WanderXP Cover

Blog post about this project: https://dev.to/sbis04/wanderxp-organize-your-travel-with-ease-205d

Try out the app (Android): https://appdistribution.firebase.dev/i/a0b42613bd16e37e

Try out the app (Web): https://wanderxp.flutterflow.app

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.

WanderXP Demo

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

The tech stack used for building this project:

  • FlutterFlow: 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: Used for building the REST API to manage user authentication, database CRUD operations, and storing files.

  • Linode: For getting access to the cloud computing infrastructure along with their managed database (SQL) and object storage.

Screenshots

License

Copyright (c) 2023 Souvik Biswas

Permission…

Permissive License

The project is licensed under the MIT 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: I used a Ubuntu 22.04 shared compute instance.

  • Managed Database (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: For storing the trip documents like flight bookings and hotel reservation files.

Managed Database and Object Storage

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:

Latest comments (1)

Collapse
 
organicnz profile image
Tarlan Isaev 🍓

Thanks for a great article, as always mate :)
Yeah, it would be much easier to edit via a viewer like on Supabase :)