A fully-featured, production-ready web application for tracking movies, TV shows, and anime with glassmorphism design, smooth animations, and comprehensive features.
- Home - Profile, recommendations, watchlist
- Details - Full anime/movie information with characters & relations
- Search - Advanced filters (genre, format, status, year)
- Lists - Watchlist, Watching, Completed, Dropped, Planning
- Statistics - Charts, achievements, activity feed
- Friends - Social features, friend requests, search
- Profile - Edit profile, settings, privacy controls
- Authentication - Login/signup with social auth
- Glassmorphism UI - Frosted glass effects throughout
- Cursor-Following Animations - Dynamic gradient blobs
- Floating Particles - Atmospheric depth
- Smooth Transitions - Motion/Framer animations on every page
- Sidebar Navigation - Fixed icon-based navigation
- Bottom Navigation - Sticky category switcher
- Real Anime Data - Live from AniList GraphQL API
- Advanced Search - Multiple filters and sorting
- List Management - Grid/List views, progress tracking
- Social Features - Friends, requests, messaging
- Statistics Dashboard - Charts, graphs, achievements
- User Profiles - Customizable with settings
- ✅ 12 Pages - All fully implemented and connected
- ✅ AniList Integration - Real anime data working
- ✅ Routing - React Router with all pages
- ✅ Navigation - Sidebar + bottom nav
- ✅ Animations - Smooth transitions everywhere
- ✅ Supabase - Backend connected and ready
- ⏳ TMDB - Ready (just needs API key)
| Page | Route | Description |
|---|---|---|
| 🏠 Home | / |
Profile, recommendations, watchlist, currently watching |
| 📺 Details | /:type/:id |
Full info, characters, relations, stats |
| 🔍 Search | /search |
Advanced search with multiple filters |
| 📊 Stats | /stats |
Charts, achievements, activity |
| 👥 Friends | /friends |
Social features, friend management |
| 👤 Profile | /profile |
Edit profile, settings, privacy |
| 🔐 Auth | /auth |
Login/signup with social options |
| Page | Route | Purpose |
|---|---|---|
| 📚 Watchlist | /list/watchlist |
Items to watch |
/list/watching |
Currently in progress | |
| ✅ Completed | /list/completed |
Finished items |
| ❌ Dropped | /list/dropped |
Stopped watching |
| 📅 Planning | /list/planning |
Plan to watch |
- React 18 + TypeScript - Modern UI with type safety
- React Router DOM v7 - Complete routing system
- Tailwind CSS v4 - Utility-first styling
- Motion (Framer Motion) v12 - Smooth animations
- TanStack Query v5 - Data fetching & caching
- Lucide React - Beautiful icons
- Supabase - Auth, database, edge functions
- AniList GraphQL - Live anime data ✅
- TMDB REST - Movies & TV (ready for key) ⏳
- Custom glassmorphism components
- Cursor-reactive backgrounds
- Floating particle system
- Sidebar navigation
- Bottom navigation bar
- Home 🏠 - Main dashboard
- Search 🔍 - Find anime, movies, shows
- Watchlist 📚 - Your saved items
- Statistics 📊 - View your stats
- Friends 👥 - Social features
- Profile 👤 - Edit settings
- Login 🔐 - Auth page
- Movies - Switch to movies
- Shows - Switch to TV shows
- Anime - Switch to anime
- Click any media card → View details
- Use search → Find specific titles
- Manage lists → Organize your collection
- Check stats → See your progress
- Add friends → Connect socially
- Go to Search page
- Type any anime name
- Click result to see full details
- See characters, relations, and more!
- Get free API key from TMDB
- Open Make settings
- Add:
TMDB_API_KEY - Real data loads automatically!
With Supabase connected, you can easily add:
- User Authentication - Sign up/login with email or OAuth
- Persistent Watchlists - Save watchlists across sessions
- Progress Syncing - Track episode/movie progress
- Social Features - Friends, sharing, recommendations
- Custom Lists - Create themed collections
src/
├── app/
│ ├── components/ # Reusable components
│ │ ├── CursorBackground.tsx # Mouse-following effect
│ │ ├── CursorGlow.tsx # Cursor glow
│ │ ├── FloatingParticles.tsx # Ambient particles
│ │ ├── GlassCard.tsx # Glassmorphism wrapper
│ │ ├── MediaCard.tsx # Media item card
│ │ ├── BottomNav.tsx # Category navigation
│ │ └── Sidebar.tsx # Main navigation
│ │
│ ├── pages/ # All page components
│ │ ├── HomePage.tsx # Main dashboard
│ │ ├── DetailsPage.tsx # Anime/Movie details
│ │ ├── SearchPage.tsx # Search with filters
│ │ ├── ListPage.tsx # List management
│ │ ├── StatsPage.tsx # Statistics dashboard
│ │ ├── FriendsPage.tsx # Social features
│ │ ├── ProfilePage.tsx # Profile & settings
│ │ └── AuthPage.tsx # Login/Signup
│ │
│ ├── hooks/ # Custom React hooks
│ │ └── useMediaData.ts # Data fetching
│ │
│ ├── services/ # API integrations
│ │ ├── anilist.ts # AniList GraphQL
│ │ ├── tmdb.ts # TMDB REST
│ │ ├── details.ts # Detail fetching
│ │ └── api.ts # Server API
│ │
│ ├── data/ # Types & mock data
│ │ └── mockData.ts # Fallback data
│ │
│ └── App.tsx # Main app + routing
│
├── supabase/ # Backend
│ └── functions/server/
│ ├── index.tsx # Server entry
│ ├── routes.tsx # API routes
│ └── kv_store.tsx # Database
│
├── imports/ # Figma assets
└── styles/ # Global CSS
- Banner image from Your Name (Makoto Shinkai)
- Glassmorphism design inspired by modern UI trends
- Color scheme: Purple gradient (#8A38F5, #7A23BC)
- Fonts: Cabin, Cabin Condensed
- This is a Figma Make project
- Do not run build commands manually
- Changes are reflected automatically in the preview
- Backend deployment happens through Make settings
Created with Figma Make - Feel free to customize and extend!