Add Swiper

frontend/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/node_modules

frontend/package.json

@@ -12,9 +12,12 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.24.0"
+    "react-router-dom": "^6.24.0",
+    "react-swipeable": "^7.0.1",
+    "swiper": "^11.1.4"
   },
   "devDependencies": {
+    "@types/fullpage.js": "^2.9.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",

frontend/src/App.css

@@ -0,0 +1,50 @@
+/* index.css */
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.swipeable-cards-container {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.swipeable-card {
+    width: 300px;
+    height: 400px;
+    margin: 10px;
+    background-color: #f2f2f2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5em;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.6s ease;
+    transform-style: preserve-3d;
+}
+
+.swipeable-card.flipped {
+    transform: rotateY(180deg);
+}
+
+.swipeable-card:active {
+    transform: scale(0.95);
+}
+
+.swipeable-card-content {
+    backface-visibility: hidden;
+}
+
+.swipeable-card-back {
+    position: absolute;
+    transform: rotateY(180deg);
+    backface-visibility: hidden;
+}

frontend/src/App.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { Routes, Route, Link } from 'react-router-dom';
+import {Link, Route, Routes} from 'react-router-dom';
 import Home from './pages/Home';
 import About from './pages/About';
 import './App.css'
 
 function App() {
-
     return (
         <>
             <h1 className="text-3xl font-bold underline">Top</h1>

frontend/src/components/SwipeableCard.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { useSwipeable } from 'react-swipeable';
+
+interface SwipeableCardProps {
+    content: string;
+    onSwiped: (dir: string) => void;
+}
+
+function SwipeableCard({ content, onSwiped }: SwipeableCardProps) {
+    const [isFlipped, setIsFlipped] = useState(false);
+
+    const handlers = useSwipeable({
+        onSwipedLeft: () => handleSwipe('left'),
+        onSwipedRight: () => handleSwipe('right'),
+        onSwipedUp: () => handleSwipe('up'),
+        onSwipedDown: () => handleSwipe('down'),
+    });
+
+    const handleSwipe = (dir: string) => {
+        setIsFlipped(true);
+        setTimeout(() => {
+            onSwiped(dir);
+            setIsFlipped(false);
+        }, 600); // Match the duration of the CSS transition
+    };
+
+    return (
+        <div {...handlers} className={`swipeable-card ${isFlipped ? 'flipped' : ''}`}>
+            <div className="swipeable-card-content">
+                {content}
+            </div>
+            <div className="swipeable-card-back">
+                {content} (Back)
+            </div>
+        </div>
+    );
+}
+
+export default SwipeableCard;

frontend/src/pages/Home.tsx

@@ -1,10 +1,41 @@
-import React from 'react';
+import React, {useState} from 'react';
+
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/effect-coverflow";
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import SwipeableCard from "../components/SwipeableCard.tsx";
+
+// Initialize Swiper modules
+// SwiperCore.use([Navigation, Pagination]);
 
 function Home() {
+    const [cards, setCards] = useState([
+        {id: 1, content: 'Card 1'},
+        {id: 2, content: 'Card 2'},
+        {id: 3, content: 'Card 3'},
+    ]);
+
+    const [currentCardIndex, setCurrentCardIndex] = useState(0);
+
+    const handleSwiped = (dir: string) => {
+        if (dir === 'left') {
+            setCurrentCardIndex((prev) => (prev > 0 ? prev - 1 : cards.length - 1));
+        } else if (dir === 'right') {
+            setCurrentCardIndex((prev) => (prev + 1) % cards.length);
+        }
+    };
+
     return (
-        <div>
-            <h1>Home</h1>
-            <p>Welcome to the Home page!</p>
+        <div className="swipeable-cards-container">
+            {cards.length > 0 && (
+                <SwipeableCard
+                    key={cards[currentCardIndex].id}
+                    content={cards[currentCardIndex].content}
+                    onSwiped={handleSwiped}
+                />
+            )}
         </div>
     );
 }