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

Emmanuel Ogheneovo — Tue, 25 Nov 2025 08:57:48 +0000

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 😅

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! 🎉
});

Music Hotlinking Hell
External music URLs kept returning 403 errors. Solution: Downloaded and self-hosted Kevin MacLeod's royalty-free tracks. 100% reliable now!
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 ✨

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
}

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...'
};

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

How I Built TutorBot with Kiro: An AI-Powered Study Tool for Students and Self-Learners

Emmanuel Ogheneovo — Wed, 16 Jul 2025 22:51:34 +0000

I Built TutorBot with Kiro: An AI-Powered Study Tool for Students and Self-Learners
Participating in the Kiro Hackathon pushed me to take AI-enhanced learning seriously — and build something real. What came out of it was TutorBot, a personalized AI tutor that helps anyone learn anything through lessons, quizzes, flashcards, and summaries — all generated by AI.

In this blog post, I’ll walk you through how Kiro helped me build this app smarter and faster — and how you can do it too.

What Is TutorBot?
TutorBot is a full-stack educational web app that lets users:

Type any topic (e.g. React Hooks, Photosynthesis)

Get back:

AI-generated interactive lessons

Quizzes (MCQs and short answers)

Flashcards

PDF summaries for offline learning

Multiple export formats (CSV, Anki, JSON)

It’s perfect for students, bootcampers, or lifelong learners.

How Kiro Changed My Development Approach
Kiro made a huge difference in how I structured my code and shipped faster:

Spec-Driven Development
I used Kiro’s .kiro/specs/ to define my API behavior clearly before writing a single line of backend code. This helped me stay consistent and avoid messy endpoints.

Agent Hooks
Kiro’s agent hooks automated things I usually waste time on:

Auto PDF generation from lesson content

Flashcard exporting to multiple formats

Unit test generation for my API routes

Steering Rules
I enforced clean TypeScript practices using Kiro’s .kiro/steering/ — it kept my components modular and well-documented.

📄 Backend Spec
Kiro helped me define and validate JSON responses from OpenAI, avoiding broken data or confusing bugs during development.

Kiro: Agent hooks, specs, and structured AI development
github:"https://github.com/Emmy123222/Tutor"

DEV Community: Emmanuel Ogheneovo

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

Forbidden Patterns

Required UI Patterns

How I Built TutorBot with Kiro: An AI-Powered Study Tool for Students and Self-Learners