Telegram Mini App 💎

A modern Telegram Mini App built with React, TypeScript, and Vite. This gaming application features a mining system, task management, shop functionality, friend referrals, and a wheel of fortune game.

🚀 Features

• Mining System: Tap-to-earn gameplay with level progression
• Task Management: Complete tasks to earn rewards
• Shop: Purchase upgrades and premium items
• Friends System: Invite friends and earn referral bonuses
• Wheel of Fortune: Spin to win prizes and rewards
• Real-time Updates: Synchronized coin balance and progress tracking
• Responsive Design: Optimized for mobile devices within Telegram

🛠️ Tech Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS + CSS Modules
• Routing: TanStack Router
• State Management: Redux Toolkit + React Query
• UI Components: Radix UI + Custom Components
• Animations: Framer Motion
• Icons: Lucide React + Iconsax React
• Carousels: Swiper.js
• Package Manager: PNPM

📦 Installation

1. Clone the repository

   git clone https://github.com/Pouria-Hjt/telegram-miniapp.git
   cd telegram-miniapp

2. Install dependencies

   pnpm install

3. Start development server

   pnpm dev

4. Build for production

   pnpm build

🏗️ Project Structure

src/
├── @types/           # TypeScript type definitions
├── assets/           # Static assets and icons
├── components/       # Reusable UI components
│   ├── ui/          # Base UI components (Button, Drawer, etc.)
│   ├── Cards/       # Card components
│   ├── Drawers/     # Modal/drawer components
│   └── ...
├── constants/        # Application constants and URLs
├── features/         # Feature-based components
├── hooks/           # Custom React hooks
├── providers/       # Context providers
├── routes/          # Application routes
├── utils/           # Utility functions
└── views/           # Page components

🎮 Game Features

Mining System

• Interactive tap-to-mine gameplay
• Progressive level system with rewards
• Energy/stamina management
• Real-time coin balance updates

Task System

• Daily and special tasks
• Progress tracking
• Reward distribution
• Task completion validation

Shop System

• Purchasable upgrades
• Premium items
• Inventory management
• Transaction history

Social Features

• Friend referral system
• Leaderboards
• Social sharing
• Bonus rewards for invitations

🔧 Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm preview - Preview production build
• pnpm lint - Run ESLint

🌐 Deployment

This project is configured for deployment on various platforms:

1. Vercel/Netlify: Auto-deploy from GitHub
2. Custom Server: Build and serve static files
3. Telegram Bot: Integrate with Telegram Bot API

📱 Telegram Integration

The app utilizes Telegram's Web App API for:

• User authentication
• Profile information access
• Native UI integration
• Payment processing (if applicable)
• Haptic feedback
• Theme adaptation

🎨 UI/UX Features

• Responsive Design: Mobile-first approach
• Dark/Light Theme: Adapts to Telegram theme
• Smooth Animations: Framer Motion powered transitions
• Toast Notifications: Real-time feedback
• Loading States: Enhanced user experience
• Haptic Feedback: Native mobile feel

🔐 Security & Performance

• TypeScript for type safety
• ESLint for code quality
• Optimized bundle size with Vite
• Lazy loading for routes
• React Query for efficient data fetching
• Proper error boundaries

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🐛 Bug Reports & Feature Requests

Please use the GitHub Issues to report bugs or request features.

📞 Support

For support, please contact the development team or create an issue in the repository.

---

Made with ❤️ for the Telegram ecosystem