Ecosnap

Integration with snap token in future
Dashboard
Adding entry

Inspiration

"We don't inherit the earth from our ancestors; we borrow it from our children" The way we treat our environment has huge consequences for the future of our planet. We can all do our part in protecting the Earth we live on. If we all make an effort to become more environmentally conscious, we can make the world a better place.

What it does

Think of Ecosnap as a journal to keep track of your environmental goals. Ecosnap will help us make a genuine effort to protect our environment on a daily basis. Environment goals are important on several counts. They hold us accountable for our actions, expand our definition of possible, and encourage us to push through temporary discomfort for longer-lasting change. Ecosnap allows you to record your 3R 1O (Reduce, Reuse, Recycle, Ocean) activity throughout the day.

_Grabbed coffee in a plastic cup with a plastic straw? Add it to Ecosnap _

Reduced Food waste? Add it

Donated clothes? Add it

You'll get a badge as a reward for every 100 eco karma you receive which you can then share with your snap friends. Your friends could then be encouraged and motivated to follow a similar path and support the common goal of protecting our planet.

How we built it

Login Kit (Authentication): Used Passport for authenticating with Snapchat using the OAuth 2.0 API for my Express-based web application. This helped redirect the user-agent back to the client.

Creative Kit (Share): Used Snap Creative Kit to share the content of the web app. The user can then scan the Snapcode with the Snapchat camera if on the web (or will be redirected to Snapchat if on a mobile device), and the link will attach the URL to Snapchat.

Used JS to keep track of daily karma points for different categories.

Challenges we ran into

The main challenge I ran into was when trying to integrate the creative kit with my web app that I was hosting locally on port 3000. Snapchat Developer account requires us to provide an https secured attachment link domain for us to be able to share the content of website. Since I was using localhost:3000, I wasn't able to provide a valid URL: not just because it was not HTTPS secured but also because it was looking for a domain name instead of localhost.

So, in order to accomplish that after a lot of research and countless hours of trying several approach, I found a life-saving tool called Ngrok, that creates a tunnel from the public internet http://.ngrok.io to a port on your local machine (3000 in my case). I was then able to share auto-generated URL with anyone to give them access to my local development environment.

Accomplishments that we're proud of

Maintaining Snap authentication for multiples pages. Getting creative kit integrated on the app.

What we learned

Learned about Passport and Ngrok, and how strong of a tool they are. This hackathon also helped me learn ejs, aunthetication, and the concept of access tokens