Building a Nearby Deals App with the ipstack API

Aanchal Chauhan — Thu, 05 Dec 2024 10:37:09 +0000

Creating personalized apps based on location data is a rewarding challenge for developers. In this tutorial, we'll use the ipstack API to build an app that shares top nearby deals based on user location. By the end of this guide, you'll have a functioning backend with a simple frontend to showcase location-specific deals.

Overview

The goal:

Fetch user location using the ipstack API.
Match user location with nearby deals stored in a database or API.
Display those deals using a user-friendly UI.

What You’ll Need

An ipstack API key.
A backend framework (e.g., Node.js).
Sample data for deals or a deals API (e.g., mock data in JSON).
Optional: A frontend library like React or plain HTML/JavaScript.

To make the tutorial interactive, you can follow along with the ipstack API documentation.

Step 1: Fetch Location Data

Start by integrating the ipstack API to retrieve geolocation data.

Code Example
Here’s how to fetch user location data based on an IP address:

const axios = require('axios');

const getLocation = async (ipAddress) => {
  const API_KEY = 'your_ipstack_api_key';
  const url = `http://api.ipstack.com/${ipAddress}?access_key=${API_KEY}`;

  try {
    const response = await axios.get(url);
    const data = response.data;
    console.log('User Location:', data);
    return {
      city: data.city,
      region: data.region_name,
      country: data.country_name,
      latitude: data.latitude,
      longitude: data.longitude,
    };
  } catch (error) {
    console.error('Error fetching location:', error.message);
  }
};

// Example usage:
getLocation('172.70.143.208');

Sample Response

{
  "ip": "172.70.143.208",
  "city": "Singapore",
  "region_name": "Central Singapore",
  "country_name": "Singapore",
  "latitude": 1.287950038909912,
  "longitude": 103.8517837524414
}

Step 2: Create a Mock Deals Database

To keep things simple, let’s use a JSON file to store some sample deals.

deals.json

[
  {
    "id": 1,
    "title": "20% off Electronics",
    "city": "Singapore",
    "latitude": 1.290270,
    "longitude": 103.851959
  },
  {
    "id": 2,
    "title": "Buy 1 Get 1 Free - Coffee",
    "city": "Singapore",
    "latitude": 1.300270,
    "longitude": 103.860959
  }
]

Step 3: Match Deals to User Location

We’ll filter deals based on user location using a simple distance formula.

Haversine Formula
This formula calculates the distance between two geographic coordinates.

const getDistance = (lat1, lon1, lat2, lon2) => {
  const toRad = (value) => (value * Math.PI) / 180;
  const R = 6371; // Radius of Earth in km

  const dLat = toRad(lat2 - lat1);
  const dLon = toRad(lon2 - lon1);
  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(toRad(lat1)) *
      Math.cos(toRad(lat2)) *
      Math.sin(dLon / 2) *
      Math.sin(dLon / 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return R * c; // Distance in km
};

Filter Nearby Deals
Here’s how to find deals within a specific radius:

const filterDeals = (userLat, userLon, deals, radius = 10) => {
  return deals.filter((deal) => {
    const distance = getDistance(userLat, userLon, deal.latitude, deal.longitude);
    return distance <= radius;
  });
};

// Example usage:
const userLat = 1.287950038909912;
const userLon = 103.8517837524414;

const deals = require('./deals.json');
const nearbyDeals = filterDeals(userLat, userLon, deals, 5);
console.log('Nearby Deals:', nearbyDeals);

Step 4: Display Deals in the Frontend

You can keep the frontend lightweight or build something dynamic. Here’s an example using plain HTML and JavaScript.

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nearby Deals</title>
</head>
<body>
  <h1>Top Deals Near You</h1>
  <ul id="deals-list"></ul>
  <script>
    const deals = [
      { title: "20% off Electronics", city: "Singapore" },
      { title: "Buy 1 Get 1 Free - Coffee", city: "Singapore" }
    ];

    const list = document.getElementById('deals-list');
    deals.forEach(deal => {
      const li = document.createElement('li');
      li.textContent = `${deal.title} - ${deal.city}`;
      list.appendChild(li);
    });
  </script>
</body>
</html>

Step 5: Connect Backend and Frontend

Create an endpoint to serve the filtered deals and fetch them dynamically in the frontend.

Express.js Example

const express = require('express');
const app = express();
const deals = require('./deals.json');

app.get('/api/deals', (req, res) => {
  const userLat = parseFloat(req.query.lat);
  const userLon = parseFloat(req.query.lon);
  const radius = parseInt(req.query.radius) || 10;

  const nearbyDeals = filterDeals(userLat, userLon, deals, radius);
  res.json(nearbyDeals);
});

app.listen(3000, () => console.log('Server running on port 3000'));

Helpful Resources

Here are a few links to deepen your understanding:

ipstack API Documentation: Comprehensive guide to ipstack API features.
Haversine Formula Explained: Learn the math behind distance calculation.
Node.js Official Guide: Explore Node.js essentials.

Streamline Your Workflow with Numverify's Zapier Integration

Aanchal Chauhan — Wed, 05 Jun 2024 09:52:06 +0000

In the fast-paced world of business optimization and automation, every second counts. Whether you’re managing customer data, ensuring accurate communications, or automating tedious tasks, having reliable tools at your disposal is essential. That’s why we’re thrilled to introduce the new Numverify Zap, designed to make phone number validation easier than ever, even for users with no coding experience.

What is Numverify?
Numverify is a leading API service that provides global phone number validation. With a comprehensive database that supports over 232 countries, Numverify helps businesses verify and format phone numbers in real-time, ensuring data accuracy and improving communication efficiency.

Introducing the Numverify Zap
With our new Numverify Zap, integrating phone number validation into your workflow has never been simpler. This powerful tool seamlessly connects Numverify with any Zapier-enabled application, automating the validation process and saving you valuable time and effort. Whether you’re using CRM systems, email marketing tools, or customer support platforms, the Numverify Zap ensures that your phone data is always accurate and up-to-date.

Key Features
Ease of Use: No coding required. Simply set up the Zap and let it run.
Real-Time Validation: Verify phone numbers instantly to ensure accuracy.
Global Coverage: Supports phone numbers from over 232 countries.
Seamless Integration: Works with a wide range of applications through Zapier.

How to Get Started
Sign Up: If you haven’t already, sign up for a Zapier account.
Create a Zap: Navigate to the Numverify integration page and create a new Zap.
Configure Your Trigger and Action: Select your trigger app and action app, then configure the Numverify validation step.
Activate Your Zap: Turn on your Zap and start automating phone number validation.

Why Use Numverify Zap?
Automating phone number validation with Numverify’s Zapier integration provides numerous benefits:

Accuracy: Reduce errors and ensure data consistency.
Efficiency: Save time by automating manual validation tasks.
Scalability: Easily handle large volumes of phone numbers across various applications.
Reliability: Trust in Numverify’s robust API for accurate and up-to-date phone number validation.

Learn More
Ready to take your business automation to the next level? Start using the Numverify Zap today and experience the benefits of seamless phone number validation.

Read more about automating data security by verifying new phone prospects with Zapier in this blog: Easy Steps to Automate Data Security.

DEV Community: Aanchal Chauhan