Awesome Mappy

Algolia - Mapbox
Algolia
Algolia - Mapbox

Inspiration

This project hack idea comes into my mind by looking into Snapchat's map feature in which all the users are shown on a particular map that's how I was inspired by this to build it.

What it does

I have used Algolia to fetch members' details, and as of now, I have used dummy data to present the people on the map. The project name Awesome Mappy signifies here an awesome map with a bunch of people on a globe. In Snapchat, if we click on a particular user's profile it shows various details about the latest snaps, and live location, and based on the location it locates the user's profile on the map and many more. By keeping this feature in mind, I built the same but used dummy data on Algolia.

How we built it

The project hack is built using Nuxtjs, Vuejs, Algolia, MapboxGLjs, TailwindCSS, TypeScript, Vercel, Vue-Instant-Search, PostCSS

Challenges we ran into

Project Description: I have created two versions of the task, that's not my intention to do, but the issues caused me to build the same task using Nuxt.js and a simple Vue.js app.

Built the very challenge on Nuxt.js, while deploying the project I ran into failed deployment errors. So I moved to use a simple Vuejs framework.

Why? Firstly, I built the task using Nuxt.js only, but later on, when I deployed the Nuxt app on Vercel, it got failed due to environment variables which I hardcoded in the Nuxt app to ensure the key not pushed on GitHub and be on the safer side. Repository: https://github.com/ayushsoni1010/awesome-mappy Deployment: https://awesome-mappy.vercel.app/

After that, I read and ran around StackOverflow and preferred blogs. I thought there might be some issues, so I initialized a new repository to build the same app with a different UI using a simple Vue framework. Finally, I built it and deployed it and the previous Nuxt app version also get deployed successfully🛠️ Repository: https://github.com/ayushsoni1010/map-algolia-vue Deployment: https://map-algolia-vue.vercel.app/

In the middle of this, I was working on Algolia Search, how it works, and all that so I have created a separate repository for algolia-search Repository: https://github.com/ayushsoni1010/algolia-vue-instant-search Deployment: https://algolia-intsantsearch.vercel.app/

Accomplishments that we're proud of

Learned something new about Algolia, Nuxt, and Mapbox.

What we learned

I have not worked on algolia and mapboxgl.js before, but through this repository, I got how it works. Well, every engineer do it, that's how we engineered problems :)