Shay's Tech Team Challenge Implementation

src/App.css

@@ -0,0 +1,36 @@
+@import url(https://fonts.google.com/share?selection.family=Lilita+One);
+body {
+    font-family: 'Lilita One', cursive;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.app {
+    font-family: 'Lilita One', cursive;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    transition: background-color 0.4s ease;
+}
+
+.title {
+    font-size: 36px;
+    margin-bottom: 20px;
+}
+
+.button-container {
+    margin-bottom: 20px;
+}
+
+.button-container button {
+    padding: 10px 20px;
+    margin: 0 10px;
+    font-size: 16px;
+    cursor: pointer;
+}
+

src/App.js

@@ -1,12 +1,52 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import './App.css';
-import data from './members_details.json'
+import members from './members_details.json';
+import Header from './components/Header/Header';
+import ButtonContainer from './components/ButtonContainer/ButtonContainer';
+import CardContainer from './components/CardContainer/CardContainer';
+
+const colors = [
+  '#bf76db', '#7b1aa1', '#ccac2b', '#e0c867', '#deaeeb', '#ded014','#7b1aa1' 
+];
 
 function App() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [bgColor, setBgColor] = useState('#bf76db');
+
+  const getRandomColor = () => {
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+
   return (
-    <div className="App">
+    <div className="app" style={{ backgroundColor: bgColor }}>
+      <Header/>
+      <ButtonContainer
+        showPrevCard={() => {
+          if(currentIndex > 0){
+            setCurrentIndex(currentIndex - 1);
+            setBgColor(getRandomColor());
+          }
+        }}
+        showNextCard={() => {
+          if(currentIndex < members.length - 1){
+            setCurrentIndex(currentIndex + 1);
+            setBgColor(getRandomColor());
+          }
+        }}
+        currentIndex={currentIndex}
+        totalMembers={members.length}
+      />
+      <CardContainer
+        members={members}
+        currentIndex={currentIndex}
+        setCurrentIndex={setCurrentIndex}
+        setBgColor={setBgColor}
+        getRandomColor={getRandomColor}
+      />
     </div>
   );
 }
 
+
+
 export default App;

src/components/ButtonContainer/ButtonContainer.css

@@ -0,0 +1,15 @@
+@import url(https://fonts.google.com/share?selection.family=Lilita+One);
+
+.button-container {
+    margin-bottom: 20px;
+    font-family: 'Lilita One', cursive;
+}
+
+.button-container button {
+    padding: 10px 20px;
+    margin: 0 10px;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 5%;
+    border: none;
+}

src/components/ButtonContainer/ButtonContainer.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import './ButtonContainer.css'
+
+const ButtonContainer = ({showPrevCard, showNextCard, currentIndex, totalMembers}) => {
+
+  return (
+    <div className="button-container">
+        <button onClick={showPrevCard} disabled={currentIndex === 0}>Previous</button>
+        <button onClick={showNextCard} disabled={currentIndex === totalMembers - 1}>Next</button>
+    </div>   
+  )
+}
+
+export default ButtonContainer

src/components/CardContainer/CardContainer.css

@@ -0,0 +1,61 @@
+.card-container {
+    position: relative;
+    width: 100vw;
+    height: 80vh;
+    perspective: 1000px;
+    overflow: hidden;
+}
+
+.card {
+    position: absolute;
+    width: 50%;
+    height: 90%;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    transition: transform 0.4s ease, box-shadow 0.4s ease;
+    will-change: transform;
+}
+
+.card img {
+    /* width: 400px;
+    height: 400px; */
+    max-width: 50%;
+    height: auto;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 10px;
+    transition: transform 0.4s ease;
+}
+
+.card .name {
+    font-size: 22px;
+    font-weight: bold;
+    transition: transform 0.4s ease;
+}
+
+.card .position {
+    font-size: 16px;
+    color: #555;
+    transition: transform 0.4s ease;
+}
+
+.card:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.card:hover img,
+.card:hover .name,
+.card:hover .position {
+    transform: scale(1.1);
+}
+
+.card.active {
+    z-index: 1;
+}

src/components/CardContainer/CardContainer.js

@@ -0,0 +1,72 @@
+import React, { useRef, useEffect } from 'react';
+import './CardContainer.css';
+
+const CardContainer = ({members, currentIndex, setCurrentIndex, setBgColor, getRandomColor}) => {
+    const containerRef = useRef(null);
+    const startX = useRef(0);
+    const endX = useRef(0);
+
+    const handleTouchStart = (e) => {
+      startX.current = e.touches[0].clientX;
+    };
+
+    const handleTouchMove = (e) => {
+      endX.current = e.touches[0].clientX;
+    };
+
+    const handleTouchEnd = () => {
+      if (startX.current - endX.current > 50) {
+        showNextCard();
+      } else if (endX.current - startX.current > 50) {
+        showPrevCard();
+      }
+    };
+
+    const showNextCard = () => {
+      if (currentIndex < members.length - 1) {
+        setCurrentIndex(currentIndex + 1);
+        setBgColor(getRandomColor());
+      }
+    };
+
+    const showPrevCard = () => {
+      if (currentIndex > 0) {
+        setCurrentIndex(currentIndex - 1);
+        setBgColor(getRandomColor());
+      }
+    };
+
+    useEffect(() => {
+      const container = containerRef.current;
+      container.addEventListener('touchstart', handleTouchStart);
+      container.addEventListener('touchmove', handleTouchMove);
+      container.addEventListener('touchend', handleTouchEnd);
+
+      return () => {
+        container.removeEventListener('touchstart', handleTouchStart);
+        container.removeEventListener('touchmove', handleTouchMove);
+        container.removeEventListener('touchend', handleTouchEnd);
+      };
+    }, [currentIndex]);
+
+
+  return (
+    <div className="card-container" ref={containerRef}>
+        {members.map((member, index) => (
+          <div
+            key={index}
+            className={`card ${index === currentIndex ? 'active' : ''}`}
+            style={{
+              transform: `translateX(${(index - currentIndex) * 100}%) rotateY(${(index - currentIndex) * 15}deg)`
+            }}
+          >
+            <img src={member.picture} alt={member.name} />
+            <div className="name">{member.name}</div>
+            <div className="position">{member.position}</div>
+          </div>
+        ))}
+      </div>
+  )
+}
+
+export default CardContainer

src/components/Header/Header.css

@@ -0,0 +1,5 @@
+.title {
+    font-size: 36px;
+    margin-bottom: 20px;
+    text-align: center;
+}

src/components/Header/Header.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import './Header.css';
+
+const Header = () => {
+  return (
+    <h1 className="title">Meet Your 2T4 F!rosh Orientation Committee!</h1>
+  )
+}
+
+export default Header