An AI-powered restaurant discovery app that takes the stress out of deciding where to eat. Enter a cuisine or vibe and a location, and let the AI find your next dining spot.
Live Demo: wheretoeatcom.netlify.app Backend repo: WhereToEat-BE
- AI Suggestion - Powered by Google Places and an LLM (OpenAI gpt-4o-mini) to recommend real restaurants based on your input
- Free text input - describe what you're after (cuisine, vibe, type of food) and location in your own words
- Smart suggestions - never repeats a restaurant you've already been suggested, and learns from your favourites and visit history
- Find Another - reruns the search with the same inputs for a different suggestion
- Favourites - save restaurants you love, view and remove them anytime
- Last Visited - keep track of places you've been
- Google Maps link - open the suggested restaurant directly in Maps
- Authentication - secure register and login with JWT
- Personalised - your history and favourites are tied to your account
- Responsive design - mobile-friendly, dark gradient theme with glassmorphism cards
| Layer | Technology |
|---|---|
| Frontend Framework | React, TypeScript |
| Styling | Tailwind CSS |
| Animation | Framer Motion |
| Notifications | react-hot-toast |
| Backend | C# ASP.NET Core (see WhereToEat-BE) |
| Database | Supabase (PostgreSQL) |
| AI | OpenAI API (gpt-4o-mini) |
| Restaurant Data | Google Places API (New) |
| Auth | JWT |
| Deployment | Netlify (frontend) + Render (backend) |
- Node.js
- A running instance of the WhereToEat backend
git clone https://github.com/Michael-Tawil/WhereToEat.git
cd WhereToEat
npm installCreate a .env file in the root:
VITE_API_URL=https://your-backend-url.com
npm run devNavigate to http://localhost:5173 to view the app.
npm run buildUser enters cuisine/vibe + location
↓
React frontend calls C# API (with JWT)
↓
C# calls Google Places API → real restaurants nearby
↓
C# checks user's favourites, last visited, and suggestion history
C# calls OpenAI (gpt-4o-mini) → picks best match, returns reason
↓
Suggestion displayed with Google Maps link
↓
User can save to favourites, mark as visited, or get another suggestion
App.jsx- main layoutTopbar.jsx- logo + logoutSearchbar.jsx- free text inputs, triggers search via contextAIsuggest.jsx- displays suggestion, Visited / Find Another / Maps buttonsLvf.jsx- Last Visited + Favourites sectionsLoading.jsx- chopstick loading animationLoginPage.jsx- Framer Motion fill animation
context/SearchContext.jsx- shared search state (location, cuisine, suggestion, loading, handleSearch)context/AuthContext.jsx- JWT token, user, login, logout
utils/getCuisineImage.js- maps cuisine to a representative food photo
Michael Tawil