✨ Live Site ✨
A modern digital studio platform with AI integration, esports streaming, and interactive content
ABC Studios is a comprehensive digital production platform that combines modern web technologies with AI-powered features, esports integration, and responsive design principles to create an engaging and accessible user experience.
| Category | Technologies |
|---|---|
| 🖥️ Frontend | Next.js 14, React 19, TypeScript |
| ✨ Animations | GSAP, Framer Motion |
| 🎨 Styling | TailwindCSS, CSS Modules, CSS Variables |
| 🗄️ Backend | Supabase (PostgreSQL), REST API, Server Actions |
| 🔒 Authentication | Basic Auth, Environment Variables, Middleware |
| 🔌 External APIs | YouTube Data API v3, GROQ API, Google Maps API |
| 🤖 AI/ML | Llama3 70B parameter model chatbot |
| 🛠️ Tooling | ESLint, TypeScript, npm, Git, Prettier |
| 🚀 Deployment | Vercel |
- Next.js 14 with App Router and React 19
- TypeScript for type safety
- Server and Client Components
- TailwindCSS with custom theming
- GSAP animations and Framer Motion transitions
- Responsive design across all devices
- Supabase (PostgreSQL) database
- Server actions for secure form submissions
- Optimized data fetching with SWR
- GROQ API for accessing Llama3 70B parameter model
- Intelligent chatbot with context-aware responses
- Advanced prompt engineering
- YouTube Data API for esports streaming
- Google Maps integration
- Fallback mechanisms for API limitations
- ARIA attributes and keyboard navigation
- Screen reader support and high contrast options
- Text size adjustment controls
- Image optimization with Next.js Image
- Code splitting and lazy loading
- Font optimization and asset compression
- Reduced API calls to avoid quota limitations
Desktop Performance
Mobile Performance
"We managed to attain "
"Design is not just what it looks like and feels like. Design is how it works." – Steve Jobs
- Dark-themed interface with vibrant accents
- Component-based architecture for maintainability
- Consistent visual language across all pages
- YouTube API quota restrictions
- Pre-defined fallback content for API limits
- Payment processing for tournament registration. (None of our teammates had pan card's to setup razorpay)
- Enhanced authentication for esports events
- Matchmaking system for participants
- Multi-language support
- Enhanced animations using Framer Motion
- Social media integration for content sharing
- YouTube Data API v3 - https://developers.google.com/youtube/v3
- GSAP (GreenSock Animation Platform) - https://gsap.com/
- Framer Motion - https://motion.dev/
- Tailwind CSS - https://tailwindcss.com/
- Next.js Documentation - https://nextjs.org/docs
- Supabase Documentation - https://supabase.com/docs
- React Documentation - https://react.dev/
- Lucide Icons - https://lucide.dev/
- GROQ API - https://groq.com/
- Google Maps API - https://developers.google.com/maps
- SWR Data Fetching - https://swr.vercel.app/
- Motion Accessibility Guidelines - https://motion.dev/docs/react-accessibility