An online restaurant where people order food and ask a chatbot about the menu. I built the storefront, the Stripe checkout, the accounts and an AI assistant that only answers from the restaurant's own documents.
01
A real food-ordering site, not just a pretty menu: browse, build a cart and pay safely, and get instant answers about the food without waiting on staff.
02
The whole thing: the Next.js storefront, cart and Stripe checkout, accounts with Google sign-in, an Express and MongoDB backend, and Bistro Bot, the AI assistant.
03
One platform that takes a customer from browsing to a paid order, with an assistant that answers from real sources instead of guessing.
Counted from the build
Each highlight says what it does for the people ordering, and how it works underneath.
01
Every dish has its photo, price and rating, sorted into six categories with a price filter. On the phone it's one tidy list with search and category chips.
For customers
See what's on, what it costs and add it in one tap.
Under the hood
TanStack Query fetches and caches the menu from the Express API and refreshes it in the background.
02
Bistro Bot answers questions about the food, from allergens to delivery areas. It only uses the restaurant's own documents, shows which one each answer came from, and says so when it doesn't know.
For customers
Ask "is this gluten-free?" and get a straight answer, any time.
Under the hood
Retrieval-augmented generation: LangChain and OpenAI, with the documents' chunks stored in MongoDB.
03
Cart, delivery details, payment. The order summary stays beside the form the whole way, and card payments go through Stripe.
For customers
Pay by card in a minute, and know exactly what you're paying for.
Under the hood
Stripe handles the card, so card details never touch our server. Forms are validated with React Hook Form and Zod.
04
After paying, the customer sees the order go from placed to paid to preparing, and a confirmation email lands with every item and the total.
For customers
No wondering if the order went through.
Under the hood
Stripe's payment confirmation moves the order from pending to paid; Resend and Nodemailer send the email.
05
One tap with Google, or an email and password. New accounts verify their email with a code, and a forgotten password can be reset.
For customers
Your orders and favourites, saved to your account.
Under the hood
JWT sessions, Google OAuth, and email verification and reset codes sent through the same email service.
Blistro isn't public, so these screens are rebuilt from the client's design. Dishes, prices, people and conversations are sample content; the food photos are real photographs from Unsplash.
Chatbots often make things up. Bistro Bot is built not to: it isn't allowed to answer from memory. It's like a waiter who checks the menu card before every answer: it looks up the restaurant's documents first, and only then replies.
Under the hood, LangChain splits the documents into small chunks and OpenAI turns each one into an embedding, stored in MongoDB. When a question comes in, the closest chunks are found and the answer is written from those alone.
The restaurant's documents go in
LangChain splits them; OpenAI embeds each chunk into MongoDB
A customer asks a question
The question is embedded the same way
The bot finds the right pages
The closest chunks are retrieved from MongoDB
It answers only from those
With sources; if nothing matches, it says it doesn't know
One data layer runs the menu, carts, orders and payments, so a customer goes from browsing to a paid order, while Bistro Bot answers instantly and only from real sources.
