Travelogue: A Travel Application using MERN and Augmented Reality

Abstract

Now a days web application plays a vital role from ordering food from a restaurant, ordering any electronic stuff or anything from web apps, watching movies, book a seat for a movie theatre, for study, download pictures from the internet, etc. and MERN stack is one of the most popular JavaScript stacks used for easier and faster deployment of full-stack web application comprising backend, frontend and database components. Travel enthusiasts have always desired for traveling fascinating places and archiving their memorable experiences. Currently, there are a wide range of travel based web applications. This paper aims at exploring features that could be integrated with travel applications for offering customizable user experience. Further, the paper discusses the prevailing drawbacks of the existing travel applications and looks forward for embracing modern features to make travel applications accessible. Currently there’s no simple standalone platform where people can share their travel experiences, receive suggestions for places to travel and recommend travel places to their dear ones. So we came up with an idea to build a full stack web application where folks can share their journey through images and location. That way it won’t be a tedious process anymore to surf the web and head on to travel.

Introduction

I. INTRODUCTION

Currently, there are a wide range of travel applications hosted on the web. The objective of these applications is primarily to help users search for places and plan itinerary. However, existing web applications lack customisable travel experience while offering services to their users. The proposed web application overcomes this drawback by delivering a user friendly travel experience. In order to engage users with our application, features like Augmented Reality Images, Chatbot and Google Translate contribute to the best user experience. AR images cater users to view a place in real time at their disposal from anywhere. Chatbot serves as a travel agent to guide users on their travel journey. Suggesting travel destinations based on user’s past history saves a lot of web surfing for users. Presenting content in native languages makes a travel application accessible to a broad range of users. Recent travel based applications are complex and can be intimidating for naive users. Indeed, they are deficient in connecting with users. When discussing accessibility of a web application it’s obligatory to consider users with disabilities. For instance, text to speech translation feature leverages the application’s scope thereby making it future proof.

MERN Stack application development comprises of three main parts:

In this work, we have added various features like Chatbot to give travel guidance to users, image upload to post travel places, to view some famous destinations in AR, Geocoding API to preview a location on a map in real time, Authentication and Authorization is implemented to give user privileges to create their travel profile and also view travel places posted by other users. This full stack web application has been deployed on a real web server.

II. LITERATURE REVIEW

To create a tourist portal that can satisfy the client, you must consider his wishes and interests. Most transactions are now happening online. Artem Vysotsky, Nataliya Antonyuk, Anatolii Vysotskyi [1] and others designed an app for travel, which helps you explore famous places, restaurants, religious sites and shopping malls. Also, the app has access to maps, with which the user will be able to reach the point you chose. To save and display data, the Google Cloud platform has been used to provide data integration and ease of use. Data is stored locally, and even offline real-time events continue to work, giving the end-user a sentimental experience. The drawback of this application is that it lacks new features. Augmented reality or features like geo-tagging, 3d images can be added to give a better user experience.

With the social development, tourism industry shows fast increasing tendency. Therefore, it has become a new growth point of the national economy. However, most tourism apps on the market are for profit, with monotonous content and low interaction. The system proposed by Yiting Ping, Lingjun Yang, Sanxing Cao [2] is a multimedia system in the field of cultural tourism which is based on this phenomenon and combined with multiple media technologies, relying on the WeChat miniprogram platform. The system includes five major function modules, which not only allows visitors to preview the scenic spots in advance, but also help them to learn about the history of the scenic spots. The proposed system uses MySQL as a database. But, MySQL does not support a very large database size as efficiently and the user data can be very large so it can cause problems. MongoDB or cloud databases can be used to avoid the problem.

Tourist reviews are information sources for travellers to know about tourist places. Unfortunately, some reviews are irrelevant and become noisy data. Muhammad Afzaal, Muhammad Usman, Alvis Fong[3] present a framework of aspect based sentiment classification that not only identifies the aspects very efficiently but can perform classification task with high accuracy. The framework has been implemented as a mobile app that helps tourists find the best restaurant or hotel in a city. The accuracy of this model is very high (85 percentage identification and 90 percentage classification). One thing that can be added with text classification is image classification. This will make the application easy to use with less vulnerabilities.

Delivering a piece of proper and interesting information to tourists is always a challenge to deal with. One of online tourist guides is a travel guide created in Peregrinus Silva Bohemica project [4]. The aim of the project was to make the historical cultural landscape more attractive for tourists through a multimedia digital travel guide. It uses a 3D map window which allows user to browse the selected locality and get information about the object of interest. A guide book is also provided to those who prefer to read it offline. Along with online application if they can add features of AR in the guide book it would be really an amazing experience for the users.

Qiaoyi Li [5] mainly focuses on the development status of Internet based tourism industry and problems of tourism industry integration management and suggests optimization solutions for Internet based tourism industry to facilitate rapid development of local tourism industry economy such as strengthening smart system development, improving online tourism management system, training compound tourism talents ,optimizing market investment mechanism system and broadening marketing and operation methods. However, these solutions require continuous improvement of industrial integration management. Also orderly progress of tourism industry integration management and complete expansion of local tourism economy and complete service content improvement is needed.

