I Built MySpace with AI Ghosts and It's Gloriously Spooky

TL;DR
I revived MySpace with a gothic horror twist, powered by Groq's lightning-fast AI. Create profiles with AI-generated bios, chat with ghost companions, leave haunting visitor notes, and watch themes change based on time of day. Built entirely with Kiro AI assistance!

🔗 Live Demo: [Your URL here] 💻 GitHub: [Your repo here]

The Idea 💡
Remember MySpace? Customizable profiles, glitter text, Top 8 friends, and auto-playing music? I missed that era of the internet where your profile actually had personality.

So I asked myself: "What if MySpace came back from the dead?"

The answer: A gothic horror social experience powered by modern AI, where profiles are literally alive with ghost companions, dynamic themes, and interactive features.

What It Does 🎃
Core Features:
AI-Powered Bios - Groq's Mixtral generates horror-themed bios in 0.5 seconds (10x faster than GPT-4!)
4 Gothic Themes - Vampire Night, Haunted Mansion, Neon Nightmare, Zombie Apocalypse
Dynamic Mood Engine - Profiles change themes based on time of day (vampiric at night, ghostly at dawn)
AI Ghost Chatbot - Each profile has an interactive companion with unique personalities
Cemetery Board - Visitors leave anonymous spooky notes that float like spirits
Horror Story Generator - AI creates dark biographies, prophecies, and creepypasta
Retro Music Player - Auto-playing spooky tracks, just like 2005
The Tech Stack 🛠️
const techStack = {
frontend: "Next.js 14 + React + TypeScript + Tailwind",
backend: "Next.js API Routes + Supabase",
ai: "Groq Cloud (Mixtral 8x7B)",
database: "PostgreSQL with Row Level Security",
styling: "Custom gothic CSS with glitch effects",
development: "Kiro AI (game changer!)"
}
Building with Kiro 🤖
This project showcases what's possible when you pair a developer with Kiro AI:

Spec-Driven Development
Created detailed specs in .kiro/specs/profile-builder.yaml that guided the entire build:

components:

• ProfileBuilder: inputs: [username, profilePicture, themeSelector] actions: [generateBio, generateBackground, saveProfile]
• SpookyChatbot: personalities: [mischievous, evil-witch, lost-child, digital-demon] UI Style Guide Defined gothic aesthetic rules in .kiro/steering/ui-style.md:

Forbidden Patterns

❌ Modern minimalist design
❌ Bright, cheerful colors
❌ White backgrounds

Required UI Patterns

✅ Dark mode by default
✅ Neon glow effects
✅ Gothic borders and frames
✅ Animated hover states
Agent Hooks
Created automation in .kiro/hooks/regenerate-theme.js that auto-regenerates CSS when theme configs change.

Result: Built 10 major features in record time with consistent quality!

The Challenges 😅

1. OpenAI Billing Nightmare Hit billing limits during development. Solution: Migrated to Groq Cloud - 10x faster, 100% free tier, same quality!

// Before: OpenAI (slow, expensive)
const response = await openai.chat.completions.create({
model: 'gpt-4', // 3-5 seconds, $$$
});

// After: Groq (fast, free!)
const response = await groq.chat.completions.create({
model: 'mixtral-8x7b-32768', // 0.5 seconds, FREE! 🎉
});

1. Music Hotlinking Hell
   External music URLs kept returning 403 errors. Solution: Downloaded and self-hosted Kevin MacLeod's royalty-free tracks. 100% reliable now!

2. Database Security
   Supabase RLS blocked profile creation. Solution: Added proper INSERT policies:

CREATE POLICY "Anyone can create profiles"
ON profiles FOR INSERT
WITH CHECK (true);
The Cool Parts ✨

1. AI Mood Engine Profiles automatically change themes based on time:

export function calculateMood(timeOfDay: number): MoodState {
if (timeOfDay >= 0 && timeOfDay < 6) {
return { mood: 'vampiric', intensity: 90, effects: ['blood-moon'] };
}
// ... more moods
}

1. Ghost Chatbot Personalities Each ghost has a unique personality powered by AI:

const PERSONALITIES = {
'mischievous': 'You are Casper, a playful ghost who loves pranks...',
'evil-witch': 'You are Morgana, speaking in cryptic riddles...',
'lost-child': 'You are Emily, a sad ghost from the 1800s...',
'digital-demon': 'You are Glitch, a corrupted AI entity...'
};

1. Floating Cemetery Notes Visitor messages positioned randomly and animated:

const x = Math.floor(Math.random() * 70); // Random position
const y = Math.floor(Math.random() * 60);

// CSS animation
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
Performance Stats 📊
| Metric | Result | |--------|--------| | AI Response Time | 0.5-1 second ⚡ | | Database Queries | 200-1100ms | | Page Load | <1 second | | Lighthouse Score | 95+ | | AI Cost | $0 (Groq free tier) |

What I Learned 🎓
Groq is a Game-Changer - 10x faster than OpenAI, free tier, same quality. Why isn't everyone using this?

Self-Host Critical Assets - External resources fail. Hosting locally = 100% reliability.

Kiro AI Accelerates Development - Spec-driven development + steering docs + agent hooks = shipping features fast with consistent quality.

Nostalgia is Powerful - People LOVE retro aesthetics with modern functionality.

Interactive > Static - Chatbots, visitor notes, and dynamic themes make profiles feel alive.

What's Next 🚀
Profile Editing - Let users update their profiles
AI Photo Transformation - Turn avatars into vampires, zombies, ghosts
Profile Battle Mode - Users challenge each other, AI judges
Top 8 Friends - Classic MySpace feature
Mobile App - React Native version