API: https://mapic-backend-epnze.ondigitalocean.app/mapic-backend/ API Github Repository: https://github.com/PersoSirEduard/Mapic-no-credentials
The search in a hackathon project yielded the idea of creating an app that would allow photographers, filmmakers, and enthusiastic explorers to find their perfect location for photoshoots, films, and adventure based on some simple keyword.
What it does
MaPic is a mobile-first designed web app that makes it easier than ever to find photoshoot locations. Photographers all around the world can use the app to enter a keyword and get a list of all the known spots near them. The users can also help grow the MaPic database by creating an account and submitting their favourite spots. Using AI, the app will automatically recognize and categorize the uploaded image content by revealing discovered keywords.
How we built it
We built the frontend using Vuejs. Particularly, we used vue-bootstrap to create a friendly modern-looking ui. We also used leaflet to display a map of the locations on the map with markers. The backend was built with an express server using nodejs. The back end also runs with the help of Google Cloud Storage for uploaded files and Google Vloud Vision AI for image analysis.
Challenges we ran into
-> We had difficulty choosing the idea of the project that we wanted to make. -> We also had difficulty making the frontend and the backend communicate. -> The first major challenge in the back-end development was with the use of Google Image Recognition API, and because it was the first time anyone from our team used it, the back-end team spend quite a while trying to make it work as best as possible. Especially the intended automatic anonymity feature that would blur people's faces was ultimately scrapped because of our data transfer model causing issues and due to the time constraint. The next hurdle for back-end was the async functions and Promises. With our app being easily scalable, async functions did take a while to work out all bugs to deliver a fast and stable experience. Front-end development didn't have as many challenges but we did have slight issues with the back-end connection, which were easy to fix and didn't take up too much time.
Accomplishments that we're proud of
-> Simple UI design/theme: We're proud of the modern dark theme UI we came up with. -> Use of image recognition AI: We're proud of our use of AI to automate the images' keywords generation. -> Integration of Google Cloud services: We're proud in managing to integrate image storage on Google Cloud Storage. -> Search: We're proud of our structures searching/browsing API function that enables us to create searches based on keywords and proximity.
What we learned
We learned how to use async functions, work with data models (treat them), integrate Google Cloud services, and take some rest when we were too overwhelmed.
What's next for MaPic
-> Profanity filter for pics to ensure safety and PG use -> Review system for each location as an added layer of information -> Integrating to optional anonymity feature for uploads -> Advanced user profile