DEV Community: Shiyang Ren

Building an Open-Source Tarot Birth Card Calculator with Next.js 15 & Crowley Numerology

Shiyang Ren — Sat, 31 Oct 2026 10:57:08 +0000

The Intersection of Archetypal Psychology and Modern Web Development

For decades, archetypal psychologyâ€”pioneered by Carl Jungâ€”and esoteric numerology have fascinated seekers, psychologists, and philosophers alike. One of the most mathematically elegant frameworks in this realm is the Tarot Birth Card system. By applying sacred Pythagorean digit reduction to a person's birth date, you can determine their lifelong archetypal signature from the 22 Major Arcana (such as The Magician, The High Priestess, or The Hermit).

However, if you search the web for tarot calculators, the current experience is notoriously frustrating:

Clunky WordPress sites overwhelmed with auto-playing video ads and invasive trackers.
Paywalled reports hiding your full archetypal analysis behind an email gate or $19.99 fee.
Outdated interfaces built in the Flash/PHP era with broken mobile viewports.

To solve this, I designed and deployed Tarot Birth Card Calculator: a clean, 100% free, lightning-fast web application built with Next.js 15 (App Router), TypeScript, and Tailwind CSS.

In this guide, I'll walk through the mathematical logic, the TypeScript reduction algorithm, edge-case combinations, and the frontend architecture powering the tool.

ðŸ“ The Mathematics: Pythagorean Reduction & Crowley Arcana

The core challenge of calculating Tarot Birth Cards lies in correctly handling the 22 Major Arcana reduction rules derived from the Hermetic Order of the Golden Dawn and Aleister Crowley's numerological correspondence.

Reduction Rules

Summing the Birth Date: Sum the full integer year, month, and day:

   Sum = Year + Month + Day (e.g. 1990 + 05 + 15 = 2010)

First Reduction (Personality Card): Sum the individual digits of the total sum. If the result is between 1 and 21, that corresponds to the Primary Personality Card. If it exceeds 22, reduce it once more.
Secondary Reduction (Soul Card): If the first card is a two-digit number (e.g., 14 Temperance), reduce its digits again (1 + 4 = 5, The Hierophant) to reveal the Soul Card.
The Special 3-Card Rule (The 19-10-1 Triad):
- If the sum reduces to 19 (The Sun), summing 1 + 9 = 10 (Wheel of Fortune), and 1 + 0 = 1 (The Magician). This represents a rare triple-archetype combination!
The Fool (0 / 22): The 22nd card is conceptually mapped to The Fool (0), representing infinite potential, pure trust, and the start of the hero's journey.

ðŸ’» The TypeScript Algorithmic Implementation

Here is the clean, functional TypeScript implementation powering the calculator:

export interface TarotCard {
  id: number;
  name: string;
  archetype: string;
  keywords: string[];
  lightGifts: string[];
  shadowDynamics: string[];
}

export interface BirthCardResult {
  birthDate: string;
  cards: TarotCard[];
  patternType: 'Single' | 'Pair' | 'Triple';
  lifeTheme: string;
}

/**
 * Reduces a positive integer by summing its individual digits.
 */
function sumDigits(num: number): number {
  return num
    .toString()
    .split('')
    .reduce((acc, digit) => acc + parseInt(digit, 10), 0);
}

/**
 * Calculates Tarot Birth Cards according to Pythagorean Reduction.
 */
export function calculateTarotBirthCards(
  year: number,
  month: number,
  day: number
): number[] {
  // Method: Sum of 3 date components (Year + Month + Day)
  const initialSum = year + month + day;
  let firstReduction = sumDigits(initialSum);

  // If initial reduction exceeds 22, reduce once more
  while (firstReduction > 22) {
    firstReduction = sumDigits(firstReduction);
  }

  // Handle the special 19 -> 10 -> 1 triple constellation
  if (firstReduction === 19) {
    return [19, 10, 1];
  }

  // Handle 22 (The Fool / The Master Builder)
  if (firstReduction === 22) {
    return [22, 4]; // The Fool & The Emperor
  }

  // Single-digit cards (1 to 9) have a single dominant archetype
  if (firstReduction <= 9) {
    return [firstReduction];
  }

  // Two-digit cards reduce to their secondary soul archetype
  const secondaryReduction = sumDigits(firstReduction);
  return [firstReduction, secondaryReduction];
}

