Inspired by the prompts for the social good track, we wanted to create a website to allow UNC students to find study spots on campus that meet their specific needs. We wanted to collect UNC students’ input on the most popular study spots’ accessibility (for students with physical disabilities), atmosphere (for students with unique learning styles that prefer a quieter spot), staff support (for students who need assistance finding resources), and COVID-19 precautions (for COVID-conscious or immunocompromised students). We also intended to collect data on whether or not a study spot offers certain amenities (such as gender neutral bathrooms and standing desks) that could make a student’s study experience more worthwhile. Finally, we also prioritized convenience by creating one easily accessible website with all the information students need, including a description, photo, and hours. Being able to access all of this information in one place will make students’ lives easier as well as allow those with accommodations to feel at home on campus!

What it does

Our website allows students to view and add ratings of the main three study spots on UNC’s campus: Davis Library, the Union, and the UL. Our website displays an image of the study spot, its hours, and a description of it, and it also allows students to rate the study spot based on certain categories: accessibility, atmosphere, staff support, COVID-19 precautions, and features (such as gender neutral restrooms and standing desks). Our website then displays the average of all these ratings so that students can find a study spot in the future that meets their needs.

How we built it

We primarily used the common web development languages, CSS, HTML, and Javascript. The webpage layouts were created with CSS and HTML and the rating and reviewing functionality were created with Javascript. We used JavaScript’s localStorage functionality to store all the ratings that had been submitted on the site (even after the browser was closed), which was a brand new tool for us! After updating the average rating values on our “rate this study spot” page, we used a querystring to pass the ratings back to the “study spot description” page and display the updated ratings. We combined our individual code and linked the pages together with github merging.

Challenges we ran into

Not everyone on the team was experienced with web development, so there was a bit of a learning curve at first, but eventually everyone understood the basics of web development, which is normally not possible overnight. We also weren’t sure how to store the data for the ratings in the long term, even after the browser was closed, so we had to research a solution to that issue, and once we decided to use localstorage, we had to learn how to use it and implement it in our project. It was initially hard to figure out how to modify values stored in localstorage, and after we figured that out, we ran into the challenge of passing data from one page to another. We eventually resolved this issue using a querystring, which also required time to learn! We had a hard time integrating the javascript data collection part of our project (done by one team member) with the design part of the project (done by another team member), but we were eventually able to resolve that by working together.

Accomplishments that we're proud of

We are proud of working together to complete a project. Usually in our computer science classes, we do not work in a group on coding assignments. So we were looking forward to working together in a hackathon and making the most out of it. All of us individually learned more about web development. Every member of our team was experienced in different areas, so we had a lot of fun learning from each other. Even though most of our beginners, we were proud of overcoming many of our challenges and delivering a project at the end. We are also proud of finding a method to utilize local storage to store previous survey results that can then automatically update on the main page. This was definitely a challenge but we are proud of our results. We also worked hard on making the website visually appealing and even UNC themed!

What we learned

Since this was the first hackathon most members of our team had participated in, we learned a lot about basic webdev, including HTML, CSS, and JavaScript. We learned about using localstorage to store values even after the webpage was closed, and how to set and get those values in localstorage when needed. We also learned about query strings, which we used to pass data from one page of our application to another, and how to create and parse them. We also learned a lot about working together on a group hackathon project, especially how to use GitHub to synchronize our work, divide up tasks appropriately, continuously update each other with our progress, and ask questions of each other when we needed help.

What's next for Find My Study Spot

We are excited to take “Find My Study Spot” to the next level. To provide more security, we were thinking of implementing a feature so only authorized users such as UNC students add feedback on the study spots. We could redirect to a page that lets students log on via UNC onyen single sign on. In addition, like google maps, it will show you directions for how to get from your current location to the study spot. Another feature could be adding a filter to suggest only study spots that satisfy the user’s preferences. Ideally, users would be able to drop pins on the map to suggest new study spots. In terms of back end, we would need to find a way to store large amounts of data (ratings) for long-term usage. Last but not the least, once we abstract it enough, this can be implemented across universities nationwide.

Built With

Share this project: