Daily horoscope template

React
Vite

Today’s reading for each zodiac sign, with a lucky number, lucky time, mood, color and best matches.

A React app with a card for each of the twelve zodiac signs. Pick one for today’s reading, plus a lucky number, lucky time, mood, color, birthstone and the signs it gets on best with. Use it as a daily feature on a lifestyle site, or send the reading by email or push notification.

What it does

All twelve signs: A card per sign with its symbol and dates, so people can find theirs without knowing the dates.
More than a reading: Adds a lucky number and time, a mood, a color and the day’s most compatible signs.
Fresh every day: Readings change daily, so there’s a reason to come back.
Keeps your key private: The page calls a Vercel function in api/, which holds the key, checks the input and limits each visitor to 10 readings a minute.
Runs locally in one command: npm run dev serves the page and runs the api/ functions together, the same way Vercel does, with no CLI to install.

How it works

The Vercel function: it checks the sign and calls Horoscope.

api/horoscope.js

import { guard, callApi, respond, fail } from '../lib/apiverve.js';

const SIGNS = ['aries', 'taurus', 'gemini', 'cancer', 'leo', 'virgo', 'libra', 'scorpio', 'sagittarius', 'capricorn', 'aquarius', 'pisces'];

/** GET /api/horoscope?sign=leo: today's reading, lucky number, mood and color for a sign. */
export async function GET(request) {
  const blocked = guard(request);
  if (blocked) return blocked;

  const sign = (new URL(request.url).searchParams.get('sign') || '').toLowerCase();
  if (!SIGNS.includes(sign)) return fail('Pick one of the twelve zodiac signs');

  return respond(() => callApi('horoscope', { query: { sign } }));
}

See the whole file on GitHub →

Deploy it

Get a free API key
The free plan includes 200 credits a month, no card needed. Create your key.
Deploy it
Click Deploy to Vercel. Vercel copies the repo to your GitHub account and asks for APIVERVE_API_KEY: paste your key there.
Open your app
Vercel builds it and gives you a live URL, usually in about a minute. Every push to the repo redeploys it.

Try the Horoscope API — the call this template makes

Request

GETapi.apiverve.com/v1/horoscope?sign=aries

Query parameters

signstring

Verification

Format

No key required to try it. Get a key to use it in your app.

Example

{
  "status": "ok",
  "error": null,
  "data": {
    "color": "green",
    "compatibility": [
      "leo",
      "sagittarius"
    ],
    "horoscope": "Today, the celestial alignment initiates a deep dive into your emotional landscapes, prompting you to analyze your hidden sentiments to strengthen existing links and navigate difficulties with loved ones more successfully. Open communication becomes essential, allowing you to gracefully balance individual desires. Financially, shrewd judgments keep a cautious route, reducing unnecessary risks and consolidating existing assets. Pay concentrated consideration not to let minor grievances cloud your judgement, strive to discover common understanding and resolve internal clashes diplomatically to facilitate individual advancement, reinforcing your bonds through vulnerability while navigating the ups and downs of interpersonal relationships cautiously keeping everything in balance.",
    "luckyNumber": 12,
    "luckyTime": "8:00 AM",
    "mood": "excited",
    "sign": "aries",
    "zodiac": {
      "element": "fire",
      "name": "Aries",
      "stone": "bloodstone",
      "symbol": "♈"
    }
  }
}