Welcome to the fifth guide in the Make TON Telegram Mini App series! This project demonstrates how to connect a Telegram Mini App to a MongoDB database using Prisma ORM, and implement user creation functionality using Next.js 14 and TypeScript.
This Telegram Mini App showcases:
- Setting up a Next.js 14 project with TypeScript and Tailwind CSS
- Connecting to MongoDB using Prisma ORM
- Implementing user creation and retrieval
- Handling Telegram user data
- Managing user points system
- Basic error handling and data validation
- Node.js (version 14 or higher)
- npm (comes with Node.js)
- A Telegram account
- A Telegram Bot Token
- GitHub account
- Vercel account
- MongoDB database (You can use MongoDB Atlas for a free cloud-hosted option)
-
Clone the repository:
git clone https://github.com/nikandr-surkov/Make-TON-Telegram-Mini-App-5.git cd Make-TON-Telegram-Mini-App-5 -
Install dependencies:
npm install -
Set up your environment variables: Create a
.envfile in the root directory and add your MongoDB connection string:DATABASE_URL="your_mongodb_connection_string" -
Generate Prisma client:
npx prisma generate
As this is a Telegram Mini App, you can't see the result directly in development mode. Follow these steps to deploy and use the app:
- Push your code to a GitHub repository.
- Sign up for a Vercel account if you haven't already.
- Connect your GitHub repository to Vercel and deploy the app.
- Once deployed, Vercel will provide you with a URL for your app.
- Use this URL to set up your Telegram Mini App:
- Go to @BotFather on Telegram
- Send the command
/newappor choose to edit an existing bot - Follow the prompts to set up your Mini App, using the Vercel URL as the Web App URL
- Once set up, you can access your Mini App through Telegram on mobile devices or in the Web version of Telegram.
app/layout.tsx: Root layout component with Telegram Web App scriptapp/page.tsx: Main page component with user data handling and UIapp/api/user/route.ts: API route for user creation and retrievalapp/api/increase-points/route.ts: API route for increasing user pointsprisma/schema.prisma: Prisma schema defining the User modellib/prisma.ts: Prisma client initialization
- MongoDB connection using Prisma ORM
- User creation and retrieval based on Telegram data
- Points system for users
- Error handling for various scenarios
- Responsive design with Tailwind CSS
For video tutorials and more in-depth explanations, check out my YouTube channel: Nikandr Surkov
Stay tuned for the next guide in the Make TON Telegram Mini App series, where we'll explore more advanced features and deeper integrations with the Telegram platform!"# uesr" "# user1" "# rafed23" "# rafed23" "# rafed"