+ e.stopPropagation()}
+ >
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
new file mode 100644
index 0000000..6afe18a
--- /dev/null
+++ b/frontend/src/components/Layout.tsx
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { Outlet } from 'react-router-dom';
+import NavigationBar from './NavigationBar';
+
+export default function Layout({ children }: { children?: ReactNode }) {
+ return (
+ Comments
+ +
+ {/* NOTE: API to GET comments is not available in the spec. */}
+
+
+ {errors.content &&
+
+ Be the first to comment!
+(Viewing comments is not yet supported)
+{errors.content.message}
} +
+
+ {children ||
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/NavigationBar.tsx b/frontend/src/components/NavigationBar.tsx
new file mode 100644
index 0000000..072664c
--- /dev/null
+++ b/frontend/src/components/NavigationBar.tsx
@@ -0,0 +1,38 @@
+import { NavLink } from 'react-router-dom';
+import { Home, PlusSquare, User, CircleUser } from 'lucide-react';
+import { useAuth } from '../context/AuthContext';
+import { cn } from '../lib/utils';
+
+const navItems = [
+ { path: '/', icon: Home, label: 'Feed' },
+ { path: '/create', icon: PlusSquare, label: 'Create' },
+ { path: '/profile', icon: User, label: 'Profile' },
+];
+
+export default function NavigationBar() {
+ const { user } = useAuth();
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/PostCard.tsx b/frontend/src/components/PostCard.tsx
new file mode 100644
index 0000000..02b13fd
--- /dev/null
+++ b/frontend/src/components/PostCard.tsx
@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Heart, MessageCircle, Send, MoreHorizontal } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import { api, API_URL } from '../api';
+import { cn } from '../lib/utils';
+import type { Post } from '../types';
+import CommentSheet from './CommentSheet';
+
+interface PostCardProps {
+ post: Post;
+}
+
+export default function PostCard({ post }: PostCardProps) {
+ const queryClient = useQueryClient();
+ const [showCommentSheet, setShowCommentSheet] = useState(false);
+
+ const { mutate: toggleLike } = useMutation({
+ mutationFn: (isLiked: boolean) => {
+ const method = isLiked ? 'delete' : 'post';
+ return api[method](`/api/posts/${post.id}/like`);
+ },
+ onMutate: async (isLiked: boolean) => {
+ await queryClient.cancelQueries({ queryKey: ['posts'] });
+ const previousPosts = queryClient.getQueryData
+
+ {showCommentSheet && setShowCommentSheet(false)} />}
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/ProtectedRoute.tsx b/frontend/src/components/ProtectedRoute.tsx
new file mode 100644
index 0000000..e535b32
--- /dev/null
+++ b/frontend/src/components/ProtectedRoute.tsx
@@ -0,0 +1,16 @@
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function ProtectedRoute() {
+ const { isAuthenticated, isLoading } = useAuth();
+
+ if (isLoading) {
+ return
+ 
+ {post.user_info?.username}
+
+
+
+
+ {post.media_type === 'video' ? (
+
+ ) : (
+ 
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ {post.likes_count.toLocaleString()} likes
+ ++ {post.user_info?.username} + {post.caption} +
+ + + ++ {formatDistanceToNow(new Date(post.created_at), { addSuffix: true })} +
+Loading...
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/FeedPage.tsx b/frontend/src/pages/FeedPage.tsx
new file mode 100644
index 0000000..93985a5
--- /dev/null
+++ b/frontend/src/pages/FeedPage.tsx
@@ -0,0 +1,55 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../api';
+import type { Post } from '../types';
+import PostCard from '../components/PostCard';
+
+const fetchPosts = async (): PromiseCreate New Post
+ +
+
+
+
+ );
+ }
+
+ if (error) {
+ return Error fetching posts.
; + } + + return ( +
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..48929af
--- /dev/null
+++ b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,29 @@
+import { useAuth } from '../context/AuthContext';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function LoginPage() {
+ const { login, isAuthenticated } = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (isAuthenticated) {
+ navigate('/');
+ }
+ }, [isAuthenticated, navigate]);
+
+ return (
+ InstaClone
+
+ {posts && posts.length > 0 ? (
+ posts.map((post) =>
+ No posts yet. Be the first to share! ✨
+ )} +
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/MyProfilePage.tsx b/frontend/src/pages/MyProfilePage.tsx
new file mode 100644
index 0000000..2138759
--- /dev/null
+++ b/frontend/src/pages/MyProfilePage.tsx
@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export default function MyProfilePage() {
+ const { user, isAuthenticated, isLoading } = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (isLoading) {
+ return; // Wait until loading is complete
+ }
+
+ if (!isAuthenticated) {
+ navigate('/login', { replace: true });
+ } else if (user?.username) {
+ navigate(`/profile/${user.username}`, { replace: true });
+ }
+ // If user has no username for some reason, they will stay on a blank page.
+ // A better implementation would redirect to a 'complete your profile' page.
+
+ }, [user, isAuthenticated, isLoading, navigate]);
+
+ return (
+
+
+ InstaClone
+Share your moments with the world.
+ +
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
new file mode 100644
index 0000000..1d2cc12
--- /dev/null
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -0,0 +1,72 @@
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { api, API_URL } from '../api';
+import type { Post } from '../types';
+import { Image, Video } from 'lucide-react';
+
+interface ProfileData {
+ username: string;
+ posts: Post[];
+ // User details are not available from the specified API endpoint
+ bio?: string;
+ avatarUrl?: string;
+ postCount: number;
+}
+
+const fetchProfileData = async (username: string): PromiseLoading your profile...
+Loading profile...
;
+ if (error) return Error loading profile.
;
+ if (!profile) return User not found.
;
+
+ return (
+
+
+ 
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
new file mode 100644
index 0000000..f2be792
--- /dev/null
+++ b/frontend/src/pages/index.ts
@@ -0,0 +1,5 @@
+export { default as FeedPage } from './FeedPage';
+export { default as CreatePostPage } from './CreatePostPage';
+export { default as ProfilePage } from './ProfilePage';
+export { default as MyProfilePage } from './MyProfilePage';
+export { default as LoginPage } from './LoginPage';
\ No newline at end of file
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..b0bcf58
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,32 @@
+export interface Post {
+ id: string;
+ caption: string | null;
+ media_url: string;
+ media_type: string; // 'image' or 'video'
+ created_at: string;
+ user_email: string;
+ // Frontend-augmented fields
+ user_info?: {
+ username: string;
+ avatarUrl: string;
+ };
+ likes_count: number;
+ comments_count: number;
+ is_liked_by_user: boolean;
+}
+
+export interface Comment {
+ id: string;
+ content: string;
+ created_at: string;
+ user_email: string;
+ post_id: string;
+}
+
+export interface UserProfile {
+ email: string;
+ username: string;
+ bio: string | null;
+ profile_picture_url: string | null;
+ posts: Post[];
+}
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..c1bf77c
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,53 @@
+/** @type {import('tailwindcss').Config} */
+import typography from '@tailwindcss/typography';
+import animate from 'tailwindcss-animate';
+
+export default {
+ content: [
+ './pages/**/*.{ts,tsx}',
+ './components/**/*.{ts,tsx}',
+ './app/**/*.{ts,tsx}',
+ './src/**/*.{ts,tsx}',
+ ],
+ theme: {
+ extend: {
+ colors: {
+ primary: 'var(--primary)',
+ 'primary-active': 'var(--primary-active)',
+ ink: 'var(--ink)',
+ body: 'var(--body)',
+ muted: 'var(--muted)',
+ 'muted-soft': 'var(--muted-soft)',
+ hairline: 'var(--hairline)',
+ 'hairline-soft': 'var(--hairline-soft)',
+ canvas: 'var(--canvas)',
+ 'surface-soft': 'var(--surface-soft)',
+ 'on-primary': 'var(--on-primary)',
+ },
+ fontFamily: {
+ sans: ['Airbnb Cereal VF', 'Circular', 'sans-serif'],
+ },
+ borderRadius: {
+ sm: '8px',
+ lg: '24px',
+ xl: '32px',
+ full: '9999px',
+ },
+ keyframes: {
+ 'accordion-down': {
+ from: { height: '0' },
+ to: { height: 'var(--radix-accordion-content-height)' },
+ },
+ 'accordion-up': {
+ from: { height: 'var(--radix-accordion-content-height)' },
+ to: { height: '0' },
+ },
+ },
+ animation: {
+ 'accordion-down': 'accordion-down 0.2s ease-out',
+ 'accordion-up': 'accordion-up 0.2s ease-out',
+ },
+ },
+ },
+ plugins: [animate, typography],
+};
\ No newline at end of file
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..5cf9af8
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": [
+ "DOM",
+ "DOM.Iterable",
+ "ESNext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "strict": false,
+ "noImplicitAny": false,
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx"
+ },
+ "include": [
+ "src"
+ ]
+}
\ No newline at end of file
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000..ae189db
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts", "tailwind.config.js"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..691b1ee
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,27 @@
+
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { fileURLToPath } from 'url'
+import path from 'path'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ "react-query": "@tanstack/react-query",
+ },
+ },
+ build: {
+ rollupOptions: {
+ onwarn(warning, warn) {
+ if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('use client')) {
+ return;
+ }
+ warn(warning);
+ },
+ },
+ },
+})
{profile.username}
+{profile.bio}
+
+
+
+
+ {profile.postCount}
+posts
+
+ {profile.posts.map(post => (
+
+
+ )
+ {post.media_type === 'video' && (
+
+ )}
+
+ ))}
+ {profile.posts.length === 0 && No posts yet.
} +