Inspiration

When coming up with an idea, we brainstormed what we liked and disliked the most about vacation. We really enjoy travelling but we all agreed that traveling would be much better if it weren't for one thing: jet lag. Jet lag is an absolute vacation ruiner and leaves you feeling miserable for days. That is why we set out to help travel junkies like ourselves Beat the Lag.

What it does

The website takes in user input, interprets it and generates schedules and scores based off of how well the schedules do at reducing the effects of jet lag. First, you have to fill out your vacation information on our home page. This includes travel destination, when you want to start adjusting to your new schedule, and customization options such as if you are a coffee drinking and if you plan on sleeping during your commute. All of these fields play apart in the calculation of the Jet Lag Score and in the generation of optimized schedules. Once all of the travel information is filled out, the data is manipulated in script.js, which then allows of the creation of Jet Lag Scores and schedules. On the schedules page, the first one corresponds to a routine that strictly obeys the preferences of the user. However, this schedule tends to have a bag Jet Lag Score. By clicking the see more schedules button, the user can see alternate schedules in which preferences are modified to ultimately reduce the feelings of Jet Lag.

How we built it

After brainstorming and deciding on features, we started off with a rough plan of the main logic of the jet lag scoring and schedule making as a group. We decided for the front-end to collect the inputs to be transferred to the back-end, with the back-end having the formula to generate schedules for the front-end. After that, the front-end and back-end teams started working on their parts while collaborating to ensure that everyone was on the right page. On the back-end side, we started off by programming the data manipulation and schedule generating in Python. Using the Flask interface, we took the data from the HTML forms and then used in it the program for the calculation. Since some of the data used for the calculation included the use of coordinates and time zones, we implemented Google Cloud APIs, such as Maps and Geocoding APIs, to convert a given location into a designated time zone. On the front-end side, the home page was built first so that testing of the back-end could happen as quickly as possible. Then, the rest of the web page design was done while we linked the HTML form to our Python code. However, we encountered challenges when trying to output the schedule made in Python back into the HTML of the website. While trying to find solutions, since the front-end was nearly complete, our team started converting the Python code into JavaScript code to be used should the first plan not work out. In the end, the conversion happened quicker than the finding of the solution, so we switched over to JavaScript for the back-end portion. Thus, all of the calculations and displays were made with JavaScript instead of Python.

Challenges we ran into

Originally, we planned on using HTML for the front-end to display the website with Python as the back-end support that would generate the jet lag schedules. Our first challenge that we ran into was figuring out how to transfer from front-end HTML inputs to the back-end, given that Python and HTML were not as easily integrated compared to JavaScript and PHP. Eventually, we incorporated Flask, a Web Server Gateway Interface, as a way to convert HTML inputs to strings readable by Python. By hosting a native Python server, Flask allowed us to extract the search bar and checkbox data into the back-end to be manipulated further. Unfortunately, trying to convert from the back-end to the front-end took a significant amount of time to figure out, since there was no seemingly easy way to rerun the HTML files since the website depended on running HTML on a Python interface, and not vice versa. We experimented with inputting Python data into HTML5 LocalStorage, but in the end it was determined that directly using JavaScript to manipulate the back-end would be more efficient. In that regard, we determined that having Javascript be embedded within HTML was more practical than having the HTML being embedded within the back-end Python.

Accomplishments that we're proud of

We're extremely proud of our finished product. We all learnt a lot and challenged ourselves by using things like the Google APIs, which we have never learnt about. We're proud of ourselves and our teammates since this was a very fun and educational experience for all of us.

What we learned

Upon embarking on this hackathon, we were also made aware with how much APIs were available to be used for building websites. We used some Google Cloud APIs, most notably the JavaScript Google Maps and Geocoding APIs, to locate the coordinates and time zones of cities, to calculate the time zone differences, and to even incorporate a functional map to locate cities as well. With this discovery, it opened up so many more possibilities for future experiences since we would have access to a myriad of APIs for whatever task we wanted to pursue. The most important getaway during the hackcation experience was the use of Flask to incorporate HTML within Python and ultimately creating websites with Python code. Although the final product had this idea scrapped, we thoroughly were intrigued with the idea of having Python being able to integrate with HTML to create a front-end and back-end interface. Not only does Flask allow local web hosting with a Python server to act as a website, with other modules it could even use more advanced notions such as HTML5’s LocalStorage by including JavaScript. While it might have been excluded from the final product, the notion of Flask was definitely an indispensable learning experience for all of us. Additionally, we also learned the importance of starting anew compared to keeping old developments. Especially in coding, when stuck, it can be beneficial to develop another approach towards the project instead of sticking with the previous work, even though significant work might be lost. In this case, transferring from Python to JavaScript for the back-end allowed simpler transitioning between the front-end and back-end. It is not as if the previous work was for nothing either, since it provided us with a learning experience.

What's next for Beat the Lag

While this project was very fun to work on, we will certainly be taking our newfound knowledge, especially of APIs, and using them in our future, more complex, projects.

Share this project:

Updates