ðŸŽ¨ Next.js 15 UI/UX & Card Reveal Experience

A modern spiritual tool must feel serene, tactile, and intuitive. We focused heavily on micro-interactions:

Interactive Date Selection & Instant Validation:
- Zero-latency client-side calculations triggered immediately upon selecting month, day, and year.
- Accessible keyboard navigation and mobile-first touch optimization.
3D Card Flip Animation with Tailwind CSS:
- Cards render face-down initially with a mystical gold-foil geometric back.
- Dynamic 3D perspective rotation (transform: rotateY(180deg)) triggers smoothly upon calculation.
Archetypal Deep-Dive:
- Beyond just card names, the application breaks down:
  - Core Psychological Strengths & Creative Talents
  - Shadow Aspects & Blindspots
  - Karmic & Soul Lessons for Life Growth

âš¡ Performance, Privacy & Zero-Tracking Philosophy

Most web-based divination tools monetise via predatory data-harvesting or tracking user dates of birth for third-party advertising brokers.

With Tarot Birth Card Calculator:

Zero Registration Required: No login, no email capture modal, no paywall, 100% free forever.
Client-Side Privacy: Date of birth computations happen in the user's browser runtime.
Perfect Lighthouse Scores: 100 on Performance, 100 on Accessibility, and 100 on SEO.
Dynamic OpenGraph Cards: High-res SVG card previews automatically generated for social sharing.

ðŸ”® Try the Live Calculator & Contribute

Whether you are a developer interested in esoteric algorithms or simply curious to discover your own Tarot Archetype (are you a High Priestess / Justice or a Hierophant / Temperance?):

ðŸ‘‰ Experience the live web app: https://www.thetarotbirthcard.com

I'd love to hear your thoughts, feedback, and feature requests. What spiritual or psychological tools would you love to see open-sourced next? Drop your comments below!

How I Built an AI Video-to-Quiz Generator in 3 Days (Next.js 15, DeepSeek & Active Recall)

Shiyang Ren — Sun, 18 Oct 2026 13:06:27 +0000

The Problem: Passive Video Watching & The Illusion of Competence

Have you ever spent 2 hours watching an in-depth computer science lecture or machine learning tutorial on YouTube, feeling like you completely understood the material, only to realize the next morning that you can't recall the fundamental concepts?

Cognitive scientists call this the "Illusion of Explanatory Depth". Passive video watching produces steep memory decay according to the Hermann Ebbinghaus forgetting curve. Without deliberate, active retrieval within 48 hours, over 70% of the lecture content is lost.

To solve this for myself and fellow self-taught developers, I built YouTube to Quiz AI—a fast web application that turns any YouTube educational lecture into an interactive 5-question test with timestamped explanations, scoring, and Anki-compatible flashcard export in under 10 seconds.

🛠️ The Tech Stack

I prioritized lightweight edge performance, lightning-fast TTFB (Time to First Byte), and deep SSR SEO:

Frontend & SSR: Next.js 15 (App Router, Server Components for rich SSR educational knowledge base)
Styling: Tailwind CSS with dark-mode first design
AI Reasoning Engine: DeepSeek-V3 671B MoE for Bloom's Taxonomy question generation
Transcript Parsing: Residential proxy worker pipeline via Supadata AI
Database & Auth: Cloudflare D1 Serverless SQLite + Google Cloud OAuth 2.0
Global Monetization: Waffo Pancake global payments

💡 How it Works Under the Hood

1. Robust Subtitle Extraction with Fallback

Most developers rely on standard scrapers that quickly get IP-banned by YouTube. We route transcript requests through distributed residential proxy workers. If a video has subtitles disabled or regional restrictions, we built a zero-friction fallback allowing users to paste any lecture notes or transcript text directly.

2. Context-Grounded Prompt Engineering

To prevent hallucinated questions, the prompt strictly conditions DeepSeek-V3 to cite exact video timestamps for every correct answer:

const prompt = `
Analyze the following YouTube transcript. Extract 5 core conceptual questions.
For each question:
1. Provide 4 plausible options (1 correct, 3 distinct distractors).
2. Attach an educational explanation.
3. Reference the exact timestamp offset where this topic is taught in the video.
`;

🚀 Live Demo & Feedback

The project is deployed on production with 20 free starting credits for every learner:
👉 Try YouTube to Quiz AI for Free

