A fast and responsive Burger King chatbot web clone built using Next.js. This project replicates a real-world food ordering experience via Telegram-style bot interaction, enabling users to browse menus, place orders, and make payments seamlessly.
If you found this project useful, please consider giving it a ⭐️ to show your support and help others discover it!
# 1. Clone the repo
git clone https://github.com/ErManoj-Sharma/DurgerKingbot
cd DurgerKingbot
# 2. Install dependencies
npm install
# 3. Add your environment variables
cp .env.example .env.local
# Fill in values for Telegram bot token, Razorpay/Stripe keys, etc.
# 4. Run the development server
npm run dev- go to @botfather in telegram
- give command
/mybots. - select your desired bot or if you dont have any bot then create a new bot by command
/newbot. - after selecting bot click on
bot settingoption. - click on
menu button - pass url of your web app.
- give title to menu button.
- again back to bot settings and click on
configure mini app. - click on
enable mini appand give url to it - if you don't have url right now then don't worry , while running dev server use ngrok to get and
httpsurl and pass url to here. - each time you stop ngrok and restart it , ngrok will genrate new url so repeat step 5-9 when you stop ngrok server
// put this script in head of next app inside rootlayout.js
<script src="https://telegram.org/js/telegram-web-app.js"></script># at root of project create .env.local
RAZORPAY_KEY="XXXXXXXXXXXXXX"
RAZORPAY_SECRET="XXXXXXXXXXXXXXX"
TELEGRAM_BOT_TOKEN="XXXXXXXXXXX"Next doesn't allow to call api directly by frontend so use this way
- make a dir
src/pages/api/<apiService.js> - here a make a api handler
- make a serivce to call api at
src/services/<Apicallservice>.js - if you are using redux for state management then you can invoke this service in Slice as well to store api response in store
- whenever you add any new api endpoint,
restartthe server else it doesn't run properly
next doen't allow directly to wrap html dom so use this way
- create a
ProviderWrapper"use client"; import { Provider } from "react-redux"; import { store } from "@/Store/Store"; export default function ProviderWrapper({ children }) { return <Provider store={store}>{children}</Provider>; }
- now wrap dom in this wrapper
export default function RootLayout({ children }) { return ( <html lang="en"> <head> <script src="https://telegram.org/js/telegram-web-app.js"></script> </head> <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}> <ProviderWrapper> {children} </ProviderWrapper> </body> </html> ); }
if you use payment gateway then it will redirect to callback url , at callback url data of localstorage, sessionstorage and redux store is wiped up.
so pass the necessary and reqiured info in callback url as searchparams and at callback url page use api to retrive data