where2eat

The Where2Eat Project Story

Inspiration

The idea for Where2Eat sparked from a common frustration: the endless debates with friends over where to eat. I’ve lost count of the times a group chat devolved into a chaotic ping-pong of suggestions, only to end with no decision—or worse, a compromise nobody liked. Inspired by collaborative decision-making tools and the rise of AI-driven personalization (e.g., recommendation systems like those on Netflix or Spotify), I wanted to create a solution that leverages technology to streamline this process. The vision was simple yet powerful: a platform where friends could input their dining preferences, and an AI would find the perfect compromise, saving time and reducing friction.

What I Learned

Building Where2Eat was a deep dive into full-stack development and AI integration. I gained hands-on experience with:

Next.js and React: Mastering client-side rendering and dynamic routing to create a seamless user experience. Supabase: Learning to manage a PostgreSQL database with real-time capabilities, including CRUD operations for sessions and responses. AI Integration: Exploring how to call external APIs (e.g., /api/smart-recc) to process preferences and generate recommendations, which taught me about JSON data handling and error management. Tailwind CSS: Developing a consistent, responsive design with a custom red-and-gray theme, enhancing my skills in utility-first styling.

A key lesson was the importance of user feedback loops. Initially, the AI recommendations were too generic, but iterative testing with mock data (e.g., simulating 5 friends with varying cuisines) helped refine the algorithm. I also learned about font consistency—ensuring Inter was applied globally required debugging CSS specificity, a challenge I hadn’t anticipated.

How I Built the Project

The development process followed an agile approach, broken into phases:

Setup and Planning:

Initialized a Next.js project with TypeScript for type safety. Configured Supabase for backend storage, creating sessions and responses tables with appropriate relationships.

Frontend Development:

Built the home page (Page.tsx) with a form to join sessions and a link to create new ones. Developed SessionPage with a JoinForm for preference input and a Summary component to display responses. Styled with Tailwind CSS, adopting a red theme (bg-red-600, border-red-200) and the Inter font for a professional look.

Backend Integration:

Implemented API routes (e.g., /api/sessions/[id]/responses) to fetch and store data. Integrated an AI recommendation endpoint (/api/smart-recc) to analyze preferences and suggest cuisines/restrictions. Used the Places API (/api/places) to fetch restaurant data based on AI output.

Features and Polish:

Added a copy session ID button with a 2-second "Copied!" feedback. Introduced an AI reasoning section with a purple theme to highlight its role. Implemented a delete button (🗑️ emoji) to remove sessions and responses, with confirmation.

The project deployed to Vercel, leveraging automatic scaling and a Git-based workflow. Math played a minor role, e.g., sorting restaurants by price level could be modeled as a minimization problem:[ \text{minimize} \sum_{i=1}^{n} (p_i - \bar{p})^2 ]where ( p_i ) is the price level of restaurant ( i ) and ( \bar{p} ) is the average preferred price level from responses.