Vedant1703 · SiddharthRoutula-design · Apr 4, 2026
diff --git a/README.md b/README.md
@@ -1,113 +1,75 @@
-# Development Sprint: 2-Hour Challenge
+Coffee&Code
+https://youtu.be/Zl72hXsj-_s
+# 🚀 AnimeStake  
+**Stake Crypto → Power Up Your Favorite Anime Characters**
 
-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. 
+AnimeStake is a fun, visually engaging Web3 dApp where users stake tokens on anime characters and watch them level up in real-time with stunning animations.
 
-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.
-
-**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.**
-
-## 🏆 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
-
-Please follow these steps carefully to ensure your project is evaluated:
-
-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.
-
-### 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`).
-
----
-
-## 🛠️ 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.
+Built for high-impact demos and fast dev sprints ⚡
 
 ---
 
-## 📡 Public APIs
-
-You must integrate at least one of the following APIs to populate your application with dynamic data. 
+## 🎯 Concept
 
-### 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.
+AnimeStake combines **Web3 staking mechanics** with **anime fandom**.
 
-### 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.
+- Connect your wallet  
+- Stake tokens on your favorite characters  
+- Watch their **Power Level increase dynamically**  
+- See characters evolve visually with animations  
 
-### 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.
+💡 The more you stake → the stronger they become
 
-### 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.
+## ✨ Features
+
+### 🔐 Wallet Integration
+- Connect wallet using **Wagmi + Viem**
+- Supports quick authentication & transaction simulation
+
+### 🧑‍🎤 Character Gallery
+- Fetches real anime character data from Jikan API
+- Displays:
+  - Character image  
+  - Name  
+  - Current Power Level  
+  - Stake button  
+
+### 💰 Staking System
+- Stake **BRICK tokens (or mock ETH)**  
+- Simple modal to input stake amount  
+- Simulated on-chain interaction  
+
+### ⚡ Live Level-Up Animations
+- Smooth animations using **Framer Motion**
+- Effects include:
+  - Scaling cards  
+  - Glow effects  
+  - Particle-like visuals  
+
+### 📊 Portfolio Dashboard
+- View characters you've staked on  
+- Track total power contribution  
+
+We used Lovable, ChatGPT and ClaudeAI for the website.
+
+## 🛠️ Tech Stack
+
+| Category        | Tech |
+|----------------|------|
+| Frontend       | React + Vite |
+| Styling        | Tailwind CSS |
+| UI Components  | shadcn/ui / NextUI |
+| Web3           | Wagmi + Viem |
+| Animations     | Framer Motion |
+| API            | Jikan API |
+| Notifications  | Sonner |
+| Icons          | Lucide React |
+| Charts (opt)   | Recharts |
 
 ---
 
-## ⚠️ Rules of Engagement
+## 🌐 API Used
 
-* **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.
+- **Jikan API (MyAnimeList unofficial)**