Set Up Next.js 14 Telegram Mini App Clicker Game (FULL GUIDE)

Summary

In this guide, Nickander, a professional blockchain developer, walks you through setting up a Next.js project as a Telegram mini app. The tutorial covers connecting to a MongoDB database, linking a Telegram bot, deploying the app on Vercel, and utilizing it as a Telegram mini app. Using his clicker game project as an example, Nickander demonstrates how to manage environment variables, test and update the app, and synchronize changes between the app and database seamlessly. The video is a comprehensive, hands-on guide for developers looking to create a similar app.

Takeaways

• 🚀 The video provides a guide on how to set up a Next.js project as a Telegram mini-app, including MongoDB integration and deployment to Vercel.
• 🔐 It emphasizes the importance of using environment variables to securely store MongoDB URL and Telegram bot token information.
• 💻 The guide demonstrates creating a MongoDB database on mongodb.com and setting up a new cluster, database user, and collection for the app.
• 📝 In the Next.js project, the 'schema.prisma' file defines the database structure, and the Prisma ORM is used to interact with the database.
• 🎮 The example project is a full-stack Telegram clicker game, showcasing seamless synchronization between frontend actions and the MongoDB database.
• ⚙️ Testing is done locally first by setting the 'NEXT_PUBLIC_BYPASS_TELEGRAM_AUTH' variable to true, simulating the Telegram environment for development.
• 🔧 Key features of the app, like points accumulation and upgrades (multi-tab, energy, mine), are synchronized between the app and the database in real-time.
• 🌐 The app is designed to be fully responsive across all screen sizes, making it adaptable to various devices, especially mobile.
• 📦 The guide walks through the deployment of the project on Vercel, connecting the GitHub repository and setting up the necessary environment variables.
• 🛠️ Finally, the Telegram bot is created, linked with the app, and tested for real-world functionality, showing smooth updates in both the app and database.

Q & A

What is the primary purpose of the guide?

The guide aims to show how to set up a Next.js project as a Telegram mini app, connect it to a MongoDB database, and deploy it using Vercel.

What example project is used in the video?

The example used is the developer's 'Telegram mini app clicker game project,' a full-stack Next.js 14 project.

What are the key steps involved in setting up the Next.js Telegram mini app?

The key steps include creating environment variables, setting up a MongoDB database, linking it with a Telegram bot, and deploying the app on Vercel.

How is the MongoDB database set up?

The database is set up by signing up on MongoDB.com, creating a new cluster, setting up a user, and obtaining a connection string for the database.

Why is it important to keep MongoDB credentials secure?

Revealing MongoDB credentials can compromise the security of the database, making it vulnerable to unauthorized access.

How can you run the app locally before deploying it on Telegram?

The app can be run locally by setting a bypass variable in the .env file for testing purposes, allowing it to function outside of the Telegram ecosystem.

What role does Prisma play in this project?

Prisma is used to manage the database schema and generate client-side code for interacting with the MongoDB database.

What happens when points are earned in the clicker game?

When points are earned, the app seamlessly synchronizes with the server and reflects the changes in the MongoDB database in real time.

What pages are included in the clicker game mini app?

The app includes several pages: a clicker game page, a boost page, an earn page (with tasks), a friends page (for inviting others on Telegram), and an airdrop page for entering a TON wallet address.

How is the app deployed to Vercel?

The app is deployed by creating a GitHub repository, linking the repository to Vercel, setting environment variables (database URL and bot token), and deploying the app using Vercel's platform.