devkav · devkav · Feb 26, 2026 · Feb 26, 2026 · Feb 26, 2026 · Feb 26, 2026
diff --git a/.github/workflows/prettier.yaml b/.github/workflows/prettier.yaml
@@ -0,0 +1,24 @@
+name: Prettier Check
+
+on:
+  pull_request:
+    branches:
+      - "*"
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '23'
+      - name: Install dependencies
+        run: npm install --save-dev --save-exact prettier
+      - name: Run Prettier check
+        run: npx prettier ./frontend --check
+
+
+
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "trailingComma": "none"
+}
diff --git a/frontend/index.html b/frontend/index.html
@@ -5,12 +5,18 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Maggie Lucy</title>
-    <meta name="description" content="Maggie Lucy is an Atlanta-based cinematographer working to express her eye for composition, lighting, and storytelling within her work.  With a BFA in Film and Animation, a concentration in Cinematography, and a minor in Advertising Photography from Rochester Institute of Technology.">
+    <meta
+      name="description"
+      content="Maggie Lucy is an Atlanta-based cinematographer working to express her eye for composition, lighting, and storytelling within her work.  With a BFA in Film and Animation, a concentration in Cinematography, and a minor in Advertising Photography from Rochester Institute of Technology."
+    />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,6 +6,7 @@
     "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "format": "npx prettier . --write",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -23,6 +24,7 @@
     "@types/node": "^20",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "prettier": "3.8.1",
     "typescript": "^5.8.3",
     "vite": "^6.3.3",
     "vite-tsconfig-paths": "^5.1.4"

