Build your own last visitor indicator with Vercel & Redis

What are we building?

Ever visited a website and seen something like “Last visitor from Tokyo, Japan” and thought “wow, that’s cool”? Today we’re building exactly that. A simple indicator that shows where your last visitor came from, complete with a flag emoji for visual appeal.

It’s similar to a guestbook, but instead of people signing their names, the system automatically captures their location. All data is anonymous and only shows city and country information.

Concept behind it

If you use Vercel, it automatically forwards useful headers whenever someone makes a request to your site. These headers contain location information about each request.

The two headers we care about are:

x-vercel-ip-city: This is the city name of the request. For example, “New Delhi” or “San Francisco”
x-vercel-ip-country: This is the country code of the request. For example, “IN” for India or “US” for United States

When someone visits your site, we extract these headers, validate them, and store them in Redis. The next person who visits sees where the previous visitor was from. Each visitor becomes the “last visitor” for the next one.

Tools we need

The idea is simple: show the “last viewer” location when someone loads your site. But we need somewhere to store this information temporarily. Redis is an in-memory storage solution that’s well-suited for this use case.

Redis is perfect for this because:

It’s fast and efficient
It’s ephemeral (we don’t need to store this forever)
It works great with serverless functions (which is what we’re using)

When a page loads, we:

Get the current visitor’s city and country from Vercel headers
Check what’s already stored in Redis (the last visitor)
If it’s different (or nothing exists), we update Redis
Return the previous visitor’s location to display

We only write to Redis if the location changed, which saves us an extra write operation and improves efficiency.

Getting the Tools configured

Setting up Redis instance

First things first, we need a Redis instance. Upstash is perfect for this because it’s serverless, has a generous free tier, and works well with Vercel.

Here’s what you need to do:

Head over to Upstash and sign up (or log in if you already have an account)
Create a new Redis database
Choose a region close to your Vercel deployment
Once created, you’ll get two important things:
- UPSTASH_REDIS_REST_URL - This is your Redis endpoint URL
- UPSTASH_REDIS_REST_TOKEN - This is your authentication token

Save these somewhere safe. We’ll need them for the next step.

Vercel

If you’re reading this article, chances are you already have a Vercel account. But just in case you don’t:

Go to Vercel and sign up
Import your project (or create a new one)
Make sure your project is deployed

That’s it! Vercel will automatically inject those location headers we talked about earlier. No additional configuration is needed.

It’s time to cook some code

Let’s create an API route that handles fetching and storing the visitor location. I’m using Astro here, but this will work with any framework that supports API routes (Next.js, SvelteKit, and others).

First, install the Upstash Redis client:

npm install @upstash/redis

Now, let’s create our API route. I’ll put mine at src/pages/api/live-location.ts:

1
import type { APIRoute } from 'astro'
2
import { Redis } from '@upstash/redis'
3

4
export const prerender = false
5

6
type LastVisitorLocation = {
7
  city: string
8
  country: string
9
}
10

11
const LOCATION_KEY = 'lastVisitorLocation'
12
const CITY_HEADER_NAME = 'x-vercel-ip-city'
13
const COUNTRY_HEADER_NAME = 'x-vercel-ip-country'
14

15
// Initialize Redis client
16
const redisUrl = import.meta.env.KV_REST_API_URL
17
const redisToken = import.meta.env.KV_REST_API_TOKEN
18

19
const redis =
20
  redisUrl && redisToken
21
    ? new Redis({
22
        url: redisUrl,
23
        token: redisToken,
24
      })
25
    : null
26

