A conversational AI pizza-ordering bot built with React + Vite (frontend) and FastAPI (backend), powered by the OpenAI Chat Completions API. Built as a hands-on project after completing ChatGPT Prompt Engineering for Developers by DeepLearning.AI (Andrew Ng & Isa Fulford).
The bot greets the customer, takes their pizza order conversationally, confirms pickup vs. delivery, summarises the order, and collects payment — all driven by a carefully crafted system prompt.
https://github.com/prashantrathi8579/orderbot-react-fastapi/assets/demo.mp4
| Layer | Technology |
|---|---|
| Frontend | React 19 + Vite |
| Backend | FastAPI (Python) + Uvicorn |
| AI | OpenAI Chat Completions (gpt-3.5-turbo) |
| Styling | Plain CSS |
| Dev Tool | Claude Code (AI-assisted development) |
This project directly applies concepts from the "ChatGPT Prompt Engineering for Developers" course.
- Writing clear and specific instructions — the model does better when you eliminate ambiguity
- Using delimiters to separate instructions from input content
- Asking for structured outputs where the response needs to be programmatically usable
- Prompts rarely work perfectly on the first try — iterative refinement is the real skill
- Testing with varied inputs to understand model behaviour
- Using temperature settings to control creativity vs. determinism (this project uses
temperature=0for deterministic order-taking)
- Understanding the system / user / assistant message roles
- Maintaining conversation history across turns — the model is stateless, so the full history is sent on every request
- That is exactly how this app works: the frontend keeps the conversation array and POSTs it on every turn
| Pattern | Where Used |
|---|---|
| System-prompt persona | Defines OrderBot's tone and ordering flow |
| Menu grounding | Pricing and options are baked into the prompt |
| Output formatting | Bot summarises order in a structured way |
The course uses Python + OpenAI in Jupyter. I deliberately rebuilt this as a React + FastAPI full-stack app to:
- Deepen practical understanding by switching frameworks
- Verify the prompt-engineering concepts work outside the notebook
- Simulate a real-world full-stack AI app setup
orderbot-react-fastapi/
├── frontend/ # React + Vite app
│ ├── src/
│ │ ├── App.jsx # Chat UI and conversation state
│ │ ├── App.css
│ │ ├── main.jsx
│ │ └── index.css
│ ├── index.html
│ ├── vite.config.js
│ └── package.json
│
├── backend/ # FastAPI app
│ ├── main.py # /chat route + OpenAI integration
│ ├── requirements.txt
│ └── .env.example # Copy to .env and add your key
│
├── .gitignore
└── README.md
- Node.js >= 18
- Python >= 3.10
- An OpenAI API key
cd backend
# Create and activate virtual environment
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Create your .env file from the template
cp .env.example .env
# Then edit .env and set OPENAI_API_KEY=sk-...
# Start the FastAPI server (port 8000)
uvicorn main:app --reloadBackend runs at: http://localhost:8000
Swagger docs at: http://localhost:8000/docs
cd frontend
npm install
npm run devFrontend runs at: http://localhost:5173 (CORS is whitelisted for this origin in backend/main.py).
Create a .env file in the backend/ folder:
OPENAI_API_KEY=your_openai_api_key_here
⚠️ Never commit your.envfile. It is excluded via the repo's root.gitignore.
User types message
↓
React frontend POSTs /chat with the full message history
↓
FastAPI prepends the OrderBot system prompt and forwards to OpenAI
↓
OpenAI returns the assistant reply
↓
Backend returns { reply } to the frontend
↓
React appends the reply to history and re-renders
Key insight: conversation history lives on the frontend and is sent with every request, because the OpenAI Chat Completions API is stateless.
ChatGPT Prompt Engineering for Developers — DeepLearning.AI Instructors: Andrew Ng & Isa Fulford (OpenAI)
🏆 View my completion certificate
"A very crisp, clear and concise course. Though named ChatGPT Prompt Engineering, the explanations are effectively LLM-agnostic — you can swap the underlying model and compare outputs. The hands-on Jupyter notebooks with pre-configured LLM keys make experimentation frictionless." — Prashant Rathi
The course teaches prompt engineering in Python + Jupyter. I extended it by rebuilding the OrderBot exercise as a full-stack React + FastAPI app — a useful exercise for applying these concepts in production-like environments.
🔗 Read my full LinkedIn review of the course
The codebase was developed using Claude Code by Anthropic — an agentic AI coding tool. I guided it with requirements and architectural decisions while Claude Code produced the working implementation.
A practical demonstration of AI-assisted development — a core skill for modern engineering teams.
Prashant Rathi Senior Engineering Manager | Agentic AI Enthusiast 📍 Dubai, UAE
MIT License — feel free to use and adapt for your own learning.