happn-map's Introduction

happn-map 🗺️🔍💘

A simple map for actually finding someone you met on Happn.

B-but.. why?

Happn is a great idea. The premise is that you go about your day and see someone you fancy. Maybe you exchange smiles on a bus, maybe it's the cute person in front of you at the supermarket, who knows? The point is, you're supposed to encounter anyone that also has the app and has been in the same area as you at the same time.

The catch, however, is that the UI for Happn is essentially a clunky version of Tinder, meaning you only see one person at a time. While you can scroll through your matches, in reality it's not a feasible way to find that person you saw on the subway. Imagine how many people you pass every day, and if only one in twenty has Happn installed, you'll soon find your self scrolling at the same rate you pass by new users.

Setup

git clone [email protected]:Sleavely/happn-map.git
cd happn-map
npm install
npm start

Now go to http://localhost:3333 and follow the instructions.

Development

happn-map is built with the following tools, and you'll probably have to deal with at least one of them if you want to hack away. If that's your cup o' tea, send me a pull request!

AdonisJs - Backend
vis.js - Interactive timeline
MapboxGL - It's a map! In a box!

An honorary🌟 mention goes out to hfreire for his awesome happn-wrapper.

happn-map's People

Contributors

Stargazers

Watchers

happn-map's Issues

Link to Github

<a href="https://github.com/Sleavely/happn-map" class="github-corner" aria-label="View source on Github">
  <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
  </svg>
</a>
<style>
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}
@keyframes octocat-wave{
  0%,100%{transform:rotate(0)}
  20%,60%{transform:rotate(-25deg)}
  40%,80%{transform:rotate(10deg)}
}
@media (max-width:500px){
  .github-corner:hover .octo-arm{animation:none}
  .github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}
}
</style>

http://tholman.com/github-corners/

Recommend Projects

sleavely / happn-map Goto Github PK

happn-map's Introduction

happn-map 🗺️🔍💘

Setup

Development

happn-map's People

Contributors

Stargazers

Watchers

happn-map's Issues

Link to Github

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent