Deploy my app

.github/workflows/node.js.yml

@@ -5,13 +5,12 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -25,7 +24,19 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-        cache: 'npm'
+          cache: "npm"
       - run: npm ci
-    - run: npm run build --if-present
+
+      - name: Build project
+        run: npm run build
+        env:
+          REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
+
       - run: npm test
+
+      - name: Deploy with gh-pages
+        run: |
+          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          npx gh-pages -d build -u "github-actions-bot <support+actions@github.com>"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/components/Cart.js

@@ -16,7 +16,6 @@ import {
   DialogActions,
   Paper,
 } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
 import DeleteIcon from "@material-ui/icons/Delete";
 import GetAppIcon from "@material-ui/icons/GetApp";
 import ShareIcon from "@material-ui/icons/Share";
@@ -24,64 +23,7 @@ import EditIcon from "@material-ui/icons/Edit";
 import { removePoster } from "../services/action";
 import axios from "axios";
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    marginTop: theme.spacing(4),
-    marginBottom: theme.spacing(8),
-    display: "flex",
-  },
-  posterList: {
-    flex: 2,
-    marginRight: theme.spacing(2),
-    maxHeight: "calc(100vh - 200px)",
-    overflowY: "auto",
-  },
-  actionPanel: {
-    flex: 1,
-    position: "sticky",
-    top: theme.spacing(4),
-    height: "fit-content",
-  },
-  card: {
-    display: "flex",
-    marginBottom: theme.spacing(2),
-    backgroundColor: "#2c3e50",
-  },
-  cardMedia: {
-    width: 100,
-  },
-  cardContent: {
-    flex: "1 0 auto",
-  },
-  actions: {
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing(2),
-  },
-  slider: {
-    width: "100%",
-    marginTop: theme.spacing(2),
-  },
-  button: {
-    width: "100%",
-  },
-  typography: {
-    color: "#ecf0f1",
-  },
-  formControl: {
-    marginBottom: theme.spacing(2),
-  },
-  checkbox: {
-    color: "#3498db",
-  },
-  paper: {
-    padding: theme.spacing(3),
-    backgroundColor: "#34495e",
-  },
-}));
-
 const Cart = () => {
-  const classes = useStyles();
   const dispatch = useDispatch();
   const selectedPosters = useSelector((state) => {
     const selections = state.posterSelections;

src/components/PosterGallery.js

@@ -11,7 +11,6 @@ import {
   CardMedia,
   CircularProgress,
   Box,
-  makeStyles,
   Paper,
 } from "@material-ui/core";
 import CheckIcon from "@material-ui/icons/Check";
@@ -19,66 +18,7 @@ import NavBar from "./NavBar";
 
 const apiUrl = process.env.REACT_APP_API_URL;
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    marginTop: theme.spacing(4),
-    marginBottom: theme.spacing(4),
-  },
-  paper: {
-    padding: theme.spacing(3),
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: "#1c1f23",
-  },
-  title: {
-    color: "white",
-    marginBottom: theme.spacing(3),
-    fontSize: "2rem",
-    fontWeight: "400",
-  },
-  posterCard: {
-    position: "relative",
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    backgroundColor: "transparent",
-    boxShadow: "none",
-    cursor: "pointer",
-    transition: "all 0.3s ease",
-    "&:hover": {
-      transform: "scale(1.05)",
-    },
-  },
-  selectedPoster: {
-    border: `4px solid ${theme.palette.primary.main}`,
-    borderRadius: theme.shape.borderRadius,
-  },
-  checkIcon: {
-    position: "absolute",
-    top: theme.spacing(1),
-    right: theme.spacing(1),
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.common.white,
-    borderRadius: "50%",
-    padding: theme.spacing(0.5),
-  },
-  posterImage: {
-    paddingTop: "150%",
-    backgroundSize: "contain",
-    backgroundPosition: "center",
-    backgroundRepeat: "no-repeat",
-    borderRadius: theme.shape.borderRadius,
-    transition: "transform 0.3s ease-in-out",
-  },
-  loadingContainer: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: "50vh",
-  },
-}));
-
 const PosterGallery = ({ movieId }) => {
-  const classes = useStyles();
   const [posters, setPosters] = useState([]);
   const [loading, setLoading] = useState(true);
   const { movieName, movieYear } = useParams();