I'd love to hear your feedback on the active recall flow and what features you'd like to see next!

Building an Interactive Tarot Birth Card Calculator: Archetypal Numerology with Next.js & Tailwind

Shiyang Ren — Sat, 10 Oct 2026 06:32:59 +0000

Why We Built the Tarot Birth Card Calculator

Have you ever wondered how traditional archetypal symbolism intersects with modern interactive web development?

Numerology and Tarot have fascinated thinkers and psychologists—most notably Carl Jung with his exploration of archetypes and synchronicity—for decades. In classical Hermetic Tarot, your Birth Card (or Soul Card) is calculated using your exact date of birth, distilling your personal life path into the 22 Major Arcana archetypes (such as The Magician, The High Priestess, The Emperor, or The Star).

To make this discovery process intuitive, beautifully visual, and completely friction-free, we built the Tarot Birth Card Calculator.

🛠️ The Tech Stack

When designing this application, our primary goals were zero layout shift, sub-second TTFB, and an immersive user interface:

Framework: Next.js (App Router, React Server Components)
Styling: Tailwind CSS with custom royal gold and midnight-indigo palettes
Typography & Assets: Tailored serif typography and high-definition card artwork
Deployment & Edge: Hosted on Vercel with Cloudflare global edge caching

🧮 Core Algorithm: Pythagorean Date-to-Arcana Reduction

The calculation algorithm relies on the ancient Pythagorean cross-sum reduction. Here is a simplified version of the logic implemented in TypeScript:

export function calculateTarotBirthCard(birthDate: Date): { primary: number; shadow?: number } {
  const year = birthDate.getFullYear();
  const month = birthDate.getMonth() + 1;
  const day = birthDate.getDate();

  // Sum all individual digits or 2-digit groups
  const sum = year + month + day;

  // Reduce to 22 (Major Arcana span 1-21, with The Fool as 22/0)
  function reduceNumber(n: number): number {
    while (n > 22) {
      n = n.toString().split('').reduce((acc, digit) => acc + parseInt(digit, 10), 0);
    }
    return n;
  }

  const primary = reduceNumber(sum);
  const shadow = primary > 9 ? reduceNumber(primary.toString().split('').reduce((a, b) => a + parseInt(b, 10), 0)) : undefined;

  return { primary, shadow };
}

🌟 Key Features & UX Decisions

Instant Calculation without Sign-up:
Visitors shouldn't have to fill out bloated forms or sign up for a newsletter just to see their card. Instant gratification creates the best user experience.
Dual-Card Dynamics:
Unlike simple horoscopes, many birth dates reveal a Primary Soul Card and a Shadow / Teacher Card, providing a more nuanced psychological perspective.
Responsive Visual Showcase:
Every card spread is rendered with dedicated symbolic illustrations, keywords, and personality strengths.

🚀 Check It Out!

The tool is 100% free and open for everyone to explore:
👉 Try the Tarot Birth Card Calculator

We would love to hear feedback from fellow indie makers and developers! What's your birth card archetype? Let us know in the comments below!

DEV Community: Shiyang Ren

Building an Open-Source Tarot Birth Card Calculator with Next.js 15 & Crowley Numerology

The Intersection of Archetypal Psychology and Modern Web Development

ðŸ“ The Mathematics: Pythagorean Reduction & Crowley Arcana

Reduction Rules

ðŸ’» The TypeScript Algorithmic Implementation

ðŸŽ¨ Next.js 15 UI/UX & Card Reveal Experience

âš¡ Performance, Privacy & Zero-Tracking Philosophy

ðŸ”® Try the Live Calculator & Contribute

How I Built an AI Video-to-Quiz Generator in 3 Days (Next.js 15, DeepSeek & Active Recall)

The Problem: Passive Video Watching & The Illusion of Competence

🛠️ The Tech Stack

💡 How it Works Under the Hood

1. Robust Subtitle Extraction with Fallback

2. Context-Grounded Prompt Engineering

🚀 Live Demo & Feedback

Building an Interactive Tarot Birth Card Calculator: Archetypal Numerology with Next.js & Tailwind

Why We Built the Tarot Birth Card Calculator

🛠️ The Tech Stack

🧮 Core Algorithm: Pythagorean Date-to-Arcana Reduction

🌟 Key Features & UX Decisions

🚀 Check It Out!

ðŸ“ The Mathematics: Pythagorean Reduction & Crowley Arcana