My Contacts
Telegram: t.me/nikandr_s
Email: nikandr.dev@gmail.com
Links from the video
Hamster Kombat Telegram Mini App Clone: github.com/nikandr-surkov/Ham...
TON Blockchain: ton.org/en
Blueprint Framework: github.com/ton-org/blueprint
Tonkeeper Wallet: tonkeeper.com/
In this guide, I'll show you how to create a Hamster Kombat Telegram mini app clone from scratch using Vite, TypeScript, and Tailwind CSS. This step-by-step tutorial will walk you through the entire process, from setting up the initial project to deploying the final app on Vercel and integrating the app as a Telegram mini app.
What You Will Learn:
- Setting up a Vite + TypeScript + Tailwind CSS project
- Designing the UI to match the Hamster Kombat style
- Implementing the clicker game logic to earn points
- Adding beautiful animations for an enhanced user experience
- Handling automatic points increase based on profit per hour
- Deploying the app to the internet using Vercel
- Integrating the app as a Telegram mini app
Key Steps Covered:
- Initial Setup: We start with an empty Vite project and add necessary icons and images for the Hamster Kombat app.
- Mobile Orientation: Adjust the project for a mobile view to better simulate the Telegram mini app experience.
- UI Design: Utilize Tailwind CSS to create a visually appealing interface, including a clickable hamster card, point counter, and various interactive elements.
- Game Logic: Implement the core functionality to allow users to earn points by clicking the hamster and through an auto points earning system.
- Animations: Add smooth animations to make the app engaging and fun to use.
- Deployment: Upload the project to GitHub and deploy it to the internet using Vercel for free.
- Telegram Integration: Create a Telegram mini app using the deployed web app, making it accessible directly within Telegram.
Who Should Watch:
- Aspiring Developers: Ideal for beginners looking to get hands-on experience with modern web development tools.
- Experienced Coders: A great resource for developers interested in creating engaging clicker games and integrating them with Telegram.
- Telegram Enthusiasts: Perfect for those wanting to learn how to create mini apps for Telegram.