⭐ ✨ 🎁 📋 🏆 ⭐ ✨ 🎁

StarQuest:
How the Magic Works

星际任务：魔法是如何运作的

🚀 A real-life star chart adventure for the whole family

⭐ Kids earn shining stars by completing fun quests

✅ Parents set the adventures, approve requests, and watch children grow

🎁 Spend stars to unlock awesome rewards!

Scroll to explore the magic ↓

Section 2

The Big Picture 🗺️

StarQuest is built in three layers that talk to each other — like floors in a magical building! Click each layer to see what lives inside.

🌐

Your Web Browser

The part you look at and click!

▼

React Components Like LEGO bricks — each piece of the screen is a "component"

Tailwind CSS Paint and brushes that make things look pretty

Next.js (Client) Handles clicking, typing, and page transitions

next-intl Speaks English 🇺🇸 or Chinese 🇨🇳 — you pick!

Anime.js Makes things bounce, slide, and sparkle ✨

Canvas API Draws the twinkling starfield in the background

🧠

Next.js Server

The brain that prepares your pages!

▼

Server Components Pre-cook pages on the server before sending them — super fast!

API Routes Secret doors for the app to talk to itself

Middleware Security guard at the front door — checks your login badge

Cron Jobs Alarm clock tasks — sends weekly reports automatically!

Resend Email Sends invitation and report emails to parents

TypeScript The rulebook — makes sure nobody passes the wrong kind of data

🗄️

Supabase + PostgreSQL

The giant filing cabinet that remembers everything!

▼

families Each family gets their own magical vault of data

star_transactions Every star earned or spent, forever recorded

quests All the adventures kids can go on

rewards The treasure chest of prizes to spend stars on

Row-Level Security 🔒 Magic spell: your family can ONLY see YOUR data!

child_balances VIEW Auto-calculates how many stars each child has right now

Section 3

Two Worlds 🌍

StarQuest shows different things to parents and children. Click a side to see what each role can do!

👨‍👩 Parent

The Quest Master!

✅ Approve star requests

📊 See all children

⭐ Record stars directly

📋 Manage all quest types

📈 Weekly & monthly reports

⚙️ Configure credit & levels

📋 Emma: Help with Dishes +15 ⭐

⭐ Lucas: Read 30 min pending

🎁 Emma: Movie Night approved

⚠️ Lucas: Late for bed -20 ⭐

👆 Click a side to switch

👧 Child

The Star Hunter!

⭐ Bonus quests ONLY

📝 Request stars with a note

🎁 Redeem rewards

📊 My own history only

🔄 Resubmit rejected quests

💰 Borrow stars (credit)

💡 Key Insight: Children NEVER see Duty or Violation quests — only the fun, optional bonus ones! This keeps the experience positive and encouraging 🌟

Section 5

The Star Economy 💰

Different quests earn (or lose!) different amounts of stars. Click any cell to learn more!

Quest Matrix — Stars by Type × Scope

👆 Click any cell to see details

Star Flow Diagram

⭐ Earn Stars

Complete quests → parent approves

↓

💰 Star Balance

child_balances VIEW

↓

🎁 Redeem Reward

Stars deducted → parent confirms

💳 Credit System

Like a piggy bank loan! Kids can borrow stars when they run low. Each month, a small interest charge is automatically settled. 🏦

Tables: credit_settings · credit_transactions · interest_tiers

Section 6

The Database Memory 🗄️

Everything in StarQuest is saved in a PostgreSQL database. Tables hold the data, and arrows show how they connect!

🎮 Interactive Demo — Try it yourself!

description

stars

status

child

⭐ Emma's Balance: 265 stars

Section 7

The Code Toolbox 🧰

StarQuest is built with 6 amazing tools. Click any card to flip it and see real code!

💡 Hover or click any card to flip it!

🎓

You made it to the end!

StarQuest has 2,752 tests to make sure everything works perfectly. It's bilingual 🇺🇸🇨🇳, has a credit system 💳, sends weekly reports 📧, and even has a demo mode 🎭!

All of this in one magical Next.js app ✨

StarQuest:How the Magic Works