Add eslint CI step

.github/workflows/ci.yml

@@ -76,3 +76,20 @@ jobs:
 
       - name: Run flake8
         run: flake8 .
+
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Run ESLint
+        working-directory: ./frontend
+        run: |
+          npm install
+          npm run lint

frontend/next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    domains: ['localhost'], // Allow images from localhost
+  },
+};
 
 export default nextConfig;

frontend/src/app/components/RenderSticker/index.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import Lottie from 'lottie-react';
+import Image from 'next/image';
 
 interface Sticker {
   file_id: string;
@@ -13,6 +14,7 @@ interface RenderStickerProps {
 }
 
 export function RenderSticker({ sticker }: RenderStickerProps) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [animationData, setAnimationData] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -55,6 +57,14 @@ export function RenderSticker({ sticker }: RenderStickerProps) {
       </video>
     );
   } else {
-    return <img src={stickerUrl} className="w-full h-auto max-w-[300px] object-contain p-1" />;
+    return (
+      <Image
+        src={stickerUrl}
+        alt="Sticker image"
+        width={300}
+        height={300}
+        className="w-full h-auto max-w-[300px] object-contain p-1"
+      />
+    );
   }
 }

makefiles/uv.mk

@@ -27,3 +27,4 @@ start: start-ngrok
 lint:
 	uvx ruff check
 	uvx flake8
+	cd frontend && npm run lint