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:
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
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 theuid(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:
Managed Database using MySQL v8 for storing user data, trips, places, and more:
Object Storage used for storing user flight and hotel booking files:
Link to Source Code
The entire app is open sourced - try it out and also feel free to contribute to this project 😉 :
WanderXP
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.
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:
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.04shared 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 systemObject storage: For storing the trip documents like flight bookings and hotel reservation files.
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:
Top comments (1)
Thanks for a great article, as always mate :)
Yeah, it would be much easier to edit via a viewer like on Supabase :)