Hui Jie Lin, Ming Jian Mo, Yong Gang Tang [6] focus on Smart Tourism with the help of cloud technology. The 5G network plays an important role for the success of smart tourism. To bring smart tourism into reality user data is collected in the form of big data and this data is analysed and with the help of this decision making takes place. With the help of Artificial Intelligence and Machine Learning user experience is improvised and experience is made more personalized. To provide tourism project to user VR/AR/MR like technology is brought into picture. This technology implementation is only possible because of 5G network which has low latency. Its transmission rate is as high as 10 to 100 times faster as compared to LTE. Due to which information processing has become much more fast. This system can only be built on pillars of 5G network which still into research and actual deployment is yet to be done. Intelligent Equipment and AR/VR/MR still has many technical issues which are yet needed to be resolved. Robot technology is still under research and development.

Zhou Juelu, Wang Tingting [7] have brought cultural tourist attraction into virtual 3D model with the help of 3D virtual reality quantitative tracking fusion technology. Multigen creator software is used to create virtual simulation experiment system. The 3D scanning technology is used for recreation of virtual tourism system. Vega Prime is used create the 3D environment. This system proves to have faster iteration than the traditional system. 3D rendering and integration used in the system may require heavy hardware computation. System environment variable for attributes and structure needs to be accurately added.

Sulistyo Heripracoyo and Suroto Adi [8] aim to promote business in digital tourism with the help of web and data communication technologies using Apache MQ, web services and API. The tourism business is not a single business, such as tourist destination only, but also involves other service businesses such as travel, hotel, and culinary services. The integration of information and data of each of the four websites has been performed using web services, API and apache MQ tools that can exchange data automatically, which in turn can increase the efficiency and convenience for tourists only by accessing through one source of information from one of the collaboration websites. It is helping the office tourism, tour and travel agent, hotels, and tourism destination to deliver information easily and effectively to promote their information, the tourism visitor can get the information faster and easier. The given system integrates data from different available sources, and the sources may not be necessarily trustworthy. Data from different sources may be structured, semi-structured or unstructured so converting them into one form is difficult.

Charnsak Srisawatsakul and Waransanang Boontarig [9] focused on recommending user the tourist places with the help of content based filtering method. Users Instagram handle is used to feed the data. Instagram mining is done on user id to collect photo. Google’s machine learning API is used to extract terms from photos. Vector scaling method is used to find similarity. Similarity index between tourist places and user will be made. Based on Cosine Similarity index places are recommended in ascending order. The drawback of this system is that it uses Instagram of user to recommend places. Also the subject’s Instagram handle must be public. Instagram must have enough data for processing.

Ankit Verma, Chavi Kapoor, Abhishek Sharma, Biswajit Mishra [10] have created a web application that helps the college students, faculty, and alumni to interact on one platform. It is a university based website which uses machine learning NLP model for text analysis. The ML model analyses the emotions within a text and classifies them as positive, neutral and negative. It does not analyses images and hence if someone uploads an improper image it won’t classify as negative.

III. MERN STACK APPLICATION PARTS

A. Front-end

The front-end of the web application has been developed using ReactJS. A single page is rendered to the user on visiting the web application. The homepage shows a list of users registered on the application. The user interface is composed of various components like navigation bar to navigate through the application, sign-up, login, add place and edit place forms for the users to provide essential information, list of users and places, side drawer for the mobile view as well as model for viewing maps.

For building the UI ReactJS which is a JavaScript library has been used. ReactJS allows to craft apps with rich UI and enhanced user experience. To build modern web applications react assures better performance, scalability and better user experience. Using ReactJS improves page rendering and deliver mobile app like experience to the user.

In our work we used React router to make navigation swift and user friendly. The state management through Redux helped in making DOM updates faster and interactive. Designing UI through reusable, manageable components makes overall development a breeze. The fetch API baked into the browser alongside with React was used to communicate with the back-end via http requests.

B. Back-end

The back-end is built using NodeJS and ExpressJS. The routes for various API endpoints for the users and places have been configured using Express router. For sending quick responses to the frontend REST API has been used to communicate data associated with users and places in JSON format. Since our application is a SPA the backend is stateless and decoupled from the frontend, the user authentication is performed using JSON web token. The user profile images and places images are also stored on the backend to optimize overall application performance. Authorization ensures role based access implying that the users can manipulate their own travel places and simply view places posted by others. To ensure data integrity the transactional data is validated on the backend before finally storing it in the database.

NodeJS has helped in spinning up a fast, scalable and robust server. The versatile modules and packages helped in making development experience smoother. The development dependencies helped in the process of restarting a server automatically when changes were made. Since security is a great concern in modern web applications a package offered by NPM was used to hash passwords. On the terms of authentication a JWT token generator dependency has been implemented to encode user’s confidential data. Thus NodeJS in combination with its framework ExpressJS has ramped up application performance significantly due to its event driven architecture when compared to other server side technologies.