27
export const GET: APIRoute = async ({ request }) => {
28
  if (!redis) {
29
    return new Response(
30
      JSON.stringify({ error: 'Redis client not initialized' }),
31
      { status: 500, headers: { 'Content-Type': 'application/json' } },
32
    )
33
  }
34

35
  const headersList = request.headers
36
  const city = headersList.get(CITY_HEADER_NAME)
37
  const country = headersList.get(COUNTRY_HEADER_NAME)
38

39
  // Get the last visitor location from Redis
40
  const lastLocation = await redis.get<LastVisitorLocation>(LOCATION_KEY)
41

42
  // Update Redis if we have new location data
43
  if (city && country) {
44
    const newLocation = { city, country }
45

46
    // Only update if location changed (saves a write!)
47
    if (
48
      !lastLocation ||
49
      lastLocation.city !== city ||
50
      lastLocation.country !== country
51
    ) {
52
      await redis.set(LOCATION_KEY, newLocation, { ex: 60 * 60 * 24 * 7 }) // 7 days TTL
53
    }
54
  }
55

56
  // Return the last visitor (before current update)
57
  return new Response(
58
    JSON.stringify({
59
      lastVisitor: lastLocation || null,
60
      currentVisitor: city && country ? { city, country } : null,
61
    }),
62
    {
63
      status: 200,
64
      headers: { 'Content-Type': 'application/json' },
65
    },
66
  )
67
}

There we go! A simple API route that:

Gets the current visitor’s location from Vercel headers
Retrieves the last visitor’s location from Redis
Updates Redis if the location changed
Returns the last visitor’s location

Notice how we’re using ex: 60 * 60 * 24 * 7 in the set command? That sets an expiration of 7 days. After that, Redis will automatically delete the key, keeping the database clean.

Also, we only write to Redis if the location actually changed. This prevents unnecessary writes when the same person refreshes the page multiple times.

Now let’s harden it!

Our code works, but we should add security measures to protect against malicious input. Let’s add validation, rate limiting, and proper error handling.

1
// Security constants
2
const MAX_CITY_LENGTH = 100
3
const MAX_COUNTRY_LENGTH = 2 // ISO country codes are 2 letters
4
const RATE_LIMIT_WINDOW = 60 // seconds
5
const RATE_LIMIT_MAX_REQUESTS = 10 // max requests per window
6
const LOCATION_TTL = 60 * 60 * 24 * 7 // 7 days
7

8
// Decode URL-encoded header values
9
const decodeHeaderValue = (value: string | null): string | null =>
10
  value ? decodeURIComponent(value) : null
11

