← Back to Portfolio

Sunanth's Blog

My first full-stack project

by Sunanth on Jun 9th

Overall the final project for CS565 went very smoothly and was a very good experience to apply a lot of the technologies used in class (especially those used in the homework assignments). The stack used in this project involved using jquery, moment and bootstrap libraries for the front end. The backend involved express, path, body-parse, socket.io, https, and @google/maps. The backend essentially was responsible for making the api calls that are requested by the clients; api calls used included: google maps, places, and openweathermap. Requests were made and satisfied using socket emits between the front end and back end (server/client relationship). It was fortunate that most of the core features we planned to implement for the final project ended up working out successfully. The API’s that we used were very straightforward and not a hassle to use, and the homework exercises really helped in the process of adapting and learning how to use new technologies on the fly.

The features that we ended up implementing successfully for this project includes: searching for hikes (using geolocation to determine current location or searching specific hikes using general phrases); searching for hikes in default locations such as Portland and Seattle; Display all the results within a certain distance radius; Dynamic change of google maps based on the selection of the hike made by the user; displaying the specific weather and conditions found in selected hiking destination; and a search criteria that persist when the user returns to the search page.

While working on this project there were a few issues that we ran into which included the following: Sending information from the home page to the results page was very frustrating. We were having trouble with dealing with the asynchronous nature of the weather results page requesting information from the backend server before the server was able to perform the api calls to supply this information. At first we were attempting to send information from the home page to the result page which would then request services from the server--the problem was we needed an effective way for emits to block until desired requests were made. After experimenting with callbacks with no avail, we decided to simply use local storage variables that could be used across .js files. Another issue we were having at the start of the project was determining how our backend would relay results. At first we used the POST method to send data from the html file to the server however had trouble when trying to send back data to the html file in the form that we wanted. Before we got too deep into it, we decided to switch up our design to use socket.io which turned out to be much better. Using socket we were able to emit json data back and forth between the server and client in the exact data format we wanted.

If more time was given I am hoping to implement the following: an option to select multiple hikes and comparing their weather to provide the most optimal hiking choice; A history of selected hikes for users that would help with future searches; an autocomplete and guess feature for searches using ajax; lastly adding some sort of database to store hikes from authenticated users would make the experience with the website much more personal.