CineMap

Entry Screen
Search by Movie
View Filming Locations
Add a new post
Add a new movie

Check out our CineMap presentation!

Inspiration

CineMap was born from our team's shared passion for cinema and filmmaking. Visiting a filming location offers a unique way to relive the magic of a movie. With Vancouver’s thriving film industry and countless blockbusters shot right in our backyard, CineMap lets travelers and film enthusiasts explore iconic sets in person, creating unforgettable experiences.

What it does

CineMap offers several key features:

1. Search by Film
Explore our film catalog and load your chosen movie’s filming locations onto the map.
2. Save to Collection
Love a particular film? Save it to your personal collection for quick access!
3. Add New Film
Contribute to our open-source film repository by adding new movies.
4. Add New Post
Had an unforgettable experience? Share your review and memories with the community!

How we built it

CineMap is built using React for the front end, with interactive maps powered by Leaflet. On the back end, we use Flask to ensure smooth data management and seamless user experiences.

Challenges we ran into

Even though we had a first-time hacker, we were able to collaberate effectively as a team! One of the challenges we encountered was learning how to drill props and lift state to effectively share data across multiple levels of component hierarchy.

Accomplishments that we're proud of

We’re proud of our ability to learn and collaborate as a team. Regular check-ins and efficient branching practices helped us avoid major merge conflicts and ensured a smooth development process.

What's next for CineMap

Our next step is to implement a more robust backend, such as a database system like PostgreSQL or MongoDB, to efficiently handle large volumes of user data. We also aim to take CineMap into full production, bringing it to a wider audience.

Built With

Submitted to

StormHacks 2024: Surge x Enactus x MSESS

Created by

I worked on the front end with react, leaflet, and typescript. I have used HTML/CSS and Javascript before, but learning typescript was definitely one of the highlights of this hackathon!

Leo Zhi
This was my first hackathon. I worked on the back-end using flask. I also worked on the front-end for the map interactions, using React and Leaflet for the first time.

kevingky01
I contributed to the full-stack of the application. In terms of front-end, I mainly contributed to application logic, making API calls to the backend, and ensuring the data transformations performed "mapped" to the base-map correctly. In terms of the back-end, I implemented a handful of the GET and POST methods responsible for sending and receiving the data to and from the backend.

Vincent Liu
GIS @ SFU | Full-Stack