🐣 CodePet - Your Coding Companion A digital pet that grows and evolves based on your coding habits! Track your coding sessions and watch your pet progress through different life stages. ✨ Features
5 Evolution Stages: From egg 🥚 to code master 🦅 XP & Leveling System: Gain experience points based on coding time and lines written Pet Care Mechanics: Feed and play with your pet to maintain health and happiness Visual Progress Tracking: See your pet's stats and evolution path in real-time Beautiful UI: Gradient backgrounds and smooth animations
🎮 How to Play
Log Coding Sessions: Enter the minutes you coded and optionally the lines of code written Gain XP: Each session earns XP (2 XP per minute + 0.5 XP per line of code) Level Up: Every 100 XP = 1 level. Your pet evolves at certain XP milestones Care for Your Pet:
🍎 Feed: Restores health and a bit of happiness 🎾 Play: Boosts happiness but uses a little health
Watch It Grow: Your pet evolves through 5 stages as you code more
🌱 Evolution Stages StageXP RequiredEmojiEgg0🥚Hatchling100🐣Juvenile300🐥Adult600🐦Code Master1000🦅 🚀 Setup & Installation This component was built for use in Claude's artifact system, but you can run it locally: Prerequisites
Node.js (v14 or higher) npm or yarn
Running Locally
Clone this repository
bashgit clone https://github.com/yourusername/codepet.git cd codepet
Install dependencies
bashnpm install react react-dom lucide-react
If using Create React App or Vite:
Copy CodePet.jsx into your src folder Import and use it in your App.js
For Tailwind CSS styling:
bashnpm install -D tailwindcss npx tailwindcss init 💡 Future Ideas
GitHub API integration for automatic activity tracking Streak tracking and rewards Multiple pet species to choose from Persistent storage (save your progress) Social features (compare pets with friends) Mobile app version
🤝 Contributing Feel free to fork this project and submit pull requests! Ideas for improvements:
Add new evolution stages Create different pet themes (dragons, plants, robots, etc.) Integrate with coding platforms (GitHub, GitLab, etc.) Add achievements and badges
📝 License MIT License - feel free to use this for personal or educational projects! 🎨 Built With
React Tailwind CSS Lucide React (icons)
Happy coding! Keep your pet healthy and watch it grow! 🌟