pinUSC

Landing Page with checkboxes to choose map layers of user's choice.
Project Purpose
Project Description
Data retrieval with checkboxes
Database Query

Inspiration

Every semester, there are many new incoming students not familiar with the USC environment when they just enter into USC. We were one of them! We spent multiple days to explore the campus, finding classroom building, and get to know where is available to dine in, and where is a suitable place with outlet for studying, and so on.

Therefore, we come up an idea to create “pinUSC” web app. It’s an interactive web app where users can find locations based on their preference. Our ultimate goal is to design a powerful platform for students or visitors to find places, and get to involved in the campus life more easily.

What it does

Users can use this web app to find multiple functions which are not yet available on Google map. Firstly, users can utilize the filter functions to find their preferred food, study, or relax places with additional constraint. These pinned locations are probably not notable enough to be showed on Google Map, but it might be a cozy and amazing corner for students to take a rest, and have meals. Secondly, there are panoramic or 360° photos on each locations for users to easy find their destination. Also, users can get interactive virtual experiences before their visit. Lastly, users can easily add other landmark or location to the map, and provide their review on their visited locations for future visitor’s reference.

How we built it

We used an open-source JavaScript library, Leaflet for implemented interactive maps, and customized it with the markers information from Azure databases. Also, we used Python Flask for the framework of web application. We also utilized HTML, CSS, and JavaScript for our front-end design, and functions.

Tools used

HTML, CSS, Azure, Python Flask, leaflet.js, javascript

Challenges we ran into

This is our first hackathon activity, and it’s our first time learn to integrate front-end, database, and back-end tools into an interactive web app. We spent much time on brainstorming a project topic, constructing our ideas and selecting tools.

Accomplishments that we're proud of

What we learned

Through our first hackathon experience, we learned how to integrate different tools into a full-stack project. We deepen our practical skills on using API, JavaScript, UI/UX design and CSS skills. We also learned how to use Python Flask as framework for building web applications.

What's next for pinUSC

Add a chatbot which can collect the request information from users, and provide a suggestion based on users’ requests. Integrate an optimized recommendation system based on distance, review and open hour to recommend locations to users. Add a function for users to choose if they’d like to find study partners, or friends to enjoy food or exercise together when they arr