C. Database

In our web application, the database is developed using MongoDB. The Mongoose API is used to query the database from the NodeJS back-end. MongoDB ships with a tool called a MongoDB Atlas for monitoring and managing database activity during local development. The database comprises of two collections namely, Users and Places. A user document holds fields like id, name, email, password, and image. Similarly the place document consist of id, title, description, address, location and image. The benefit of using Mongoose API is that multiple database operations can be performed efficiently by batching them in a transaction.

MongoDB is used in MERN Stack because it is very well compatible with React, Express and Node. JSON document created in a React app can be sent to the Node Express server where they can be processed and validated thereby directly storing them in MongoDB for retrieval in the future. The pros of using MongoDB is that it is ideal for travel application which need real time scalabilities like Geocoding.

In our proposed work MongoDB happens to be dynamic, flexible and schema free. As our application grows in terms of number of users and subsequently humongous application data would be optimally handled by MongoDB. Further it was observed through MongoDB Atlas that read/write performance improves linearly as more nodes get added. When it comes to reliability of users data MongoDB offers the feature of replication which provides high availability by keeping multiple copies of documents across various machines. Due to dynamic schemas MongoDB makes it convenient to model real world and also flexibility when adding new fields without rewriting your entire application. Hence MongoDB happens to be a perfect choice in building modern web application.

D. Augmented Reality

In the image gallery page of our application, there are different images related to different monuments in India. By scanning those images, users get to see a 3D model of that image. These 3D models have been added with the help of Unity 3D engine. Vuforia SDK was also used. With the help of Vuforia SDK AR can be implemented across Android, IOS and UWP. Since 2017, Unity3D has built-in support of Vuforia allowing creating AR projects more easily. Image target can be set with help of vuforia.  It enhances the user experience and creates unique digital experiences that blend the best of digital and physical worlds.

Conclusion

Tourism is a great source of income for any nation. Governments around the world have ministry of tourism responsible for attracting tourist across the globe. Attracting tourist is the most important task and to give them insights of travel experience. Travel agent essays an important role for attracting tourists. Travel agents operate their business through online website where the user gets personalized recommendations and bookings are carried out. But as technology is evolving, our proposed web application meets modern user requirements. The web application comprises of React.js for frontend, Node.js and Express.js for backend and MongoDB database to store transactional data. To make the application accessible in native languages, Google Translate feature has been embodied for the best user experience. It uses Augmented reality to super impose objects into real world and also location based augmented reality have proven to be the most attractive features which in real time super impose hotel rating and restaurants into maps. Chatbot makes web application more engaging with the users and helps them to explore their travel destinations.

References

[1] Artem Vysotsky, Nataliya Antonyuk, Anatolii Vysotskyi, Vasyl Lytvyn, Victoria Vysotska, Dmytro Dosyn, Iryna Lyudkevych, Oleh Naum, Olha Slyusarchuk, Olha Slyusarchuk, “Online Tourism System for Proposals Formation to User Based on Data Integration from Various Sources”, IEEE 2019. [2] Yiting Ping, Lingjun Yang, Sanxing Cao, “Design and Implementation of Mobile Multimedia System in Cultural Tourism Field under the Condition of Media Convergence ”, IEEE 2021. [3] Muhammad Afzaal, Muhammad Usman, Alvis Fong, “Tourism Mobile App with Aspect-Based Sentiment Classification Framework for Tourist Reviews” IEEE 2019. [4] Martina Kepka Vichrova, Pavel H ´ ajek, Michal Kepka, Laura Fiegler, Mari- ´ann Juha, Wolfgang Dorner, Radek Fiala, “Current Digital Travel Guide of Peregrinus Silva Bohemica Project”, IEEE 2021. [5] Qiaoyi Li, “Research on Integrated Management Development of Tourism Industry under the Background of Internet+”, IEEE 2021. [6] Hui Jie Lin, Ming Jian Mo, Yong Gang Tang, “Pain Points in Tourism and its 5G-based Intelligent Solution”, IEEE 2020. [7] Zhou Juelu, Wang Tingting, “Design of Virtual Tourism System Based on Characteristics of Cultural Tourism Resource Development”, IEEE 2020. [8] Sulistyo Heripracoyo, Suroto Adi “Implementation of Tourism Business Web”, IEEE 2019. [9] Charnsak Srisawatsakul, Waransanang Boontarig, “Tourism Recommender System using Machine Learning Based on User’s Public Instagram Photos”, IEEE 2021 [10] Ankit Verma, Chavi Kapoor, Abhishek Sharma, Biswajit Mishra “Web Application Implementation with Machine Learning”, IEEE 2021

Copyright

Copyright © 2022 Sahil Shah, Maheshsing Rajput, Zaman Mumbrawala, Abhishek Ghodke, Prof. Sagar Shinde, Prof. Anand Dhawale. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.