Loading...
;
+ }
+
+ const handleConnect = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError('');
+ if (inputCode.trim()) {
+ try {
+ await linkPartner(inputCode.trim());
+ navigate('/swipe');
+ } catch (err: any) {
+ setError(err.message);
+ }
+ }
+ };
+
+ const copyCode = () => {
+ if (!user) return;
+ navigator.clipboard.writeText(user.code);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ };
+
+ const handleAuth = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError('');
+ try {
+ const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register';
+ const res = await fetch(endpoint, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ username, password })
+ });
+ const data = await res.json();
+ if (!res.ok) throw new Error(data.error);
+ login(data.token, data.user);
+ } catch (err: any) {
+ setError(err.message);
+ }
+ };
+
+ const handleAnonymous = async () => {
+ setError('');
+ try {
+ const res = await fetch('/api/auth/anonymous', { method: 'POST' });
+ const data = await res.json();
+ if (!res.ok) throw new Error(data.error);
+ login(data.token, data.user);
+ } catch (err: any) {
+ setError(err.message);
+ }
+ };
+
+ const handleSaveGenres = async () => {
+ if (selectedGenres.length === 0) {
+ setError('Please select at least one genre');
+ return;
+ }
+ await updateGenres(selectedGenres);
+ };
+
+ const toggleGenre = (id: number) => {
+ setSelectedGenres(prev =>
+ prev.includes(id) ? prev.filter(g => g !== id) : [...prev, id]
+ );
+ };
+
+ if (!user) {
+ return (
+
+
+ );
+ }
+
+ if (!user.genres) {
+ return (
+
+
+
+
+
+
+
+
+
+ CineMatch
+Find movies to watch together.
+
+
+
+
+
+
+
+
+ OR
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ {error &&
+
+ What do you like?
+Select a few genres to get better movie recommendations.
+{error}
} + +
+ {TMDB_GENRES.map(genre => (
+
+ ))}
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/pages/Matches.tsx b/frontend/src/pages/Matches.tsx
new file mode 100644
index 0000000..e450527
--- /dev/null
+++ b/frontend/src/pages/Matches.tsx
@@ -0,0 +1,100 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAppContext } from '../store/AppContext';
+import { Heart, CheckCircle2, Circle } from 'lucide-react';
+
+export const Matches: React.FC = () => {
+ const { user, matches, watchedMovies, markAsWatched, isLoading } = useAppContext();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (!isLoading && !user) {
+ navigate('/');
+ }
+ }, [user, isLoading, navigate]);
+
+ if (isLoading || !user) {
+ return
+
+
+
+
+ {user.partner_code ? (
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+ Connected!
+You are linked with partner: {user.partner_code}
+
+
+ )}
+
+
+
+
+
+
+
+ Share this code with your partner so they can connect with you.
+
+
+
+ {user.code}
+
+
+
+
+
+
+
+
+
+
+ OR
+
+ Loading...
;
+ }
+
+ if (matches.length === 0) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ No matches yet
+Keep swiping to find movies you both want to watch!
+
+
+ );
+};
diff --git a/frontend/src/pages/Swipe.tsx b/frontend/src/pages/Swipe.tsx
new file mode 100644
index 0000000..3290ff0
--- /dev/null
+++ b/frontend/src/pages/Swipe.tsx
@@ -0,0 +1,295 @@
+import React, { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion, useMotionValue, useTransform, AnimatePresence, animate } from 'framer-motion';
+import type { PanInfo } from 'framer-motion';
+import { Heart, X, Info } from 'lucide-react';
+import { useAppContext } from '../store/AppContext';
+import type { Movie } from '../store/AppContext';
+
+export interface SwipeCardRef {
+ swipe: (direction: 'left' | 'right') => Promise
+
+
+
+
+
+ {matches.length} Movies
+
+
+
+
+
+
+ {matches.length} Movies
+
+
+ {matches.map((movie) => {
+ const isWatched = watchedMovies.includes(movie.id);
+ const posterUrl = movie.poster_path
+ ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
+ : 'https://via.placeholder.com/500x750?text=No+Poster';
+ const year = movie.release_date ? movie.release_date.split('-')[0] : 'N/A';
+ const rating = movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A';
+
+ return (
+
+
+ 
+
+ );
+ })}
+
+
+
+
+
+ {movie.title}
+{year} • {rating}/10
+
+
+ {showInfo && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ {movie.title}
+{year} • {rating}/10
+ {movie.director && ( +{movie.director}
+ )} +
+ {movie.isPartnerLike && (
+
+
+
+ + {movie.overview} +
+ {movie.imdb_id && ( + + Open on IMDB + + )} +
+
+
+ );
+ }
+
+ return (
+
+
+ {newMatch && (
+
+
+
+
+ )}
+
+
+ );
+};
diff --git a/frontend/src/store/AppContext.tsx b/frontend/src/store/AppContext.tsx
new file mode 100644
index 0000000..66991d0
--- /dev/null
+++ b/frontend/src/store/AppContext.tsx
@@ -0,0 +1,317 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import type { ReactNode } from 'react';
+
+export interface User {
+ id: number;
+ username: string | null;
+ code: string;
+ partner_code: string | null;
+ genres: number[] | null;
+}
+
+export interface Movie {
+ id: number;
+ title: string;
+ poster_path: string;
+ overview: string;
+ release_date: string;
+ vote_average: number;
+ director?: string;
+ genres?: string[];
+ imdb_id?: string;
+ isPartnerLike?: boolean;
+}
+
+interface AppState {
+ user: User | null;
+ token: string | null;
+ login: (token: string, user: User) => void;
+ logout: () => void;
+ linkPartner: (code: string) => Promise
+
+ {activeMovie ? (
+
+
+ )}
+
+
+
+ {/* Controls */}
+
+
+ No more movies!
++ You've seen all the recommendations for now. Check back later for more! +
+ +
+
+
+
+
+ {/* Match Notification Overlay */}
+
+
+ + It's a Match! +
+
+ You and your partner both liked
+ {newMatch.title}
+
+ 
+
+ )}
+
+
+
+
+
+
+