WaifuBinge by O(1)

README.md

@@ -1,113 +1,63 @@
-# Development Sprint: 2-Hour Challenge
+### TEAM O(1) PRESENTS
+Youtube Link - https://youtu.be/gC7-w9ouBgg
+# WaifuBinge 🌸
 
-Welcome to the Development Sprint. In this 2-hour team-based event, you will build a fully functional, responsive, and visually appealing frontend application from scratch. 
+WaifuBinge is a modern, high-performance web application tailored for anime and manga enthusiasts. Explore top-ranked series, browse intricately categorized titles based on your current **Mood**, maintain personal watchlists/readlists, and seamlessly track live global leaderboards.
 
-This challenge evaluates your team's ability to rapidly prototype, effectively utilize a modern JavaScript/React ecosystem, and seamlessly integrate external APIs to build a compelling user interface.
+![Anime Discovery Engine](https://images.unsplash.com/photo-1578632767115-351597cf2477?w=1200&h=600&fit=crop)
 
-**Below are listed libraries and Public APIs you can use.**
-**You must only use the given libraries, however you can use additional APIs for more functionality.**
+## 🚀 Features
+- **Dynamic Mood-Driven Discovery:** Explore Anime and Manga based on customized moods equipped with tailored genres (Excited, Chill, Romantic, Scared, etc.).
+- **Live Jikan Integration:** Powered by the comprehensive Jikan V4 API to pull up-to-date data, scores, statistics, and synopses natively from MyAnimeList.
+- **Watchlist & Readlist Synchronization:** Manage your personalized favorite titles effortlessly with persisting data logic.
+- **Real-Time Leaderboards:** Dedicated slick sidebar leaderboards for Top Anime and Top Manga, showcasing trends and scores complete with collapsible UI.
+- **Micro-Animations & Smooth Polish:** Silky hover effects, dynamic drop-shadows matching icon colors, and loading skeletons ensure a highly premium UX.
 
-## 🏆 Judging Criteria
-
-Submissions will be evaluated on the following metrics:
-1. **Library Integration:** The quantity and quality of external libraries successfully implemented. We are looking for meaningful usage of these tools to solve frontend challenges.
-2. **Implementation & UX/UI:** The overall aesthetic, responsiveness, and usability of the application. Clean design and smooth user experiences will be highly rewarded.
-3. **Version Control:** Proper use of Git, including clear, descriptive commit messages and logical branching.
+---
 
-## 🚀 Submission Guidelines
+## 🛠️ Technology Stack & Libraries
 
-Please follow these steps carefully to ensure your project is evaluated:
+WaifuBinge is built utilizing a rapid, scalable, and ultra-modern frontend stack.
 
-1. **Fork** this repository.
-2. **Clone** your forked repository to your local machines.
-3. Create a new directory named after your team (e.g., `team-horizon` or `team-byte`).
-4. Initialize your project within this directory.
-5. **Showcase Video:** Record a 1-2 minute screen recording demonstrating your working project. Highlight the specific APIs and UI components you implemented.
-6. **Commit & Push:** Add your project files and the showcase video (`.mp4` or a hosted link in your project's README) to your directory.
-7. Open a **Pull Request (PR)** to this main repository before the 2-hour deadline.
+### Core Frameworks
+* **[React](https://react.dev/)**: Robust component-based UI architecture.
+* **[Vite](https://vitejs.dev/)**: Next-generation, lightning-fast frontend dev server and bundler.
 
-### Version Control Best Practices
-* Utilize feature branches for development (e.g., `feature/authentication`, `fix/layout-shift`).
-* Use conventional commit messages to maintain a clean history (e.g., `feat: added Recharts for data visualization` or `fix: resolved API CORS issue`).
+### Styling & Visuals
+* **[Tailwind CSS](https://tailwindcss.com/)**: Utility-first scalable styling structure driving custom theme configurations.
+* **[Framer Motion](https://www.framer.com/motion/)**: Production-ready animation library driving fluid element transitions, staggered reveals, and pulsing effects.
+* **[Lucide React](https://lucide.dev/)**: Scalable & cleanly responsive SVG Iconography natively matching theme colors and custom SVG glows.
 
----
+### UI Architecture
+* **[shadcn/ui](https://ui.shadcn.com/)**: Exquisite, beautifully designed accessible components like Badges, Skeletons, and dropdowns. 
+* **[Radix UI](https://www.radix-ui.com/)**: Unstyled, accessible component primitives empowering Shadcn.
 
-## 🛠️ Approved Libraries & Tools
-
-You are encouraged to utilize tools from the following categories to accelerate your development process and enhance your application's capabilities.
-
-### UI Components & Design Systems
-* **[shadcn/ui](https://ui.shadcn.com/)** - Beautifully designed, accessible components.
-* **[Chakra UI](https://chakra-ui.com/)** - Simple, modular, and accessible component library.
-* **[NextUI](https://nextui.org/)** - Fast and modern React UI library.
-* **[Radix UI](https://www.radix-ui.com/)** - Unstyled, accessible components for building design systems.
-* **[Mantine](https://mantine.dev/)** - A fully featured React components library.
-
-### Icons & Typography
-* **[Lucide React](https://lucide.dev/)** - Consistent, clean icon toolkit.
-* **[React Icons](https://react-icons.github.io/react-icons/)** - Comprehensive library of popular icon sets.
-* **[Heroicons](https://heroicons.com/)** - Hand-crafted SVG icons by the Tailwind CSS team.
-
-### Animation & 3D Graphics
-* **[Framer Motion](https://www.framer.com/motion/)** - Production-ready motion library for React.
-* **[AutoAnimate](https://auto-animate.formkit.com/)** - Zero-config, drop-in animations.
-* **[GSAP](https://gsap.com/)** - Advanced, professional-grade web animation.
-* **[Three.js](https://threejs.org/) & [@react-three/fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)** - Tools for building 3D scenes in React.
-
-### Data Fetching & State Management
-* **[React Query (TanStack Query)](https://tanstack.com/query/latest)** - Robust asynchronous state management.
-* **[Zustand](https://zustand-demo.pmnd.rs/)** - Fast, scalable, and minimalistic state management.
-* **[Axios](https://axios-http.com/)** - Promise-based HTTP client.
-
-### Forms, Validation & Editors
-* **[React Hook Form](https://react-hook-form.com/)** - Performant and flexible form handling.
-* **[Zod](https://zod.dev/)** - TypeScript-first schema validation.
-* **[TipTap](https://tiptap.dev/)** - Headless, highly extensible rich text editor.
-
-### Maps, Charts & Data Visualization
-* **[Recharts](https://recharts.org/)** - Composable charting library built on React components.
-* **[Chart.js](https://www.chartjs.org/) & [react-chartjs-2](https://react-chartjs-2.js.org/)** - Flexible JavaScript charting.
-* **[React Leaflet](https://react-leaflet.js.org/)** - Interactive maps integration for React.
-
-### Advanced Utilities
-* **[dnd-kit](https://dndkit.com/)** - Modern drag-and-drop toolkit for React.
-* **[date-fns](https://date-fns.org/)** - Comprehensive date utility library.
-* **[Wagmi](https://wagmi.sh/) & [viem](https://viem.sh/)** - React Hooks for Ethereum/Web3 integration.
-* **[Sonner](https://sonner.emilkowal.ski/)** - Opinionated toast notification component.
+### State & Data Management
+* **[Zustand](https://github.com/pmndrs/zustand)**: A small, shockingly fast, un-opinionated state-management solution used for tracking global Watchlist/Readlist states cross-page.
+* **[TanStack Query (React Query)](https://tanstack.com/query/latest)**: Powerful asynchronous state management handling massive Jikan API payloads, data caching, background fetching, and 10-minute stale timeouts.
+* **[Axios](https://axios-http.com/)**: Promise-based HTTP client streamlining all robust API requests.
+* **[React Router DOM](https://reactrouter.com/)**: Enabling seamless, flicker-free client-side navigation between Home, Manga, Details, and Config pages.
 
 ---
 
-## 📡 Public APIs
-
-You must integrate at least one of the following APIs to populate your application with dynamic data. 
+## 🤖 AI Development Assistance
 
-### Finance & Crypto
-* **[CoinGecko API](https://www.coingecko.com/en/api)**: Cryptocurrency data, live prices, and historical charts.
-* **[Alpha Vantage](https://www.alphavantage.co/)**: *(Free key required)* Real-time and historical stock market data.
+This extensive application's layout refactoring, dynamic component generation, complex visual UX fixes, and code generation were deeply pair-programmed alongside **Antigravity**.
 
-### E-commerce & Mock Data
-* **[DummyJSON](https://dummyjson.com/)**: Mock data for products, recipes, users, and carts.
-* **[Fake Store API](https://fakestoreapi.com/)**: E-commerce prototype data including products and categories.
-
-### Entertainment & Media
-* **[The Movie Database (TMDB) API](https://developer.themoviedb.org/docs)**: *(Free key required)* Comprehensive data on movies, TV shows, and cast members.
-* **[Spotify Web API](https://developer.spotify.com/documentation/web-api)**: *(Authentication required)* Metadata for artists, albums, and tracks.
-* **[PokeAPI](https://pokeapi.co/)**: Extensive Pokémon database.
-* **[Jikan API](https://jikan.moe/)**: Unofficial MyAnimeList API for anime and manga data.
-
-### Science & Geography
-* **[NASA Open APIs](https://api.nasa.gov/)**: *(Free key required)* Astronomy Picture of the Day, Mars Rover photos, and near-Earth object data.
-* **[REST Countries](https://restcountries.com/)**: RESTful API for global country data (population, demographics, flags).
-* **[OpenWeatherMap](https://openweathermap.org/api)**: *(Free key required)* Current weather data and forecasts.
-
-### Sports
-* **[TheSportsDB](https://www.thesportsdb.com/api.php)**: Crowd-sourced sports data, team information, and artwork.
-* **[balldontlie](https://www.balldontlie.io/)**: NBA statistics and game data.
+* **Antigravity** is a highly capable, autonomous Agentic Coding AI developed natively by the **Google Deepmind Team** focusing on Advanced Agentic Coding. Antigravity was leveraged extensively within this IDE to conceptualize designs, seamlessly refactor structural UI breakpoints dynamically cross-file, migrate code architectures smoothly (such as fully adapting anime-components natively for manga), and track precise UI logic (like reactive drop-shadow tracking).
 
 ---
 
-## ⚠️ Rules of Engagement
-
-* **No Pre-built Templates:** Utilizing standard initializers (like Vite, Create React App, or Next.js) is permitted. However, cloning a full boilerplate containing pre-built application features or routing architectures is strictly prohibited.
-* **AI Assistance:** AI tooling (e.g., GitHub Copilot, Gemini, ChatGPT) may be used for debugging, syntax, and scaffolding. The core architectural decisions and library integrations must remain your team's own work.
-* **Time Limits:** All Pull Requests must be opened before the 120-minute mark. Late submissions will be subject to point deductions.
+## 💻 Getting Started
+
+1. Clone the repository
+2. Navigate to the `WaifuBinge` directory
+3. Install dependencies:
+   ```bash
+   npm install
+   ```
+4. Run the development server:
+   ```bash
+   npm run dev
+   ```
+5. Open your browser and navigate to `http://localhost:5173/`

WaifuBinge/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?