Map with 3 nearby graffiti
hitting one of the paint cans to bring up the image
an example graffiti screen ready to be remixed
It all began with a small idea of how to reevaluate the importance on social media, how people will compete with each other for internet points with each social media app using a different but also useless currency. We expanded on our idea to attract this market by making an upvote/downvote system with remixing of individual creations creating competition for points. This led us to become interested in the idea of having an app the people could go around town and use in different locations much like pokemongo, however the difference being that there is no catching system but instead a tagging system where the user, using geotagging, can tag an area with his/her graffiti.
What it does
Each user of the progressive web app will have a login and an account, as soon as each user logs in they are given a screen of a map which is google maps. This will centre around the user using location services on the mobile and will display nearby graffiti spots and also allow them to check out other users creations. The user can then choose the area they are in to create a graffiti using their phone camera to take a picture of the nearby graffiti spot and then drawing in 3D onto the wall using augmented reality. This idea meant that a user could take a picture of a large wall then make the graffiti 3D to other users of the app. Once the user has completed the graffiti they will upload it to the leaderboard system, this will allow other users to view, upvote/downvote and using this system the playerbase would decide the order of the leaderboards of each area. Once the upload happens other users can take this graffiti and remix it into their own creation, they can alter it however they see fit and then post their own version however it will still be linked to the original. The idea that this will create inspiration due to wanting to make other creations better but then also having these new remixes posted into the leaderboard for judging by the rest of the community. The community aspect of this app is the greatest feature as everyone will want the number 1 spot of their area and the competition and remixing will allow users to express themselves fully and create their best work to prove to the community theirs is the best. This being a global map app means that users from any country can view any area of graffiti which is displayed on the map by a spray can, then the users worldwide can vote. This means worldwide fame for anyone who can attract a large audience with their creation. To create the graffiti means to go out and visit the location but for it to then be viewed worldwide means you also are representing your country with each spray.
How we built it
The app started with leaflet map but was switch to Google Map API, the pwa was to work in react and node with the database work being done in mongoDB. Each of the four members of the group was split into different sections and we used a gitlab repo as version control. The four sections were then split further into the backend database, the frontend pwa and the Google Map API. The frontend being majority of the work had two members dedicated however they would work on seperate sections, one on the camera functionality and one on the user interface/login system. Once the app all comes together the Map is the first to show on the map after logging in, the user then has very clear buttons they can press on screen to view leaderboards, other graffitis and see their own account information.
Challenges we ran into
Leaflet as a map didnt work as intended and brought a lot of problems. Our main issue was scope as over the two days it became apparent the app would take a lot longer to make fully functional but our main intention was to make a proof of concept.
Accomplishments that we're proud of
The idea itself we are proud of and have spoke about taking this idea past the hackathon and continuing to build on it as a side project, We believe this could take off if released in todays market and that gives us the drive to make the app working successfully. We are proud of the effort we put into the weekend as we have sacrificed a lot of sleep out of the desire to get this app running. Finally we are proud in general of our work on the app, we know it could be better and do all the functions we set out to do but given the time we had we think we got a lot done.
What we learned
The technologies used that were brand new were the map APIs both Google and Leaflet, coding a map from google into react is its own thing which was difficult to do. We learned to further our knowledge of react, node and mongoDB with some members using them for the first time. We learned to communicate better around what each person was doing and having many stand ups helps the team focus and cooperate. Taking breaks was an important step for us here, being burned out leads to getting no work done so having walks and talks meant we had time off the computer to just think rather than try to think and code at the same time.
What's next for ARstigram
We believe there is a high potential for this app to become a reality, current features we had to miss out on such as the 3D AR would take more time to implement. We will come back to this idea a few days after the hackathon to see if there is potential for us to continue working as a team on this project. Currently we have a very large dataset of locations to pull from so merging that in with the locations on the app and allowing our users to upload on any of the locations will be the start of the ball rolling on our app. Our domain would be the main download for the game but since this is a pwa it will install onto phones if allowed therefore making camera use easier.