diff --git a/README.md b/README.md index c507d02c4..dcc690cb9 100644 --- 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)**