-
-
Interface when user first boots it up, filters on the left side with an interactable map on the right.
-
Radius of possible events on Livingston campus since user chose "Livingston" as their campus.
-
Data taken from getINVOLVED showcasing the event's titles, day, start time, and location.
-
One of the errors we ran into attempting to connect backend (data scraped from getINVOLVED to something useable by JavaScript) to frontend.
Inspiration
Often, we find ourselves overhearing an event happening nearby and trying to search for what it is. Or, we’ll look for an event to unwind after a busy week. getINVOLVED is a great website, but often requires you to sift through the upcoming events to see what is nearby and when it happens. We wanted to make a program that makes it visually “easy on the eyes” to see and sort through possible events depending on where you are on campus.
What it does
whereINVOLVED allows you to see, on a map interface, what Rutgers events are happening around you. The program has filter options, allowing users to choose between a different campus, whether it’s in person or online, and if they want to look at past or present events.
How we built it
We utilized the Google Maps API in combination with data from the getINVOLVED web page to accomplish our task. Back end, converting the data from the web page into iterable data that could be read by the front end, utilized Java, JavaScript, and Node.JS. Front end was focused on utilizing HTML, CSS, and JavaScript to access the Google Maps API and create a simple user interface.
Challenges we ran into
All of us have primary experience coding in Java and other back end-focused coding languages. So, suddenly needing to switch to front end languages like JavaScript and HTML required us to attempt to translate Java specific libraries and code into something that could be accessed by JavaScript. Those working on the backend portion needed to harvest the data, transform it into a csv file, then make it accessible to JavaScript (which they eventually needed to utilize Node.js for), which took over 7 hours to complete.
Accomplishments that we're proud of
Two members of the team participated in the Rutgers’ HackHers Hackathon last year and were not able to successfully utilize the API they wanted to work with. This time around, Java…
What we learned
All of us had minimal experience with JavaScript and HTML, so this project specifically pushed our limits with how to translate a familiar language–Java–into functions that could be displayed using HTML and JavaScript.
What's next for whereINVOLVED
We would like to successfully connect the front end to the back end, as our main issue was running out of time to read in the data from the backend to then display things in the front end. Converting the data to something readable by JavaScript in a separate file was a difficult task as all of us were unfamiliar with JavaScript, but needed to utilize it to create our project to work with Google Maps API. Furthermore, we would like to have all of the filters working that would modify what events are shown to the user. In the future, we would like to also incorporate different Rutgers campuses like Newark and Camden so that it becomes an all-inclusive Rutgers University getINVOLVED website! Lastly, the Google Maps API had an ability to customize the look of the markers above each location, and we wanted to eventually color code each marker based on either the different organizations hosting those events, or color code by when the events would be happening (past events/today/future events).
Log in or sign up for Devpost to join the conversation.