{/* Logo */}
🍴 Munch Match
{/* Navigation */}
{currentPage === "swipe" && (
Munch Match
```
### src/components/SwipeCard.jsx
```javascript
import React from "react";
export default function SwipeCard({ restaurant }) {
return (
);
}
```
### src/styles/globals.css
```css
body {
font-family: system-ui, sans-serif;
background-color: #fefefe;
margin: 0;
text-align: center;
}
.swipe-card {
width: 300px;
margin: 20px auto;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.swipe-card img {
width: 100%;
height: 250px;
object-fit: cover;
}
.card-info {
padding: 12px;
}
.buttons button {
margin: 10px;
font-size: 20px;
cursor: pointer;
}
```
### src/services/supabase.js
```javascript
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = "https://ssodzocvvyhzhuisaqtg.supabase.co";
const supabaseKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNzb2R6b2N2dnloemh1aXNhcXRnIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjEzNTEwMDAsImV4cCI6MjA3NjkyNzAwMH0.WXRufKrFgt4kLqPzpKPx4w44cO0IsxFu6xtdLDQELHw";
export const supabase = createClient(supabaseUrl, supabaseKey);
// Sign up
export const signUp = async (email, password) =>
await supabase.auth.signUp({ email, password });
// Sign in
export const signIn = async (email, password) =>
await supabase.auth.signInWithPassword({ email, password });
// Get current user
export const getUser = () => supabase.auth.getUser();
```
### src/pages/Home.jsx
```javascript
import React, { useEffect, useState } from "react";
import { fetchRestaurants } from "../services/yelpService";
import CardStack from "../components/CardStack";
import MapView from "../components/MapView";
export default function Home() {
const [restaurants, setRestaurants] = useState([]);
const [current, setCurrent] = useState(0);
useEffect(() => {
fetchRestaurants("San Francisco").then(setRestaurants);
}, []);
const currentRestaurant = restaurants[current];
return (
setCurrent(i => i + 1)} />
{currentRestaurant && (
);
}
```
### src/components/Login.jsx
```javascript
import React, { useState } from "react";
import { supabase } from "../services/supabase";
import "../styles/Login.css";
export default function Login({ onLogin }) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
const [isSignUp, setIsSignUp] = useState(false);
// Helper: ensure user exists in custom table
const ensureUserInTable = async (user) => {
if (!user) return;
const { error } = await supabase
.from("users")
.upsert([{ id: user.id, email: user.email }], { onConflict: ["id"] });
if (error) console.error("Failed to insert/update user:", error.message);
};
// Sign up new user
const handleSignUp = async () => {
setLoading(true);
try {
// First, check if user already exists in custom users table
const { data: existingUsers, error: checkError } = await supabase
.from("users")
.select("*")
.eq("email", email);
if (checkError) throw checkError;
if (existingUsers && existingUsers.length > 0) {
// User already exists — try signing them in instead
alert("User already exists, signing you in...");
setLoading(false);
return await handleSignIn(); // Call sign-in instead of creating duplicate
}
// Proceed with Supabase Auth signup
const { data, error } = await supabase.auth.signUp({ email, password });
if (error) throw error;
const user = data.user;
if (!user) throw new Error("User creation failed");
// Insert into users table for foreign key use
await ensureUserInTable(user);
onLogin(user.id);
} catch (err) {
alert("Sign-up failed: " + err.message);
} finally {
setLoading(false);
}
};
// Sign in existing user
const handleSignIn = async () => {
setLoading(true);
try {
const { data, error } = await supabase.auth.signInWithPassword({ email, password });
if (error) throw error;
const user = data.user;
if (!user) throw new Error("Sign-in failed");
await ensureUserInTable(user);
onLogin(user.id);
} catch (err) {
alert("Sign-in failed: " + err.message);
} finally {
setLoading(false);
}
};
const handleAuth = async () => {
if (isSignUp) {
await handleSignUp();
} else {
await handleSignIn();
}
};
return (
{restaurant.name}
{restaurant.rating} ⭐ • {restaurant.price || "$$"} • {restaurant.location.city}
🍴 Munch Match
{/* Floating kitchen utensil icons */}
);
}
```
[6 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]🍴
🥄
🍴
🥄
🍴
🥄
🍴
🥄
Munch Match
{isSignUp ? "Create your account" : "Sign in to start swiping"}
setEmail(e.target.value)}
className="login-input"
disabled={loading}
/>
setPassword(e.target.value)}
className="login-input"
disabled={loading}
/>
or
{isSignUp ? "Already have an account?" : "Don't have an account?"}