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.
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 } }));
}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
No key required to try it. Get a key to use it in your app.
{
"status": "ok",
"error": null,
"data": {
"color": "orange",
"compatibility": [
"leo",
"sagittarius"
],
"date": "2026-10-26",
"horoscope": "Today, your natural drive and ambition are amplified, Aries. You're likely to feel a surge of energy, making it an excellent day to tackle challenging projects and assert your leadership. Communication flows well, so don't hesitate to express your ideas clearly and confidently. Be mindful, however, of potential impatience; ensure you're not rushing others or overlooking important details in your eagerness to move forward. A surprise opportunity might arise from an unexpected source, so stay open and adaptable. Financially, a cautious approach is advised, but longterm investments could see positive developments if you've done your due diligence. Listen to your intuition, especially when making significant decisions regarding your career or personal goals. Your courage will be your greatest asset.",
"period": "daily",
"periodStart": "2026-10-26",
"periodEnd": "2026-10-26",
"luckyNumber": 74,
"luckyTime": "6:00 AM",
"mood": "excited",
"sign": "aries",
"zodiac": {
"element": "fire",
"name": "Aries",
"stone": "bloodstone",
"symbol": "♈",
"ruler": "Mars",
"modality": "cardinal",
"opposite": "libra",
"brightestStar": {
"name": "Hamal",
"description": "The head of the Ram",
"magnitude": 2
},
"season": {
"start": "03-21",
"end": "04-20",
"inSeason": false,
"daysUntil": 145
}
}
}
}