+
+ );
+};
+
+export default FavoritesRoute;
diff --git a/src/app/routes/home.tsx b/src/app/routes/home.tsx
new file mode 100644
index 00000000..2685bcd8
--- /dev/null
+++ b/src/app/routes/home.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import ImageGrid from '../../features/cat-images/components/image-grid';
+import { ImageModal } from '../../features/cat-images/components/image-modal';
+import { useCatById } from '../../features/cat-images/api/cats';
+import {
+ useAddFavorite,
+ useDeleteFavorite,
+ useFavorites,
+} from '../../features/cat-favorites/api/favorites';
+import { Favorite } from '../../types/api';
+
+const HomeRoute: React.FC = () => {
+ const navigate = useNavigate();
+ const { imageId } = useParams<{ imageId?: string }>();
+ const { data: cat } = useCatById(imageId);
+
+ const { data: favorites } = useFavorites();
+ const addFavorite = useAddFavorite();
+ const deleteFavorite = useDeleteFavorite();
+
+ const isFav =
+ favorites?.some((f: Favorite) => f.image_id === imageId) ?? false;
+
+ const favoriteId = favorites
+ ?.find((f: Favorite) => f.image_id === imageId)
+ ?.id.toString();
+
+ return (
+ <>
+ My Favorite Cats
+
+
+ );
+};
+
+export default NotFoundRoute;
diff --git a/src/app/routes/root.tsx b/src/app/routes/root.tsx
new file mode 100644
index 00000000..f2e4ea44
--- /dev/null
+++ b/src/app/routes/root.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { Navigation } from '../../components/layouts/navigation';
+
+export const ErrorBoundary = () => {
+ return 404 - Not Found
+Sorry, the page you are looking for does not exist.
++ You can return to the home page or check out our{' '} + favorites.{' '} +
+Something went wrong!
;
+};
+
+const AppRoot: React.FC = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default AppRoot;
diff --git a/src/components/errors/main-error.tsx b/src/components/errors/main-error.tsx
new file mode 100644
index 00000000..d7399dff
--- /dev/null
+++ b/src/components/errors/main-error.tsx
@@ -0,0 +1,14 @@
+const MainErrorFallback = () => {
+ return (
+
+
+ );
+};
+
+export default MainErrorFallback;
diff --git a/src/components/layouts/navigation.tsx b/src/components/layouts/navigation.tsx
new file mode 100644
index 00000000..e2becf7d
--- /dev/null
+++ b/src/components/layouts/navigation.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+export const Navigation: React.FC = () => {
+ return (
+
+
+ Something went wrong
++ Please try refreshing the page or come back later. +
+
+
+ Cat Lovers App
+ +Modal Content
+
+ {children}
+
+ );
+};
diff --git a/src/components/ui/icon-button.tsx b/src/components/ui/icon-button.tsx
new file mode 100644
index 00000000..6c999c20
--- /dev/null
+++ b/src/components/ui/icon-button.tsx
@@ -0,0 +1,18 @@
+interface IconButtonProps {
+ icon: React.ReactNode;
+ onClick?: (e: React.MouseEvent) => void;
+ className?: string;
+}
+
+export const IconButton = ({
+ icon,
+ onClick,
+ className = '',
+}: IconButtonProps) => (
+
+);
diff --git a/src/components/ui/image.tsx b/src/components/ui/image.tsx
new file mode 100644
index 00000000..71774bb8
--- /dev/null
+++ b/src/components/ui/image.tsx
@@ -0,0 +1,33 @@
+interface ImageProps {
+ src: string;
+ alt: string;
+ onClick?: () => void;
+ className?: string;
+ width?: number;
+ height?: number;
+}
+
+export const Image = ({
+ src,
+ alt,
+ onClick,
+ className = '',
+ width,
+ height,
+}: ImageProps) => (
+
+ 
+
+);
diff --git a/src/components/ui/info-item.tsx b/src/components/ui/info-item.tsx
new file mode 100644
index 00000000..91204d6c
--- /dev/null
+++ b/src/components/ui/info-item.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+interface InfoItemProps {
+ label: string;
+ value: ReactNode;
+}
+
+export const InfoItem = ({ label, value }: InfoItemProps) => {
+ return (
+
+ {label}
+ {value}
+
+ );
+};
diff --git a/src/components/ui/modal.tsx b/src/components/ui/modal.tsx
new file mode 100644
index 00000000..42ce02bf
--- /dev/null
+++ b/src/components/ui/modal.tsx
@@ -0,0 +1,68 @@
+import { ReactNode, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { IconButton } from './icon-button';
+import { X } from 'lucide-react';
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+
+interface ModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ children: ReactNode;
+ size?: ModalSize;
+ title?: string;
+}
+
+const sizeClasses: Record
+
,
+ portalRoot,
+ );
+};
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
new file mode 100644
index 00000000..ca359924
--- /dev/null
+++ b/src/components/ui/spinner.tsx
@@ -0,0 +1,19 @@
+interface SpinnerProps {
+ size?: 'sm' | 'md' | 'lg';
+ className?: string;
+}
+
+const sizeClasses = {
+ sm: 'h-4 w-4',
+ md: 'h-6 w-6',
+ lg: 'h-8 w-8',
+};
+
+export const Spinner = ({ size = 'md', className = '' }: SpinnerProps) => (
+ e.stopPropagation()}
+ >
+
+
+
+ {title}
+{children}
+
+ Loading...
+
+);
diff --git a/src/config/config.ts b/src/config/config.ts
new file mode 100644
index 00000000..613e266d
--- /dev/null
+++ b/src/config/config.ts
@@ -0,0 +1,2 @@
+export const API_KEY = import.meta.env.VITE_API_KEY;
+export const API_URL = import.meta.env.VITE_API_URL;
diff --git a/src/features/cat-breeds/api/breeds.ts b/src/features/cat-breeds/api/breeds.ts
new file mode 100644
index 00000000..6410e4b4
--- /dev/null
+++ b/src/features/cat-breeds/api/breeds.ts
@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+import { Breed, CatImage } from '../../../types/api';
+import { apiFetch } from '../../../lib/api-client';
+
+export const getBreeds = async (): Promise
+
+ );
+};
diff --git a/src/features/cat-breeds/components/breed-modal.tsx b/src/features/cat-breeds/components/breed-modal.tsx
new file mode 100644
index 00000000..d2fe8be0
--- /dev/null
+++ b/src/features/cat-breeds/components/breed-modal.tsx
@@ -0,0 +1,53 @@
+import { useNavigate } from 'react-router-dom';
+import { Image } from '../../../components/ui/image';
+import { Modal } from '../../../components/ui/modal';
+import { Spinner } from '../../../components/ui/spinner';
+import { Breed, CatImage } from '../../../types/api';
+import { useBreedImages } from '../api/breeds';
+import { BreedInfo } from './breed-info';
+
+type BreedModalProps = {
+ breed: Breed;
+ breedId?: string;
+ isOpen: boolean;
+ onClose: () => void;
+ onImageClick?: (image: CatImage) => void;
+};
+
+export const BreedModal = ({ breed, isOpen, onClose }: BreedModalProps) => {
+ const navigate = useNavigate();
+ const { data: images = [], isLoading } = useBreedImages(String(breed.id));
+
+ return (
+ {breed.name}
+{breed.description}
+ +
+ {traits.map(
+ (trait, index) =>
+ trait.value && (
+
+
+
+
+
+ Images
+ {isLoading ? ( +
+
+ ) : (
+
+ {images?.map((cat) => (
+ navigate(`/images/${cat.id}`)}
+ />
+ ))}
+
+ )}
+
+ {breeds.map((breed) => (
+ onBreedClick(String(breed.id))}
+ >
+
+ ))}
+
+ );
+};
diff --git a/src/features/cat-favorites/api/favorites.ts b/src/features/cat-favorites/api/favorites.ts
new file mode 100644
index 00000000..92d3974f
--- /dev/null
+++ b/src/features/cat-favorites/api/favorites.ts
@@ -0,0 +1,49 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { apiFetch } from '../../../lib/api-client';
+import { Favorite } from '../../../types/api';
+
+export const getFavorites = async (): Promise{breed.name}
+{breed.description}
+
+
+ );
+ }
+
+ if (isError) {
+ return (
+
+ Failed to load favorites
+
+ );
+ }
+
+ if (favorites?.length === 0) {
+ return (
+ You have no favorite cats yet.
+ );
+ }
+
+ return (
+
+
+ );
+};
diff --git a/src/features/cat-images/api/cats.ts b/src/features/cat-images/api/cats.ts
new file mode 100644
index 00000000..88666210
--- /dev/null
+++ b/src/features/cat-images/api/cats.ts
@@ -0,0 +1,35 @@
+import { apiFetch } from '../../../lib/api-client';
+import { CatImage } from '../../../types/api';
+
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+
+export const getRandomCats = async (
+ limit = 10,
+ pageParam = 0,
+): Promise
+ {favorites &&
+ favorites.map((fav: Favorite) => (
+
+
+ navigate(`/images/${fav.image_id}`)}
+ className="cursor-pointer rounded-lg"
+ />
+
+
+ ))}
+
+
+ );
+ }
+
+ if (error) return Error loading cats
;
+
+ const images = data?.pages.flatMap((page) => page);
+
+ return (
+
+
+ );
+};
+
+export default ImageGrid;
diff --git a/src/features/cat-images/components/image-modal.tsx b/src/features/cat-images/components/image-modal.tsx
new file mode 100644
index 00000000..c9f2d1e2
--- /dev/null
+++ b/src/features/cat-images/components/image-modal.tsx
@@ -0,0 +1,63 @@
+import { Copy } from 'lucide-react';
+import { Button } from '../../../components/ui/button';
+import { Image } from '../../../components/ui/image';
+import { Modal } from '../../../components/ui/modal';
+import { CatImage } from '../../../types/api';
+import { BreedInfo } from '../../cat-breeds/components/breed-info';
+
+type ImageModalProps = {
+ image: CatImage;
+ isOpen: boolean;
+ onClose: () => void;
+ isFavorite: boolean;
+ onToggleFavorite: () => void;
+};
+
+export const ImageModal = ({
+ image,
+ isOpen,
+ onClose,
+ isFavorite,
+ onToggleFavorite,
+}: ImageModalProps) => {
+ const copyLink = async () => {
+ try {
+ await navigator.clipboard.writeText(window.location.href);
+ alert('Link copied to clipboard!');
+ } catch (err) {
+ console.error('Failed to copy link to clipboard:', err);
+ alert('Failed to copy link. Your browser may not support this feature.');
+ }
+ };
+
+ if (!image) return null;
+
+ return (
+
+ {images?.map((cat) => (
+ onImageClick(cat.id) : undefined}
+ />
+ ))}
+
+
+ {hasNextPage && (
+
+
+
+ )}
+
+
+
+
+
+ {image.breeds?.[0] &&
+
+
+ }>
+ Copy link
+
+
+