Seekers-CSSHacks1.0

Project Name- Travelog:Travelling Reimagined

To use it on your local machine, please follow these instructions

Aim:

---

The aim of our project is to make travelling an engagimg and interactive experience while helping local buisnesses
expand their reach.

 

Description:

---

Our website is in the form of a game where users can use an interactive map to dicover locations, scenaries, services and food stalls
that the user can check out so that they can get the best experience that a certain location has to offer.
  

As it is a game, so it comes with a leveling system and XP points are included. Users can gain XP points for uncoveing or visiting new locations,
sending feedbacks by trying out services around an area, etc and this enables levels and ranks in leaderboard.

The points won by a user in his profile can be redeemed for real-world coupons and discounts that would aid them in their quests to travel
around the globe and dicover and experince new places and cultures.

Installation :

---

1. Get the code:

git clone https://github.com/resyfer/seekers-csshacks1.0.git

2. Use Visual Studio Code (download from here if not installed)

3. Install the extension Live Server Extension in Visual Studio Code.

4. Open the folder in Visual Studio Code

5. Using Live Server Extension open the the port using port 5500

6. The URL of the landing page should be of the form

  http://localhost:5500/

and NOT

  http://127.0.0.1:5500/

Segmentation:

---

 

1.Profile:

The profile page consists of various sections that shows where the user visited and some more sub sections such as statistics and medals won by the user for his previous excursions. 

2.Interactive Map:

 

An interactive map that displays the current location of a user,along with the various places of interests (Bassed on community feedback) that surround them in 1km radius.
This locations of interests include historical monuments and locations,scenic hotspots,local food joints,etc.

Based on community feedback,each location has a specific rating assigned to them for the users to see.
This map also shows the a density map indicating the places where an average person would take the most pictures , thus indicating the best spots to vist.

3.Community Feed/Home Tab:

The community feed is updated woth posts and photos taken by users. The users can also like and comment on the posts taken by other users. Posts of popular locations will be preferred over the less popular ones. The gradation of posts will be done on the basis of the number of likes and traffic received by that post within 24 hours of its initial posting time. 

 

In the mobile application,there is an added feature that allows gthe user to change the background image of the commuinity feed to a picture taken by the user at any location.
The community feed also consists of a stories section where the user can see the recent updates posted by a user's friends.The stories are available only for 24 hours. 

4.Plans:

The plans tab helps the user bookmark certain locations for visits , this allows them to make a personal timetable and check tasks off once a task is completed.

It also has a recommendation tab that allows them to see how most people who has already travelled to a specific location had planned their journey.

5.Leaderboard:

XP points give rise to a Leveling system, which in turn leads to ranking.
Leaderboard shows the user's ranking in the global scenario,While also allowing thems to compare themselves to those at the very top of the leaderboard.

   

6.Sign-In:

The Sign-In button allows the user to sign in directly through their Google account allowing the user to keep their account safe and secure,over the added advantage of storing their progress.  

Technical Stack

In it's current prototype stage of development, our website uses the following stack:

1. Hyper Text Markup Language(HTML).
2. Cascading Style Sheets (CSS).
3. Vanilla Javascript (JS)
4. JQuery

  and aspires to incorporate the MERN stack in the near future as a strp forth in its development to enhance the user experience,which includes: 

1. MongoDB
2. Express
3. ReactJS
4. NodeJS  

The mobile application uses: 

1. Java
2. Extensible Markup Language (XML)
3. JavaScript Object Notation (JSON)   and aspires to incorporate the following in it, as a step forth in its development to enhance the user experience, in the near future: 
4. Flutter
5. Firebase  

Our project also plans to convert this website service into a full fledged Progressive Web Application(PWA) so that it can be installed locally and used as an when required with inegration with local files.   

---

Additional Features:

Our project helps users to explore new places and encourages them to travel more and make great memories.   

The in-game currency sysytem enables players to earn coins-in-game. These coins can then be exchanged for coupons,vouchers and discounts for upcoming trips.  

More the user explores hidden places, more they will earn coins and be rewarded with medals accordingly as well as change their psoition in the global rankings.  

Users can connect with their friends and share each other's posts among themselves. They can also track their friend's trip, but only if their friend wants to share it with them. As an added feature, users can ping other nearby players for help,or, in a vice-versa manner, help a fellow stuck player out, which may grant them a reward in the form of in-game currency.  

Providing accurate feedback on their recent or old visits will enable the users for rewards.  

Dependencies:

The project needs database integration to function properly. 

---

We developed the frontend of the website and further work to integrate date of locations, services, etc. is undergoing development. 

Thank you, 
Regards.