Shopify - Mapify

Landing Page
Side Navigation
Filter
Legend
Example

Inspiration

We were inspired by the opportunity to help shop owners get better results with their sales on the future.

What it does

The app shows the orders location on the map, according to the filters chose by the user. The idea is to help Shop owners to get a better understanding of how their products are spreading through the world. It is clear that the owner can reach a large number of clients when considering the large reputation of Shopify and the nature of the online commerce. In the map, it is shown also the location of the physical stores. So it is an excellent tool to monitor and examine the distribution of the products across the physical stores and points of distribution. All of that information can be refined using the filters that we provided.

How we built it

We used the Shopify API to get the information about the shops and Google Maps API for the map. We thought that it had to be simple and clean. With that in mind we the user can get the information that he needs faster and can use it to improve their commerce.

Challenges we ran into

Some difficulties using the Shopify API with the authentication process and with the Google Maps API markers. In the case of the authentication we found that the packages that were ready to use in the NPM system wasn't quite enough fitting our needs. So we recreated the flow to make our app works. Our second biggest problem, was the integration with the Google Maps. We decided to use a lib to create clusters with the markers. That was a real challenge, since none of us didn't have used it before. We didn't give up and we managed to make it work.

Accomplishments that we're proud of

We improved our architectural vision of a small AngularJS application as well as our ability to orchestrate a quick project remotely as our team worked from different regions of Brazil.

What we learned

We learned to use the Shopify API and that we can build really useful apps with that in the future.

What's next for Shopify - Mapify

We have plans to develop more functionalities and put the app on the store in the future. We are also planning to provide more detailed reports and integration with social medias.

Built With

Submitted to

VanHackathon

Created by

I contributed to the project helping my teammates designing the app using AngularJS for the front-end and NodeJS and ExpressJS for the back-end. It was my first time using Shopify and Google Maps API's. We had some problems but we worked together and got everything working.

deleted deleted
I worked creating the auth backend in node and express to make the authentication with the Shopify api work. It was my first time using its api. I found it really clear to read and understand. We had a bad experience when using the npm packages to authenticate the user, such as passportjs. So we recreated the flow from scratch to fit our needs. I also contributed with the core code of the frontend (client), including the management of the map and the markers. We built it using angular. We created a solid structure with the right packages that provided us a very fast development cycle. This is not my first hackathon, but the feeling to finish the challenge was the same as in my first one therefore I can affirm that I learned a lot.

Gustavo Sampaio
I worked on the front-end using HTML, CSS, AngularJS, Angular Material, Sass, Gulp, Shopify API, NPM, Bower. I also worked on the design using Material Design and Google Maps. We found some trouble dealing with Google Maps API but we overcome through live conferences in which we discussed deeply about the project to find the best solutions to our issues. It was an incredible experience that showed us the importance of keeping a good channel of communication along the development cycle.

Vandré Leal Cândido