12
// Sanitize and validate city name
13
function sanitizeCity(city: string | null): string | null {
14
  if (!city) return null
15

16
  const sanitized = city
17
    .trim()
18
    .replace(/[\x00-\x1F\x7F]/g, '') // Remove non-printable chars
19
    .slice(0, MAX_CITY_LENGTH)
20

21
  // Only allow letters, spaces, hyphens, apostrophes, and common punctuation
22
  if (!/^[a-zA-Z\s\-'.,()]+$/.test(sanitized)) {
23
    return null
24
  }
25

26
  return sanitized || null
27
}
28

29
// Validate and sanitize country code
30
function sanitizeCountry(country: string | null): string | null {
31
  if (!country) return null
32

33
  const sanitized = country
34
    .trim()
35
    .replace(/[\x00-\x1F\x7F]/g, '')
36
    .toUpperCase()
37

38
  // Must be exactly 2 uppercase letters (ISO 3166-1 alpha-2)
39
  if (!/^[A-Z]{2}$/.test(sanitized) || sanitized.length > MAX_COUNTRY_LENGTH) {
40
    return null
41
  }
42

43
  return sanitized
44
}
45

46
// Rate limiting using Redis
47
async function checkRateLimit(
48
  redis: Redis,
49
  identifier: string,
50
): Promise<boolean> {
51
  const key = `rate_limit:${identifier}`
52

53
  try {
54
    const count = await redis.incr(key)
55

56
    // Set expire only on first increment
57
    if (count === 1) {
58
      await redis.expire(key, RATE_LIMIT_WINDOW)
59
    }
60

61
    return count <= RATE_LIMIT_MAX_REQUESTS
62
  } catch {
63
    // If rate limiting fails, allow the request (fail open)
64
    return true
65
  }
66
}
67

68
// Get client identifier for rate limiting
69
function getClientIdentifier(request: Request): string {
70
  const headers = request.headers
71
  const ip =
72
    headers.get('x-vercel-forwarded-for')?.split(',')[0] ||
73
    headers.get('x-forwarded-for')?.split(',')[0] ||
74
    headers.get('cf-connecting-ip') ||
75
    headers.get('x-real-ip') ||
76
    'unknown'
77

78
  return ip.trim()
79
}

Now let’s update our GET handler to use these security measures:

1
export const GET: APIRoute = async ({ request }) => {
2
  try {
3
    if (!redis) {
4
      return new Response(
5
        JSON.stringify({ error: 'Redis client not initialized' }),
6
        { status: 500, headers: { 'Content-Type': 'application/json' } },
7
      )
8
    }
9

10
    // Rate limiting
11
    const clientId = getClientIdentifier(request)
12
    const allowed = await checkRateLimit(redis, clientId)
13

14
    if (!allowed) {
15
      return new Response(JSON.stringify({ error: 'Too many requests' }), {
16
        status: 429,
17
        headers: {
18
          'Content-Type': 'application/json',
19
          'Retry-After': String(RATE_LIMIT_WINDOW),
20
        },
21
      })
22
    }
23

24
    const headersList = request.headers
25
    const rawCity = decodeHeaderValue(headersList.get(CITY_HEADER_NAME))
26
    const rawCountry = decodeHeaderValue(headersList.get(COUNTRY_HEADER_NAME))
27

28
    // Sanitize and validate inputs
29
    const city = sanitizeCity(rawCity)
30
    const country = sanitizeCountry(rawCountry)
31

32
    // Get last visitor location from Redis
33
    const location = await redis.get<LastVisitorLocation>(LOCATION_KEY)
34

35
    // Update Redis if location has changed and is valid
36
    if (
37
      city &&
38
      country &&
39
      (!location || city !== location.city || country !== location.country)
40
    ) {
41
      await redis.set(LOCATION_KEY, { city, country }, { ex: LOCATION_TTL })
42
    }
43

44
    // Return the last visitor location (before current update)
45
    return new Response(
46
      JSON.stringify({
47
        lastVisitor: location || null,
48
        currentVisitor: city && country ? { city, country } : null,
49
      }),
50
      {
51
        status: 200,
52
        headers: { 'Content-Type': 'application/json' },
53
      },
54
    )
55
  } catch (error) {
56
    return new Response(
57
      JSON.stringify({
58
        error:
59
          error instanceof Error ? error.message : 'Unknown error occurred',
60
      }),
61
      {
62
        status: 500,
63
        headers: { 'Content-Type': 'application/json' },
64
      },
65
    )
66
  }
67
}

What we’ve added:

Input validation: We sanitize city and country inputs to prevent injection attacks
Rate limiting: We limit requests to 10 per minute per IP address
Error handling: Proper try-catch blocks with meaningful error messages
Header decoding: Vercel headers are URL-encoded, so we decode them properly

Now our API is much more secure with proper input validation and rate limiting in place.

Here comes the frontend

Now that we have our API working, let’s build a React component to display this information. We’ll include a flag emoji and smooth animations for a polished user experience.

1
'use client'
2
import { useState, useEffect } from 'react'
3

4
interface LiveLocationData {
5
  message?: string
6
  emoji?: string
7
  state?: 'found' | 'awol'
8
}
9

10
// Convert country code to flag emoji
11
function getCountryFlagEmoji(countryCode: string): string {
12
  if (!countryCode || countryCode.length !== 2) {
13
    return '🌍'
14
  }
15

16
  // Convert 2-letter country code to flag emoji
17
  const codePoints = countryCode
18
    .toUpperCase()
19
    .split('')
20
    .map((char) => 0x1f1e6 + char.charCodeAt(0) - 65)
21

22
  if (codePoints.some((cp) => cp < 0x1f1e6 || cp > 0x1f1ff)) {
23
    return '🌍'
24
  }
25

26
  return String.fromCodePoint(...codePoints)
27
}
28

29
async function getLocation(): Promise<LiveLocationData> {
30
  const res = await fetch('/api/live-location')
31
  if (!res.ok) {
32
    throw new Error('Failed to fetch location')
33
  }
34

35
  const data = await res.json()
36
  const lastVisitor = data?.lastVisitor
37
  const isFound = !!lastVisitor && lastVisitor.city && lastVisitor.country
38

39
  let emoji: string | undefined
40
  let message: string | undefined
41

42
  if (isFound) {
43
    emoji = getCountryFlagEmoji(lastVisitor.country)
44
    message = `Last visitor from ${lastVisitor.city}, ${lastVisitor.country}`
45
  } else {
46
    message = 'Location unknown'
47
  }
48

49
  return {
50
    emoji,
51
    message,
52
    state: isFound ? 'found' : 'awol',
53
  }
54
}
55

56
interface LiveLocationProps {
57
  delay?: boolean
58
  size?: 'sm' | 'md'
59
  className?: string
60
}
61

62
export function LiveLocation({
63
  delay = false,
64
  size = 'md',
65
  className = '',
66
}: LiveLocationProps) {
67
  const [location, setLocation] = useState<LiveLocationData | null>(null)
68
  const [isLoading, setIsLoading] = useState(true)
69

70
  useEffect(() => {
71
    // Skip fetching in dev mode
72
    const isDev = import.meta.env.DEV
73
    if (isDev) {
74
      setIsLoading(false)
75
      return
76
    }
77

78
    let mounted = true
79

80
    const loadLocation = async () => {
81
      try {
82
        const data = await getLocation()
83
        if (mounted) {
84
          setLocation(data)
85
          setTimeout(() => {
86
            if (mounted) {
87
              setIsLoading(false)
88
            }
89
          }, 500)
90
        }
91
      } catch (error) {
92
        console.error('Failed to load live location:', error)
93
        if (mounted) {
94
          setIsLoading(false)
95
        }
96
      }
97
    }
98

99
    if (delay) {
100
      setTimeout(loadLocation, 100)
101
    } else {
102
      loadLocation()
103
    }
104

105
    return () => {
106
      mounted = false
107
    }
108
  }, [delay])
109

110
  return (
111
    <p className={`text-muted-foreground inline-flex items-center gap-2 ${className}`}>
112
      {isLoading ? (
113
        <span>Locating…</span>
114
      ) : (
115
        <>
116
          {location?.emoji && <span>{location.emoji}</span>}
117
          <span>{location?.message || 'Location unknown'}</span>
118
        </>
119
      )}
120
    </p>
121
  )
122
}

This component:

Fetches the location data from our API
Converts the country code to a flag emoji for visual appeal
Shows a loading state while fetching
Handles errors gracefully

You can customize the styling however you want. Add animations, change colors, or adjust the layout to match your design.

Final steps

Now that we have everything working, let’s deploy it! Here’s what you need to do:

Add environment variables to Vercel:
- Go to your Vercel project settings
- Navigate to “Environment Variables”
- Add KV_REST_API_URL with your Upstash Redis URL
- Add KV_REST_API_TOKEN with your Upstash Redis token
- Make sure to add them for Production, Preview, and Development environments
Deploy your project:
Terminal window
```
git add .
git commit -m "Add last visitor indicator"
git push
```
Vercel will automatically deploy your changes.
Test it out:
- Visit your deployed site
- Open it in an incognito window (or ask a friend to visit)
- You should see the location indicator appear!

If you want to test locally, you can add the environment variables to a .env file:

1
KV_REST_API_URL=https://your-redis-url.upstash.io
2
KV_REST_API_TOKEN=your-token-here

Just make sure not to commit this file to Git (add it to your .gitignore). This prevents accidentally exposing your credentials.

Outro

And that’s it! You now have a working last visitor indicator on your site. It’s a fun little feature that adds personality to your website and gives visitors a sense of community (even if they’re just random internet strangers).

Some ideas for extending this:

Add a history of recent visitors (store multiple locations)
Show visitor count per country
Add a map visualization
Make it update in real-time with WebSockets

There are many ways you can extend this feature.

If you run into any issues or have questions, feel free to reach out. And if you build something cool with this, I’d love to see it!

Happy coding! 🚀