From 8fa46cf477d055a1e5f20354cbaf528f8e28380b Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sat, 20 Jan 2024 22:01:00 +0100
Subject: [PATCH 1/7] fixed login btn

---
 backend/db.sqlite3                    | Bin 172032 -> 176128 bytes
 frontend/src/pages/Login.jsx          |  16 ++++++++++--
 frontend/src/styles/login.scoped.scss |  34 ++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/backend/db.sqlite3 b/backend/db.sqlite3
index b036f8be0bb0924715d8327dfa3eedb012e4c59e..48616a2645a473e45d5c4eb9489511059c2941db 100644
GIT binary patch
delta 1262
zcmaizO^6$19L6)77T4Kq#^P7iLsy%RL)rBGn8{2c)TYVit9>Wk*`(76Qk{={y_qy=
zvTl+QY_ki3C+#U9y?77`f*3vIDtH#W3La$lBE8jv7cb5<C0%J@FAu!){2BQD|Ic&p
zXZGHo>{sucwtYU|h5H*HF!t=@!`SI4_q8v4fAa1@^WwaDk$LdL{M6-@_ZTKL{pN`I
za0inNfuuET>1q}fXm=z#DJVM)r&O+tuceE3tX#WQY87}5X_%mjP|6U2I4Phxg^|`N
zc4So>5?Zunnx!(*P-$m6dBnVWcidOiVr8pO(pv4#Cupe1l`E85PODV0$I3^0*y=hr
z^6E7eY6u{H6TnRbHV{Y(D2Y)_6rseUr306aWY$GoOGr3@0dFE`7<Hiz5URzYDc0kO
z{p9)812r{o9x@L${Za1H^rcr;a;qHS@?4s`G@JYteC?F~WhUxL#FMZmp}BHy<;TlG
zKlj+(pYH<qFZU1k_@^_yL+<RkkozTk)|E(rbv4S~@~!>G9!%NZN+iTS<j!+*_SeAM
zf$!Je4F0~RvwyFB$Nj-|0$&7a@JsgA`fN5?W$%XkgsDq$h>=x`$1R>WL{mpFE+7fj
z5UfLt&8Rm7Tsq6NkYv;hzV6!4LOieQ*f5}O0U_cINmxjTF1Tpo1P^)Bz@}jV9=Jc0
zc*}(0Cqu`U_125F74oL0pB*t9^EW<Sc@zq+yL|pY!592x{qsO!HhDkb-%m!DS!qC$
zel9CO&QylavQq4nGTMkZ#dfu<p=xFuXw;%wxiFGxWn9V>Z9=mhQYMZzUSy>r$n8`{
z8Q48px{692v%ftU;9WfIw<xCibyzLy*}YLbt^Y48FbUkafS4eF1V|ju%2Vg0ZSN-|
zURI{x9x*q)CYa6(ngEDHjyGXgDmR>JPHq$0Y*p0)s6L^}x^I_M-Ey>!+YEJkC_in2
zp5N8%>$GJny{l=P3=Ev<h$(gJb~j%h-n?PUq%j(aLaWs7E*Tb0klZrF1PLQ3EuBRZ
zJm;jC>?gxZx^0(E!}9p~+YxHwXSXZx#Br~IyiQw`IBh`63e~7gwT?@aNsUQa<K>(}
zr)Q3s*GHR5cBh>xrj(AA2QaJN-nAM#-9akN^O_pZHJVp?d(FO~jK{+z!GcXp3Stb3
PZn)vnS+IG|N$LI%B7ti<

delta 187
zcmV;s07U<Q;0l1i3XmHGXaE2JDv=;R0cf#c;w}Xv51Ifak%1wDXfL;DF9Dpe8Vdqp
z01m?qh73sy3<=K&k_S}=7zEn`o&sU9fkOhfVd4R!EdwJDQkMr10!Oid1P`}T9|E#K
z2m%lG00000AF*(W50Q{$5hWM^001To3IG5ABMR~W3(%JgZ~`VC4<iq^3>pls3l|RA
p3t<ZK3#$*@4{Z#I4r&gM4Y9F-qzVKi15E*!e&Yckw-$Q>>LgOAG<X02

diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 916ad44..b4b316b 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -58,7 +58,10 @@ const Login = () => {
       <div className="container">
         <div className="forms-container">
           <div className="signin-signup">
+
+
             <form action="#" className="sign-in-form" onSubmit={loginUser}>
+
               <h2 className="title">Sign in</h2>
               <div className="input-field">
                 <i className="fas fa-user"></i>
@@ -81,7 +84,8 @@ const Login = () => {
                 />
               </div>
 
-              <Button sx={{color: "white"}} type="submit" className="btn solid"  variant="text" value="Login" onClick={loginUser} >Login</Button>
+              <input type="submit" sx={{color: "white"}}  className="btn solid mobile"  variant="text" value="Login"  />
+              <Button sx={{color: "white"}} type="submit" className="btn solid pc"  variant="text" value="Login"  >Login</Button>
     
 
               <p className="social-text">Or Sign in with social platforms</p>
@@ -132,7 +136,15 @@ const Login = () => {
                   autoComplete="new-password"
                 />
               </div>
-              <Button sx={{color: "white"}} type="submit" className="btn"  variant="text" value="Sign up" >Sign up</Button>
+
+    
+
+
+              <Button  sx={{color: "white"}} type="submit" className="btn pc"  variant="text" value="Sign up" >Sign up</Button>
+   
+              <input type="submit" sx={{color: "white"}}  className="btn solid mobile"  variant="text" value="Sign up"  />
+
+    
               <p className="social-text">Or Sign up with social platforms</p>
               <div className="social-media">
                 <a href="#" className="social-icon">
diff --git a/frontend/src/styles/login.scoped.scss b/frontend/src/styles/login.scoped.scss
index ca946ba..f25e7f1 100644
--- a/frontend/src/styles/login.scoped.scss
+++ b/frontend/src/styles/login.scoped.scss
@@ -428,4 +428,38 @@ form.sign-in-form {
     bottom: 28%;
     left: 50%;
   }
+}
+
+
+.pc{
+
+  display: none;
+  
+
+  @media (min-width: 1025px) {
+    display: block;
+    
+
+    
+    
+  }
+  
+}
+
+
+
+.mobile{
+
+  
+  display: none;
+
+  @media (max-width: 1024px) {
+
+    display: block;
+    
+
+    
+    
+  }
+  
 }
\ No newline at end of file

From bed8f20407279facf80596f81d961247ddacb63c Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sat, 20 Jan 2024 22:17:21 +0100
Subject: [PATCH 2/7] fetch will work

---
 frontend/src/context/AuthContext.jsx  |  4 ++--
 frontend/src/pages/Login.jsx          |  2 --
 frontend/src/styles/login.scoped.scss | 33 ---------------------------
 3 files changed, 2 insertions(+), 37 deletions(-)

diff --git a/frontend/src/context/AuthContext.jsx b/frontend/src/context/AuthContext.jsx
index cf52ef8..b6fcc76 100644
--- a/frontend/src/context/AuthContext.jsx
+++ b/frontend/src/context/AuthContext.jsx
@@ -34,7 +34,7 @@ export const AuthProvider = ({ children }) => {
     if(e.target.username.value && e.target.password.value){
 
 
-    const response = await fetch("http://127.0.0.1:8000/token/", {
+    const response = await fetch("https://animanga-fklg.onrender.com/token/", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -70,7 +70,7 @@ export const AuthProvider = ({ children }) => {
   };
 
   const updateToken = async () => {
-    const response = await fetch("http://127.0.0.1:8000/token/refresh/", {
+    const response = await fetch("https://animanga-fklg.onrender.com/token/refresh/", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index b4b316b..8e4ac21 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -84,7 +84,6 @@ const Login = () => {
                 />
               </div>
 
-              <input type="submit" sx={{color: "white"}}  className="btn solid mobile"  variant="text" value="Login"  />
               <Button sx={{color: "white"}} type="submit" className="btn solid pc"  variant="text" value="Login"  >Login</Button>
     
 
@@ -142,7 +141,6 @@ const Login = () => {
 
               <Button  sx={{color: "white"}} type="submit" className="btn pc"  variant="text" value="Sign up" >Sign up</Button>
    
-              <input type="submit" sx={{color: "white"}}  className="btn solid mobile"  variant="text" value="Sign up"  />
 
     
               <p className="social-text">Or Sign up with social platforms</p>
diff --git a/frontend/src/styles/login.scoped.scss b/frontend/src/styles/login.scoped.scss
index f25e7f1..1f5de15 100644
--- a/frontend/src/styles/login.scoped.scss
+++ b/frontend/src/styles/login.scoped.scss
@@ -430,36 +430,3 @@ form.sign-in-form {
   }
 }
 
-
-.pc{
-
-  display: none;
-  
-
-  @media (min-width: 1025px) {
-    display: block;
-    
-
-    
-    
-  }
-  
-}
-
-
-
-.mobile{
-
-  
-  display: none;
-
-  @media (max-width: 1024px) {
-
-    display: block;
-    
-
-    
-    
-  }
-  
-}
\ No newline at end of file

From 1161a43e18015733334d12ce5664c5790999e361 Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sun, 21 Jan 2024 09:22:01 +0100
Subject: [PATCH 3/7] carousel with item component

---
 .../components/Home/UpcomingCarousel/Item.jsx | 64 +++++++++++++++
 .../UpcomingCarousel.jsx                      | 78 ++++++-------------
 frontend/src/context/AuthContext.jsx          |  4 +-
 frontend/src/pages/Home.jsx                   |  2 +-
 4 files changed, 92 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/components/Home/UpcomingCarousel/Item.jsx
 rename frontend/src/components/Home/{ => UpcomingCarousel}/UpcomingCarousel.jsx (50%)

diff --git a/frontend/src/components/Home/UpcomingCarousel/Item.jsx b/frontend/src/components/Home/UpcomingCarousel/Item.jsx
new file mode 100644
index 0000000..702f92e
--- /dev/null
+++ b/frontend/src/components/Home/UpcomingCarousel/Item.jsx
@@ -0,0 +1,64 @@
+
+import "../../../styles/UpcomingCarousel.scoped.scss";
+import { Link } from "react-router-dom";
+
+
+
+const Item = ({item,index }) => {
+    
+
+  //convert date to 'Month Year' string..
+  let convertDate = (start_date) => {
+    let dateObj = new Date(start_date);
+
+    let month = dateObj.toLocaleString("en-US", { month: "long" });
+    let year = dateObj.getFullYear();
+
+    return `${month} ${year}`;
+  };
+
+    return (
+
+        <>
+        
+              <Link
+                to="/detailspage"
+                state={{ id: item.anime_id, anime: true }}
+                key={item.anime_id}
+              >
+              
+
+              
+                <div
+                  className="item flex flex-col justify-start items-stretch "
+                  key={index}
+              
+                  
+                >
+
+                  {/* image */}
+                  {/* to scale it well you need to put in <div> contaiener. remove width and height and put ' object-fit: contain;' and on <div> put 'overflow: hidden;'*/}
+                  <div className="item_div">
+                    <img src={item.image} alt={item.title} />
+                  </div>
+                  <div className="line"> </div>
+
+                  <div className="inner flex flex-col gap-2 justify-start items-start ml-2 mt-2 md:ml-4 md:mt-4">
+                    <h1>{item.title}</h1>
+                    <p>Season {item.seasons}</p>
+                  </div>
+
+                  <p className="release_date md:mt-16 mb-4 mt-4  md:mt-26 mb:mb-8 ml-2 md:ml-4  ">
+                    {convertDate(item.start_date)}{" "}
+                  </p>
+                </div>
+              </Link>
+              
+        </>
+    )
+    
+
+}
+
+
+export {Item}
\ No newline at end of file
diff --git a/frontend/src/components/Home/UpcomingCarousel.jsx b/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
similarity index 50%
rename from frontend/src/components/Home/UpcomingCarousel.jsx
rename to frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
index 0d1c544..9c9cd6b 100644
--- a/frontend/src/components/Home/UpcomingCarousel.jsx
+++ b/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
@@ -1,12 +1,18 @@
-import "../../styles/UpcomingCarousel.scoped.scss";
-import { Link } from "react-router-dom";
+import "../../../styles/UpcomingCarousel.scoped.scss";
 import { useEffect } from "react";
+import { Link } from "react-router-dom";
 import ScrollCarousel from "scroll-carousel";
-import { anime_data } from "../../data";
+import { anime_data } from "../../../data";
+import { Item } from "./Item";
 
 var top10UpcomingAnime;
 
 export const UpcomingCarousel = () => {
+  
+
+
+
+  
   useEffect(() => {
     let main = document.querySelector(".main");
 
@@ -21,16 +27,6 @@ export const UpcomingCarousel = () => {
     });
   }, []);
 
-  //convert date to 'Month Year' string..
-  let convertDate = (start_date) => {
-    let dateObj = new Date(start_date);
-
-    let month = dateObj.toLocaleString("en-US", { month: "long" });
-    let year = dateObj.getFullYear();
-
-    return `${month} ${year}`;
-  };
-
   // Sort the anime_data array based on start_date in descending order
   // this way, we get most recent by start_date, elements. and put them in other list, which shows latest 10 by start_date
   const sortedAnimeData = anime_data.sort((a, b) => {
@@ -42,11 +38,14 @@ export const UpcomingCarousel = () => {
   // this way, we get most recent by start_date, elements. and put them in other list, which shows latest 10 by start_date
   top10UpcomingAnime = sortedAnimeData.slice(0, 10);
 
+  var item = {};
+
   return (
     <>
       <div className="line"> </div>
 
       <div className="main flex flex-col 	">
+
         {/* this is just container for showing title and then carousel */}
         <div className="small_header ml-4 md:ml-6 lg:ml-10  mt-6 ">
           {/* check index.css, for global use, vertical rectangle.. */}
@@ -56,54 +55,27 @@ export const UpcomingCarousel = () => {
             <p>Season - fall 2023</p>
           </div>
         </div>
-        <div className="carousel-container">
-          {/* container for items*/}
-
-          <div className="flex  flex-row gap-3 justify-center mt-2">
-            {/* show items (render from object) dynamically render items */}
-
-            {/*only prop that will be passed is 'anime_id'. because on DetailedPage, it will be fetched again from database for all info. And 'anime_id' because this if for 'upcoming animes'. it can be manga as well .. just say to include it if needed */}
 
     
+    
 
-
+        {/* carousel container (for carousel) */}
+        <div className="carousel-container">
     
+
+          {/* container for items*/}
+          <div className="flex  flex-row gap-3 justify-center mt-2">
             {top10UpcomingAnime.map((item, index) => (
-              <Link
-                to="/detailspage"
-                state={{ id: item.anime_id, anime: true }}
-                key={item.anime_id}
-              >
-              
-
-              
-                <div
-                  className="item flex flex-col justify-start items-stretch "
-                  key={index}
-              
-                  
-                >
-
-                  {/* image */}
-                  {/* to scale it well you need to put in <div> contaiener. remove width and height and put ' object-fit: contain;' and on <div> put 'overflow: hidden;'*/}
-                  <div className="item_div">
-                    <img src={item.image} alt={item.title} />
-                  </div>
-                  <div className="line"> </div>
-
-                  <div className="inner flex flex-col gap-2 justify-start items-start ml-2 mt-2 md:ml-4 md:mt-4">
-                    <h1>{item.title}</h1>
-                    <p>Season {item.seasons}</p>
-                  </div>
-
-                  <p className="release_date md:mt-16 mb-4 mt-4  md:mt-26 mb:mb-8 ml-2 md:ml-4  ">
-                    {convertDate(item.start_date)}{" "}
-                  </p>
-                </div>
-              </Link>
+              <Item item={item} index={index} />
             ))}
           </div>
+    
+
+    
         </div>
+    
+
+    
       </div>
     </>
   );
diff --git a/frontend/src/context/AuthContext.jsx b/frontend/src/context/AuthContext.jsx
index b6fcc76..cf52ef8 100644
--- a/frontend/src/context/AuthContext.jsx
+++ b/frontend/src/context/AuthContext.jsx
@@ -34,7 +34,7 @@ export const AuthProvider = ({ children }) => {
     if(e.target.username.value && e.target.password.value){
 
 
-    const response = await fetch("https://animanga-fklg.onrender.com/token/", {
+    const response = await fetch("http://127.0.0.1:8000/token/", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -70,7 +70,7 @@ export const AuthProvider = ({ children }) => {
   };
 
   const updateToken = async () => {
-    const response = await fetch("https://animanga-fklg.onrender.com/token/refresh/", {
+    const response = await fetch("http://127.0.0.1:8000/token/refresh/", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 3d31e70..13367da 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,5 +1,5 @@
 import { PopularCarousel } from "../components/Home/PopularCarousel/PopularCarousel";
-import { UpcomingCarousel } from "../components/Home/UpcomingCarousel";
+import { UpcomingCarousel } from "../components/Home/UpcomingCarousel/UpcomingCarousel";
 import { BrowseHome } from "../components/Home/BrowseHome/BrowseHome";
 
 const Home = () => {

From 4fd1304b00af664a610a7116cc3ca81236c4c5ed Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sun, 21 Jan 2024 09:37:53 +0100
Subject: [PATCH 4/7] flicking carousel changed to

---
 frontend/package-lock.json                    | 145 ++++++++++++++++++
 frontend/package.json                         |   1 +
 .../UpcomingCarousel/UpcomingCarousel.jsx     |  90 ++++++++++-
 3 files changed, 233 insertions(+), 3 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ff9bcef..88e77cd 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "animangaverse",
       "version": "0.0.0",
       "dependencies": {
+        "@egjs/react-flicking": "^4.11.2",
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.15.5",
@@ -401,6 +402,77 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cfcs/core": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@cfcs/core/-/core-0.1.0.tgz",
+      "integrity": "sha512-kvYX0RpL45XTHJ5sW7teNbKeAa7pK3nNqaJPoFfZDPTIBJOkTtRD3QhkBG+O3Hu69a8xeMoPvF6y/RtJ6JUOdA==",
+      "dependencies": {
+        "@egjs/component": "^3.0.4"
+      }
+    },
+    "node_modules/@egjs/agent": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/@egjs/agent/-/agent-2.4.3.tgz",
+      "integrity": "sha512-XvksSENe8wPeFlEVouvrOhKdx8HMniJ3by7sro2uPF3M6QqWwjzVcmvwoPtdjiX8O1lfRoLhQMp1a7NGlVTdIA=="
+    },
+    "node_modules/@egjs/axes": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@egjs/axes/-/axes-3.9.0.tgz",
+      "integrity": "sha512-V+HxHxEGmlu/0yJ9kqlj2doiJt1yVeROTy/0Qf+IaJ9hMabjzUgfYffGR+3atcRpejjGbcpAIiBrGbAkDVaLjg==",
+      "dependencies": {
+        "@cfcs/core": "^0.1.0",
+        "@egjs/agent": "^2.2.1",
+        "@egjs/component": "^3.0.1"
+      }
+    },
+    "node_modules/@egjs/component": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@egjs/component/-/component-3.0.5.tgz",
+      "integrity": "sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w=="
+    },
+    "node_modules/@egjs/flicking": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@egjs/flicking/-/flicking-4.11.2.tgz",
+      "integrity": "sha512-qOAn3NUpVlPkakaVJYFeFg5LlNNoh+QJVjFEcj4maQ9T+gRngWKha/cYpPgYukMIsjS5F8XYcgeeOINK/md62A==",
+      "dependencies": {
+        "@egjs/axes": "^3.9.0",
+        "@egjs/component": "^3.0.1",
+        "@egjs/imready": "^1.3.1",
+        "@egjs/list-differ": "^1.0.1"
+      }
+    },
+    "node_modules/@egjs/imready": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@egjs/imready/-/imready-1.4.1.tgz",
+      "integrity": "sha512-JIOBs4lB7FYdsKi5uvz2j3SObX8eShtZjtqlOH41tm185aJOQZwiKBK8+V4MxzG4X6DqVhpdN8UcuVwBbElfsg==",
+      "dependencies": {
+        "@cfcs/core": "^0.0.24",
+        "@egjs/component": "^3.0.1"
+      }
+    },
+    "node_modules/@egjs/imready/node_modules/@cfcs/core": {
+      "version": "0.0.24",
+      "resolved": "https://registry.npmjs.org/@cfcs/core/-/core-0.0.24.tgz",
+      "integrity": "sha512-feB38qu+eDk0Pggh/yR7gjaNmvUYA2uCxHP3Pz2MLE4LZ/9jPdtu8bzCSI47yTEhWyZCF5Pk698hdz8IN2mTjA==",
+      "dependencies": {
+        "@egjs/component": "^3.0.4"
+      }
+    },
+    "node_modules/@egjs/list-differ": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@egjs/list-differ/-/list-differ-1.0.1.tgz",
+      "integrity": "sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg=="
+    },
+    "node_modules/@egjs/react-flicking": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@egjs/react-flicking/-/react-flicking-4.11.2.tgz",
+      "integrity": "sha512-tayEvJFMj97w+3iDDQVKQl02dc8Z3VoZ7rjU5vBGJP3XFVsoZXyelQIly4a/EtR+4KJj6RvVGj5CT4Rg7juRdw==",
+      "dependencies": {
+        "@egjs/component": "^3.0.2",
+        "@egjs/flicking": "~4.11.2",
+        "@egjs/list-differ": "^1.0.1"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
@@ -5706,6 +5778,79 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@cfcs/core": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@cfcs/core/-/core-0.1.0.tgz",
+      "integrity": "sha512-kvYX0RpL45XTHJ5sW7teNbKeAa7pK3nNqaJPoFfZDPTIBJOkTtRD3QhkBG+O3Hu69a8xeMoPvF6y/RtJ6JUOdA==",
+      "requires": {
+        "@egjs/component": "^3.0.4"
+      }
+    },
+    "@egjs/agent": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/@egjs/agent/-/agent-2.4.3.tgz",
+      "integrity": "sha512-XvksSENe8wPeFlEVouvrOhKdx8HMniJ3by7sro2uPF3M6QqWwjzVcmvwoPtdjiX8O1lfRoLhQMp1a7NGlVTdIA=="
+    },
+    "@egjs/axes": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@egjs/axes/-/axes-3.9.0.tgz",
+      "integrity": "sha512-V+HxHxEGmlu/0yJ9kqlj2doiJt1yVeROTy/0Qf+IaJ9hMabjzUgfYffGR+3atcRpejjGbcpAIiBrGbAkDVaLjg==",
+      "requires": {
+        "@cfcs/core": "^0.1.0",
+        "@egjs/agent": "^2.2.1",
+        "@egjs/component": "^3.0.1"
+      }
+    },
+    "@egjs/component": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@egjs/component/-/component-3.0.5.tgz",
+      "integrity": "sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w=="
+    },
+    "@egjs/flicking": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@egjs/flicking/-/flicking-4.11.2.tgz",
+      "integrity": "sha512-qOAn3NUpVlPkakaVJYFeFg5LlNNoh+QJVjFEcj4maQ9T+gRngWKha/cYpPgYukMIsjS5F8XYcgeeOINK/md62A==",
+      "requires": {
+        "@egjs/axes": "^3.9.0",
+        "@egjs/component": "^3.0.1",
+        "@egjs/imready": "^1.3.1",
+        "@egjs/list-differ": "^1.0.1"
+      }
+    },
+    "@egjs/imready": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@egjs/imready/-/imready-1.4.1.tgz",
+      "integrity": "sha512-JIOBs4lB7FYdsKi5uvz2j3SObX8eShtZjtqlOH41tm185aJOQZwiKBK8+V4MxzG4X6DqVhpdN8UcuVwBbElfsg==",
+      "requires": {
+        "@cfcs/core": "^0.0.24",
+        "@egjs/component": "^3.0.1"
+      },
+      "dependencies": {
+        "@cfcs/core": {
+          "version": "0.0.24",
+          "resolved": "https://registry.npmjs.org/@cfcs/core/-/core-0.0.24.tgz",
+          "integrity": "sha512-feB38qu+eDk0Pggh/yR7gjaNmvUYA2uCxHP3Pz2MLE4LZ/9jPdtu8bzCSI47yTEhWyZCF5Pk698hdz8IN2mTjA==",
+          "requires": {
+            "@egjs/component": "^3.0.4"
+          }
+        }
+      }
+    },
+    "@egjs/list-differ": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@egjs/list-differ/-/list-differ-1.0.1.tgz",
+      "integrity": "sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg=="
+    },
+    "@egjs/react-flicking": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@egjs/react-flicking/-/react-flicking-4.11.2.tgz",
+      "integrity": "sha512-tayEvJFMj97w+3iDDQVKQl02dc8Z3VoZ7rjU5vBGJP3XFVsoZXyelQIly4a/EtR+4KJj6RvVGj5CT4Rg7juRdw==",
+      "requires": {
+        "@egjs/component": "^3.0.2",
+        "@egjs/flicking": "~4.11.2",
+        "@egjs/list-differ": "^1.0.1"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2135e7e..923028a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@egjs/react-flicking": "^4.11.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.5",
diff --git a/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx b/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
index 9c9cd6b..cf87e6a 100644
--- a/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
+++ b/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
@@ -5,6 +5,11 @@ import ScrollCarousel from "scroll-carousel";
 import { anime_data } from "../../../data";
 import { Item } from "./Item";
 
+
+
+import Flicking from "@egjs/react-flicking";
+import "@egjs/react-flicking/dist/flicking.css";
+
 var top10UpcomingAnime;
 
 export const UpcomingCarousel = () => {
@@ -42,7 +47,45 @@ export const UpcomingCarousel = () => {
 
   return (
     <>
+    
+
+
+
+<Flicking moveType="freeScroll" bound={true}>
+      <span className="button mr-2 is-white">🍎 Apple</span>
+      <span className="button mr-2 is-white">🍉 Watermelon</span>
+      <span className="button mr-2 is-white">🥝 Kiwi</span>
+    
+      <span className="button mr-2 is-white">🍎 Apple</span>
+      <span className="button mr-2 is-white">🍉 Watermelon</span>
+      <span className="button mr-2 is-white">🥝 Kiwi</span>
+    
+    
+      <span className="button mr-2 is-white">🍎 Apple</span>
+      <span className="button mr-2 is-white">🍉 Watermelon</span>
+      <span className="button mr-2 is-white">🥝 Kiwi</span>
+    
+
+      <span className="button mr-2 is-white">🍎 Apple</span>
+      <span className="button mr-2 is-white">🍉 Watermelon</span>
+      <span className="button mr-2 is-white">🥝 Kiwi</span>
+    
+
+      <span className="button mr-2 is-white">🍎 Apple</span>
+      <span className="button mr-2 is-white">🍉 Watermelon</span>
+      <span className="button mr-2 is-white">🥝 Kiwi</span>
+    
+      <span className="button mr-2 is-white">🍎 Apple</span>
+      <span className="button mr-2 is-white">🍉 Watermelon</span>
+      <span className="button mr-2 is-white">🥝 Kiwi</span>
+
+    
+    
+    </Flicking>
+
+    
       <div className="line"> </div>
+    
 
       <div className="main flex flex-col 	">
 
@@ -55,14 +98,16 @@ export const UpcomingCarousel = () => {
             <p>Season - fall 2023</p>
           </div>
         </div>
-
+    
     
     
 
         {/* carousel container (for carousel) */}
-        <div className="carousel-container">
+        {/* <div className="carousel-container"> */}
     
+        <Flicking moveType="freeScroll" bound={true}>
 
+    
           {/* container for items*/}
           <div className="flex  flex-row gap-3 justify-center mt-2">
             {top10UpcomingAnime.map((item, index) => (
@@ -72,11 +117,50 @@ export const UpcomingCarousel = () => {
     
 
     
-        </div>
+        {/* </div> */}
     
+        </Flicking>
 
     
       </div>
+    
+{/* 
+      <div className="main flex flex-col 	">
+
+        {/* this is just container for showing title and then carousel 
+        <div className="small_header ml-4 md:ml-6 lg:ml-10  mt-6 ">
+          {/* check index.css, for global use, vertical rectangle.. 
+
+          <div className="secondary-left-line">
+            <h3>Top Upcoming animes:</h3>
+            <p>Season - fall 2023</p>
+          </div>
+        </div>
+
+    
+    
+
+        {/* carousel container (for carousel) 
+        <div className="carousel-container">
+    
+
+          {/* container for items
+          <div className="flex  flex-row gap-3 justify-center mt-2">
+            {top10UpcomingAnime.map((item, index) => (
+              <Item item={item} index={index} />
+            ))}
+          </div>
+    
+
+    
+        </div>
+    
+
+    
+      </div> */}
+
+
+
     </>
   );
 };

From 944ad3271b66812bbbf6d2f3541f01f7690a210b Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sun, 21 Jan 2024 09:41:28 +0100
Subject: [PATCH 5/7] carousel

---
 frontend/package-lock.json | 15 +++++++++++++++
 frontend/package.json      |  1 +
 2 files changed, 16 insertions(+)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 88e77cd..590a2ef 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "animangaverse",
       "version": "0.0.0",
       "dependencies": {
+        "@egjs/flicking-plugins": "^4.7.1",
         "@egjs/react-flicking": "^4.11.2",
         "@emotion/react": "^11.11.3",
         "@emotion/styled": "^11.11.0",
@@ -441,6 +442,14 @@
         "@egjs/list-differ": "^1.0.1"
       }
     },
+    "node_modules/@egjs/flicking-plugins": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@egjs/flicking-plugins/-/flicking-plugins-4.7.1.tgz",
+      "integrity": "sha512-J0k499sCs5IAMXAJuBcrY1OoiHRi4BPbS1/RCCkIzsYgdoHzcAUjKyhSsms3gLz4O/K5eTbBmWBUtFO86fETHg==",
+      "peerDependencies": {
+        "@egjs/flicking": "^4.1.0"
+      }
+    },
     "node_modules/@egjs/imready": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@egjs/imready/-/imready-1.4.1.tgz",
@@ -5817,6 +5826,12 @@
         "@egjs/list-differ": "^1.0.1"
       }
     },
+    "@egjs/flicking-plugins": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@egjs/flicking-plugins/-/flicking-plugins-4.7.1.tgz",
+      "integrity": "sha512-J0k499sCs5IAMXAJuBcrY1OoiHRi4BPbS1/RCCkIzsYgdoHzcAUjKyhSsms3gLz4O/K5eTbBmWBUtFO86fETHg==",
+      "requires": {}
+    },
     "@egjs/imready": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@egjs/imready/-/imready-1.4.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 923028a..b001cf5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@egjs/flicking-plugins": "^4.7.1",
     "@egjs/react-flicking": "^4.11.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",

From 3621ee7cb01942f27674e455a28dd5f69f5f462a Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sun, 21 Jan 2024 09:41:37 +0100
Subject: [PATCH 6/7] UpcomingCarousel

---
 .../src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx b/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
index cf87e6a..891c0fd 100644
--- a/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
+++ b/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
@@ -9,6 +9,7 @@ import { Item } from "./Item";
 
 import Flicking from "@egjs/react-flicking";
 import "@egjs/react-flicking/dist/flicking.css";
+import { AutoPlay } from "@egjs/flicking-plugins";
 
 var top10UpcomingAnime;
 
@@ -16,6 +17,7 @@ export const UpcomingCarousel = () => {
   
 
 
+  const plugins = [new AutoPlay({ duration: 2000, direction: "NEXT", stopOnHover: false })];
 
   
   useEffect(() => {
@@ -105,7 +107,7 @@ export const UpcomingCarousel = () => {
         {/* carousel container (for carousel) */}
         {/* <div className="carousel-container"> */}
     
-        <Flicking moveType="freeScroll" bound={true}>
+        <Flicking moveType="freeScroll" bound={true} plugins={plugins}>
 
     
           {/* container for items*/}

From 95a89f44886389f18766db73c395e23222d14e00 Mon Sep 17 00:00:00 2001
From: Linuxiness <igor.lerinc7@gmail.com>
Date: Sun, 21 Jan 2024 12:20:29 +0100
Subject: [PATCH 7/7] splide carousel best

---
 frontend/package-lock.json                    |  27 ++++
 frontend/package.json                         |   1 +
 .../components/Home/UpcomingCarousel/Item.jsx |   3 +-
 .../UpcomingCarousel/UpcomingCarousel.jsx     | 153 +++---------------
 4 files changed, 54 insertions(+), 130 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 590a2ef..9c7e6e1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.15.5",
         "@mui/material": "^5.15.5",
+        "@splidejs/react-splide": "^0.7.12",
         "axios": "^1.6.1",
         "jwt-decode": "^4.0.0",
         "react": "^18.2.0",
@@ -1500,6 +1501,19 @@
         }
       }
     },
+    "node_modules/@splidejs/react-splide": {
+      "version": "0.7.12",
+      "resolved": "https://registry.npmjs.org/@splidejs/react-splide/-/react-splide-0.7.12.tgz",
+      "integrity": "sha512-UfXH+j47jsMc4x5HA/aOwuuHPqn6y9+ZTNYPWDRD8iLKvIVMZlzq2unjUEvyDAU+TTVPZOXkG2Ojeoz0P4AkZw==",
+      "dependencies": {
+        "@splidejs/splide": "^4.1.3"
+      }
+    },
+    "node_modules/@splidejs/splide": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.1.4.tgz",
+      "integrity": "sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -6446,6 +6460,19 @@
         "picomatch": "^2.3.1"
       }
     },
+    "@splidejs/react-splide": {
+      "version": "0.7.12",
+      "resolved": "https://registry.npmjs.org/@splidejs/react-splide/-/react-splide-0.7.12.tgz",
+      "integrity": "sha512-UfXH+j47jsMc4x5HA/aOwuuHPqn6y9+ZTNYPWDRD8iLKvIVMZlzq2unjUEvyDAU+TTVPZOXkG2Ojeoz0P4AkZw==",
+      "requires": {
+        "@splidejs/splide": "^4.1.3"
+      }
+    },
+    "@splidejs/splide": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.1.4.tgz",
+      "integrity": "sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA=="
+    },
     "@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b001cf5..e69eb14 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.5",
     "@mui/material": "^5.15.5",
+    "@splidejs/react-splide": "^0.7.12",
     "axios": "^1.6.1",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
diff --git a/frontend/src/components/Home/UpcomingCarousel/Item.jsx b/frontend/src/components/Home/UpcomingCarousel/Item.jsx
index 702f92e..f5fa1db 100644
--- a/frontend/src/components/Home/UpcomingCarousel/Item.jsx
+++ b/frontend/src/components/Home/UpcomingCarousel/Item.jsx
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 
 
 
+
 const Item = ({item,index }) => {
     
 
@@ -20,7 +21,6 @@ const Item = ({item,index }) => {
     return (
 
         <>
-        
               <Link
                 to="/detailspage"
                 state={{ id: item.anime_id, anime: true }}
@@ -53,7 +53,6 @@ const Item = ({item,index }) => {
                   </p>
                 </div>
               </Link>
-              
         </>
     )
     
diff --git a/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx b/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
index 891c0fd..0aaf357 100644
--- a/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
+++ b/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
@@ -5,35 +5,12 @@ import ScrollCarousel from "scroll-carousel";
 import { anime_data } from "../../../data";
 import { Item } from "./Item";
 
-
-
-import Flicking from "@egjs/react-flicking";
-import "@egjs/react-flicking/dist/flicking.css";
-import { AutoPlay } from "@egjs/flicking-plugins";
+import { Splide, SplideSlide } from "@splidejs/react-splide";
+import "@splidejs/splide/dist/css/splide.min.css";
 
 var top10UpcomingAnime;
 
 export const UpcomingCarousel = () => {
-  
-
-
-  const plugins = [new AutoPlay({ duration: 2000, direction: "NEXT", stopOnHover: false })];
-
-  
-  useEffect(() => {
-    let main = document.querySelector(".main");
-
-    // don't put it in a variable, then it won't work!
-    //https://asif-jalil.github.io/scroll-carousel-website/#api
-    new ScrollCarousel(main, {
-      slideSelector: ".carousel-container",
-      direction: "rtl", // ltr
-      speed: 5,
-      margin: 24,
-      // autoplay: true,
-    });
-  }, []);
-
   // Sort the anime_data array based on start_date in descending order
   // this way, we get most recent by start_date, elements. and put them in other list, which shows latest 10 by start_date
   const sortedAnimeData = anime_data.sort((a, b) => {
@@ -45,124 +22,44 @@ export const UpcomingCarousel = () => {
   // this way, we get most recent by start_date, elements. and put them in other list, which shows latest 10 by start_date
   top10UpcomingAnime = sortedAnimeData.slice(0, 10);
 
-  var item = {};
-
   return (
     <>
-    
-
-
-
-<Flicking moveType="freeScroll" bound={true}>
-      <span className="button mr-2 is-white">🍎 Apple</span>
-      <span className="button mr-2 is-white">🍉 Watermelon</span>
-      <span className="button mr-2 is-white">🥝 Kiwi</span>
-    
-      <span className="button mr-2 is-white">🍎 Apple</span>
-      <span className="button mr-2 is-white">🍉 Watermelon</span>
-      <span className="button mr-2 is-white">🥝 Kiwi</span>
-    
-    
-      <span className="button mr-2 is-white">🍎 Apple</span>
-      <span className="button mr-2 is-white">🍉 Watermelon</span>
-      <span className="button mr-2 is-white">🥝 Kiwi</span>
-    
-
-      <span className="button mr-2 is-white">🍎 Apple</span>
-      <span className="button mr-2 is-white">🍉 Watermelon</span>
-      <span className="button mr-2 is-white">🥝 Kiwi</span>
-    
-
-      <span className="button mr-2 is-white">🍎 Apple</span>
-      <span className="button mr-2 is-white">🍉 Watermelon</span>
-      <span className="button mr-2 is-white">🥝 Kiwi</span>
-    
-      <span className="button mr-2 is-white">🍎 Apple</span>
-      <span className="button mr-2 is-white">🍉 Watermelon</span>
-      <span className="button mr-2 is-white">🥝 Kiwi</span>
-
-    
-    
-    </Flicking>
-
-    
       <div className="line"> </div>
-    
 
       <div className="main flex flex-col 	">
-
         {/* this is just container for showing title and then carousel */}
         <div className="small_header ml-4 md:ml-6 lg:ml-10  mt-6 ">
-          {/* check index.css, for global use, vertical rectangle.. */}
-
           <div className="secondary-left-line">
             <h3>Top Upcoming animes:</h3>
             <p>Season - fall 2023</p>
           </div>
         </div>
-    
-    
-    
-
-        {/* carousel container (for carousel) */}
-        {/* <div className="carousel-container"> */}
-    
-        <Flicking moveType="freeScroll" bound={true} plugins={plugins}>
 
-    
-          {/* container for items*/}
-          <div className="flex  flex-row gap-3 justify-center mt-2">
-            {top10UpcomingAnime.map((item, index) => (
+        <Splide
+          options={{
+            perPage: 3,
+            gap: "0.75rem",
+            rewind: true,
+            type: "loop",
+            focus: "center",
+            autoplay: true,
+            autoWidth: true,
+            arrows: false,
+            pagination: false,
+            drag: "free",
+            snap: true,
+            wheel: true,
+          }}
+          aria-labelledby="reactivity-example-heading"
+          className="mt-2"
+        >
+          {top10UpcomingAnime.map((item, index) => (
+            <SplideSlide key={index}>
               <Item item={item} index={index} />
-            ))}
-          </div>
-    
-
-    
-        {/* </div> */}
-    
-        </Flicking>
-
-    
+            </SplideSlide>
+          ))}
+        </Splide>
       </div>
-    
-{/* 
-      <div className="main flex flex-col 	">
-
-        {/* this is just container for showing title and then carousel 
-        <div className="small_header ml-4 md:ml-6 lg:ml-10  mt-6 ">
-          {/* check index.css, for global use, vertical rectangle.. 
-
-          <div className="secondary-left-line">
-            <h3>Top Upcoming animes:</h3>
-            <p>Season - fall 2023</p>
-          </div>
-        </div>
-
-    
-    
-
-        {/* carousel container (for carousel) 
-        <div className="carousel-container">
-    
-
-          {/* container for items
-          <div className="flex  flex-row gap-3 justify-center mt-2">
-            {top10UpcomingAnime.map((item, index) => (
-              <Item item={item} index={index} />
-            ))}
-          </div>
-    
-
-    
-        </div>
-    
-
-    
-      </div> */}
-
-
-
     </>
   );
 };