Four Square

Web application that uses the Foursquare API to get venues based on location, preferences.

Features Implemented

• Get the user location and show a list of available venues.
• Decide which venues and details are relevant to the user.
• Give the user the ability to adjust some search parameters (e.g. location, radius, venue types)
• Locating User Location based on GeoLocation API, which can be used for receommnding places based on current location.

• Location AutoComplete(Maps API) Feature enabled on Location field, for better UX.
• In the Venue Details Page, the following venue details are dispalyed
  • Places similiar to venue
  • Photo of the venue
  • Google Map Location (Static Image)
  • Address of the Venue
  • Description or Website of the Venue, based on API Response
  • Stats such as Tips Count, Likes Count etc

Priority was given to code quality & architecture in general, so that implementing a new API Call or adding a new UI Component shouldn't require much additional work. After all the idea was to develop an application using FourSquare API within 5 hours. The core functional work was completed in 5 hours. As I had the freedom to develop UI/UX, I spent extra hours to shape up the UX/UI.

Here are the features I initially intended to do, but didn't do due to time constraint.

• User Login/Registration
• PWA - I started with manifest.json & App Icons, but dint proceed further. Reason: Priority! 🙂
• UI Testing - using Cypress.io.
• API Testing - I've made use of Try it now option in FourSquare API which was helping in testing the JSON Response, so I've not written any API Test cases for API Testing.

Demo Videos

• Demo 1: Show Venues For Given Location
• Demo 2: Show Locations Based on User Choice on Category & Location

Light House Reports

To check the quality, performance, a11y, best practices of the application, I've used Light House. My Target was 80+ score in each area; I've achieved 90+ in all areas except PWA.

Landing Page Report

Search-Venues Report

Search Results Reprot

Venue Details Report

Overall for the time spent, I think I've produced a decent MVP to start with. 🙂

Installation & Pre-requisites

1. Installation

npm install

2. Setup API Keys

Rename variables.env.sample to variables.env and update the following keys.

MAP_KEY=<Insert API Key from Google Maps>
FOUR_SQUARE_CLIENT_ID=<Insert Client Id from FourSquare>
FOUR_SQUARE_CLIENT_SECRET=<Insert Client Secret from FourSquare>

Skipping this step would cause a Type Error while rendering the pug templates.

How to run the application

npm run dev

FourSquare Endpoints Used

I've used Regular(Free Developer Version) Endpoints instead of Premium due to the cost involved.

• Search for Venues
• Get Details of a Venue
• Get Similar Venues

Other APIs Used

• Google Map API

Technology Stack

• Front-End
  • ES6+, Sass(CSS Preprocessor), Pug Templates,
• Back-End
  • Node, ExpressJS
• Task Runners, Build Process & Development Workflow
  • Webpack, Prettier
• Source Control
  • GitHub
• IDE & Dev Tools
  • VS Code
  • LightHouse
  • Chrome Dev Tools
• Deployment & Hosting
  • Zeit-Now
• Icons Credits
  • Flaticon

FAQ

The Google Maps API key isn't working

You might have hit a limit with the API key — if this is the case you need to sign up for your own API key over at https://developers.google.com/maps/documentation/javascript/usage. You will need to enable static maps for your API key.

Once you have the API key, simply place it in your variables.env file and restart.

Four Square API Quota Exceeded!

This application runs using basic version of FourSquare API for developers, which restricts the number of premium calls. If you encounter this error, Create a new set of CLIENT_ID & CLIENT_SECRET keys from Foursquare and try again.

Why not a fancy framework (React/Vue/Angular)?

Introducing React, Redux, ReduxThunk, MiddleWare would be a overkill. So Proceeded with simple ES6 using pug templates.