Bytey

A gamified coding companion web app built with Next.js and TypeScript. Bytey is a UI template designed to transform your coding journey into an engaging experience, where a virtual pet grows as you code. This project serves as a foundation with a functional UI and minimal game logic, ready for further development to enhance features like trading, GitHub integration, and more.

Live Demo: Check out the deployed version at bytey.vercel.app

---

Badges

---

Table of Contents

• Features
• Screenshots
• Getting Started
• Usage
• Customization
• Project Structure
• Built With
• Dependencies
• Releases
• Current Limitations
• License
• Acknowledgments
• Contact
• Contributing
• Support

---

Features

• Gamified UI Template: A sleek, dark-mode-only interface for a virtual pet that grows with coding activity (basic logic implemented).
• Interactive UI: Pet interactions with animations powered by Framer Motion.
• Inventory System: Display and manage items like Energy Drink and Debug Potion (functional UI, minimal logic).
• Collectibles Gallery: Showcase collectibles with rarity tiers (UI only).
• Daily Tasks Panel: Task interface for future daily engagement features (UI only).
• Responsive Design: Optimized for mobile, tablet, and desktop devices.
• Modular Components: Reusable React components for easy extension.
• SEO Optimized: Built for search engine visibility.
• High Performance: Fast load times with Next.js rendering.

Note: The app currently focuses on UI with bare minimum game logic. Features like trading, GitHub integration, full pet evolution, and other functionalities are not yet implemented but can be built upon this template.

---

Screenshots

Feature	Screenshot
Game Interface
Inventory Panel
Collectibles Panel

---

Getting Started

Set up and run Bytey locally to explore or develop the template further.

Prerequisites

• Node.js: Version 18.0 or higher
• Package Manager: npm or yarn

Installation

1. Clone the Repository

   git clone https://github.com/VoxDroid/Bytey

2. Navigate to the Project Directory

   cd Bytey

3. Install Dependencies

   npm install
   # or
   yarn install

4. Start the Development Server

   npm run dev
   # or
   yarn dev

5. Open http://localhost:3000 in your browser to view Bytey.

---

Usage

Bytey is a UI-focused template with minimal functionality. You can interact with the pet, view inventory, and explore tabs like Collectibles and Tasks, but full game logic (e.g., trading, stat progression) requires further development.

Game Interface

• Purpose: Core UI where you see your pet and interact with inventory and tabs.
• How to Use: Check components/index.tsx for the main game layout and components/pet-visual.tsx for pet animations.

Inventory Panel

• Purpose: Displays items and collectibles with basic filtering.
• How to Use: Modify components/inventory-panel.tsx to extend item interactions.

Collectibles Panel

• Purpose: Shows collectibles with rarity and sorting options (UI only).
• How to Use: Update components/collectibles-panel.tsx to add functionality.

---

Customization

Extend Bytey’s template by tweaking styles or adding logic.

Changing Colors

Modify the dark-mode color scheme in tailwind.config.ts:

// tailwind.config.ts
const config = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "hsl(220, 80%, 60%)", // Customize here
          foreground: "hsl(220, 10%, 95%)",
        },
      },
    },
  },
};

Adjust CSS variables in app/globals.css:

:root {
  --primary: 220 80% 60%; /* Dark mode */
}

Updating Content

Edit these files to customize the UI:

• Game: components/index.tsx
• Inventory: components/inventory-panel.tsx
• Collectibles: components/collectibles-panel.tsx
• Daily Tasks: components/daily-tasks-panel.tsx
• Shop: components/shop-panel.tsx

Adding Collectibles

Add new collectibles to lib/pet-store.ts (or equivalent):

const collectibles = [
  {
    id: "new-item",
    name: "New Collectible",
    description: "A shiny new item.",
    image: "new-icon",
    value: 100,
    rarity: "rare",
    owned: false,
  },
];

Update components/collectibles-panel.tsx for new icons:

case "new-icon":
  return (
    <svg viewBox="0 0 24 24" className="w-12 h-12 text-white" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M12 2L2 22h20L12 2z" />
    </svg>
  );

Enhancing Animations

Tweak pet animations in components/pet-visual.tsx:

const animationVariants = {
  idle: { y: [0, -10, 0], transition: { duration: 2, repeat: Infinity } },
  bounce: { y: [0, -20, 0], transition: { duration: 0.5, repeat: 3 } },
};

---

Project Structure

Bytey/
├── app/                    # Next.js app directory
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout
│   └── page.tsx            # Home page
├── components/             # Reusable React components
│   ├── index.tsx           # Main game interface
│   ├── pet-visual.tsx      # Pet visualization
│   ├── status-bars.tsx     # Pet status bars
│   ├── action-buttons.tsx  # Interaction buttons
│   ├── inventory-panel.tsx # Inventory management
│   ├── collectibles-panel.tsx # Collectibles gallery
│   ├── daily-tasks-panel.tsx # Daily tasks
│   ├── shop-panel.tsx      # Shop interface
│   └── settings-panel.tsx  # Settings
├── lib/                    # Utilities and state management
│   └── pet-store.ts        # Zustand store for pet state
├── public/                 # Static assets
├── styles/                 # Additional CSS
├── tailwind.config.ts      # Tailwind CSS configuration
├── tsconfig.json           # TypeScript configuration
└── package.json            # Dependencies and scripts

---

Built With

• Next.js - React framework
• TypeScript - Typed JavaScript
• Tailwind CSS - Utility-first CSS
• Framer Motion - Animations
• Lucide Icons - Icon set
• Zustand - State management

---

Dependencies

Required packages (in package.json):

• next - Core framework
• react, react-dom - React libraries
• typescript - Type checking
• tailwindcss - Styling
• framer-motion - Animations
• @lucide/react - Icons
• zustand - State management

Install with:

npm install

---

Releases

• See the Releases page for updates.
• Currently a UI template; future releases may add full functionality.

---

Current Limitations

• Dark Mode Only: No light mode implemented.
• Minimal Functionality: Basic game logic (e.g., pet stats, inventory display) works, but features like trading, GitHub integration, and pet evolution are UI-only.
• Trading System: Not implemented; requires backend and logic development.
• Placeholder Data: Stats, coins, and items are static or minimally interactive.

This template is a starting point for developers to build a fully functional app.

---

License

Licensed under the MIT License.

---

Acknowledgments

• Lucide Icons - Icon library
• Framer Motion - Animations
• Tailwind CSS - Styling
• Next.js - Framework
• Zustand - State management

---

Contact

Questions or feedback? Reach out:

• GitHub: @VoxDroid
• Email: Contact via GitHub issues for now

---

Contributing

Contributions are welcome! Please read our Contributing Guide for details on how to contribute, and review our Code of Conduct to ensure a positive and inclusive community.

To contribute:

1. Fork the repository: https://github.com/VoxDroid/Bytey
2. Create a feature branch (git checkout -b feature-name)
3. Commit changes (git commit -m "Add feature")
4. Push to the branch (git push origin feature-name)
5. Open a pull request

---

Support

For support, please refer to our Support Guide. If you encounter security issues, please review our Security Policy.

If you find this project useful, consider supporting its development:

• Ko-fi: Buy me a coffee
  
• Star the Repository: Give it a star on GitHub
• Report Issues: Submit bugs or suggestions on the Issues page

---

Developed by VoxDroid
GitHub | Ko-fi