Git Product home page Git Product logo

adyen-foursquare's Introduction

FiveCircle venue search

Web app to search for venues via the FourSquare API created for Adyen coding challenge. Implemented using React, Bootstrap 4, NodeJs and ExpressJs (for application server that does not reveal API secrets).

Own Requirements

  • Search query for venues based on names
  • Free text location filter to get results near a certain location
  • Secondary inputs to limit radius of results and section of venues
  • Show venues in list view

Open requirements

  • Use better error handling than simple alerts.
  • Pagination for venues list.
  • Proper validation for parameters.
  • Autocomplete location using Google geocoding.
  • Give user possibility to show results in Google maps.
  • Allow user to login to FourSquare account using oAuth.
  • Use slider for range and Select2 for sections with auto complete.

Request handling

  1. Browser client sends request to application server (express.js).
  2. Application server performs rudimentary validation and forwards request after adding API secrets.
  3. FourSquare server responds with data or error.
  4. Application server forwards data or error to client.

Develop

    # Install all requirements:
    yarn
    
    # Set private FourSquare API auth parameters
    export FOURSQUARE_CLIENT_ID="YOUR_CLIENT_ID"
    export FOURSQUARE_CLIENT_SECRET="YOUR_CLIENT_SECRET"
    
    # Start API:
    node src/server/server.js
    
    # Watch changes and start development server with hot reload:
    yarn start

Live demo

https://warm-reef-22976.herokuapp.com/

Screens

Screenshot list Amsterdam

Screenshot list Sasbachwalden

adyen-foursquare's People

Contributors

schneider-simon avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.