diff --git a/frontend/src/assets/global.d.ts b/frontend/src/assets/global.d.ts
@@ -1,4 +1,4 @@
-declare module '*.png' {
+declare module "*.png" {
   const value: any;
   export = value;
 }
diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
@@ -4,27 +4,25 @@ import { MdOutlineEmail } from "react-icons/md";
 
 import "./footer.css";
 
-export default function Footer({darkMode=true, noCopyright} : {darkMode?: boolean, noCopyright?: boolean}) {
-    const currentTime = new Date()
-    const year = currentTime.getFullYear()
+export default function Footer({ darkMode = true, noCopyright }: { darkMode?: boolean; noCopyright?: boolean }) {
+  const currentTime = new Date();
+  const year = currentTime.getFullYear();
 
-    return (
-        <div id="footer">
-            {!noCopyright &&
-              <p className={darkMode ? "dark" : ""}>&#169; {year} Maggie Lucy</p>
-            }
+  return (
+    <div id="footer">
+      {!noCopyright && <p className={darkMode ? "dark" : ""}>&#169; {year} Maggie Lucy</p>}
 
-            <div className={`icon-row ${darkMode ? "icon-row-dark" : ""}`}>
-                <IconButton href="https://www.instagram.com/maggielucyscamera">
-                    <FaInstagram/>
-                </IconButton>
-                <IconButton href="https://www.linkedin.com/in/maggie-lucy/">
-                    <FaLinkedin/>
-                </IconButton>
-                <IconButton href="mailto:maggieclucy@gmail.com">
-                    <MdOutlineEmail/>
-                </IconButton>
-            </div>
-        </div>
-    )
+      <div className={`icon-row ${darkMode ? "icon-row-dark" : ""}`}>
+        <IconButton href="https://www.instagram.com/maggielucyscamera">
+          <FaInstagram />
+        </IconButton>
+        <IconButton href="https://www.linkedin.com/in/maggie-lucy/">
+          <FaLinkedin />
+        </IconButton>
+        <IconButton href="mailto:maggieclucy@gmail.com">
+          <MdOutlineEmail />
+        </IconButton>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/src/components/IconButton/IconButton.tsx b/frontend/src/components/IconButton/IconButton.tsx
@@ -1,16 +1,16 @@
 import type { JSX } from "react";
 
 interface Props {
-    href: string;
-    children: JSX.Element;
-  }
-  
-  function IconButton({href, children}: Props) {
-    return (
-      <a href={href} className="icon-btn" target="_blank" rel="noreferrer">
-        {children}
-      </a>
-    );
-  }
-  
-  export default IconButton;
+  href: string;
+  children: JSX.Element;
+}
+
+function IconButton({ href, children }: Props) {
+  return (
+    <a href={href} className="icon-btn" target="_blank" rel="noreferrer">
+      {children}
+    </a>
+  );
+}
+
+export default IconButton;
diff --git a/frontend/src/components/ProjectDisplay/ProjectDisplay.tsx b/frontend/src/components/ProjectDisplay/ProjectDisplay.tsx
@@ -5,11 +5,11 @@ import londonLaurel from "../../assets/images/london_laurel.png";
 import type { VideoDimensions } from "../VideoRow/VideoRow";
 
 interface ProjectDisplayData {
-  id: number,
-  src: string,
-  title: string,
-  subtitle: string,
-  link?: string,
+  id: number;
+  src: string;
+  title: string;
+  subtitle: string;
+  link?: string;
   laurels?: boolean;
 }
 
@@ -19,7 +19,11 @@ interface Props {
   playing: boolean;
 }
 
-export default function ProjectDisplay({data: { id, src, title, subtitle, link, laurels=false }, onLoadCallback, playing}: Props) {
+export default function ProjectDisplay({
+  data: { id, src, title, subtitle, link, laurels = false },
+  onLoadCallback,
+  playing
+}: Props) {
   const videoRef = useRef<HTMLVideoElement>(null);
 
   if (videoRef.current) {
@@ -34,7 +38,7 @@ export default function ProjectDisplay({data: { id, src, title, subtitle, link,
     } else {
       videoRef.current?.pause();
     }
-  }, [playing])
+  }, [playing]);
 
   let className = "project-display";
 
@@ -46,22 +50,22 @@ export default function ProjectDisplay({data: { id, src, title, subtitle, link,
     if (link != undefined) {
       window.open(link, "_blank");
     }
-  }
+  };
 
   const onLoad = (e: any) => {
     onLoadCallback({ width: e.target.videoWidth, height: e.target.videoHeight });
-  }
+  };
 
   return (
     <div className={className} onClick={onClick}>
       <div className="project-display-label-container">
-        {laurels && <img className="project-display-laurel" src={londonLaurel} key={`laurel-${id}`}/>}
+        {laurels && <img className="project-display-laurel" src={londonLaurel} key={`laurel-${id}`} />}
         <div className="project-display-label">
           <p className="project-display-title">{title}</p>
           <p className="project-display-subtitle">{subtitle}</p>
         </div>
       </div>
-      <video autoPlay muted loop playsInline onLoadedMetadata={onLoad} src={src} ref={videoRef}/>
+      <video autoPlay muted loop playsInline onLoadedMetadata={onLoad} src={src} ref={videoRef} />
     </div>
   );
 }
diff --git a/frontend/src/components/ProjectDisplay/project-display.css b/frontend/src/components/ProjectDisplay/project-display.css
@@ -27,7 +27,7 @@
   left: 0;
   opacity: 0;
   transition: opacity 0.25s;
-  background-image: linear-gradient(to top, black, rgba(0,0,0,0));
+  background-image: linear-gradient(to top, black, rgba(0, 0, 0, 0));
 }
 
 .project-display-label {
@@ -36,20 +36,21 @@
   left: 20px;
 }
 
-.project-display-title, .project-display-subtitle {
+.project-display-title,
+.project-display-subtitle {
   color: white;
   font-weight: bold;
   margin: 0px;
 }
 
 .project-display-title {
-  font-family: 'Impact';
+  font-family: "Impact";
   font-size: 50px;
   text-transform: uppercase;
 }
 
 .project-display-subtitle {
-  font-family: 'Helvetica';
+  font-family: "Helvetica";
   font-size: 20px;
   text-transform: lowercase;
 }

diff --git a/frontend/src/components/TitleBar/TitleBar.tsx b/frontend/src/components/TitleBar/TitleBar.tsx
@@ -9,31 +9,37 @@ interface Props {
   compact?: boolean;
 }
 
-export default function TitleBar({darkMode=true, compact=false} : Props) {
-  const buttons = Object.keys(MenuRoute).filter(
-    key => key !== "home"
-  ).map(
-    key => MenuRoute[key]
-  ).sort(
-    (a, b) => a.order > b.order ? 1 : -1
-  ).map(
-    ({title, route}) => (<Link to={route} key={`route-${title}`}>{title}</Link>)
-  )
+export default function TitleBar({ darkMode = true, compact = false }: Props) {
+  const buttons = Object.keys(MenuRoute)
+    .filter((key) => key !== "home")
+    .map((key) => MenuRoute[key])
+    .sort((a, b) => (a.order > b.order ? 1 : -1))
+    .map(({ title, route }) => (
+      <Link to={route} key={`route-${title}`}>
+        {title}
+      </Link>
+    ));
 
-  const classNames = []
+  const classNames = [];
 
-  if (darkMode) {classNames.push("dark-mode")}
-  if (compact) {classNames.push("compact")}
+  if (darkMode) {
+    classNames.push("dark-mode");
+  }
+  if (compact) {
+    classNames.push("compact");
+  }
 
   return (
     <div id="title-bar-container" className={classNames.join(" ")}>
       <div id="logo-container">
-        <Link id="logo" to="/">Maggie Lucy</Link>
-        <Link id="logo-sub" to="/">Cinematographer</Link>
-      </div>
-      <div id="title-button-row">
-        {buttons}
+        <Link id="logo" to="/">
+          Maggie Lucy
+        </Link>
+        <Link id="logo-sub" to="/">
+          Cinematographer
+        </Link>
       </div>
+      <div id="title-button-row">{buttons}</div>
     </div>
-  )
+  );
 }