Development

client/development/.firebase/hosting.ZGlzdA.cache

@@ -0,0 +1,3 @@
+vite.svg,1752569871720,699a02e0e68a579f687d364bbbe7633161244f35af068220aee37b1b33dfb3c7
+index.html,1754018173484,26eef42b64807c7699e9a45f6049f94a8cafa5a7a425d73e261cd6b2a3e4cef7
+assets/index-CTz-uWr3.js,1754018173484,a8a6954cc83d26f6eb0722677170f3b784d1de71e0dc5ab68dbd1971ad4a5d2b

client/development/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "rmt-63-ip"
+  }
+}

client/development/.gitignore

@@ -0,0 +1,25 @@
+.env
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

client/development/README.md

@@ -0,0 +1,12 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

client/development/component/AnimeCard.jsx

@@ -0,0 +1,37 @@
+import { Link } from "react-router";
+
+export default function AnimeCard({ anime, onFavoriteToggle, isFavorite }) {
+  return (
+    <div className="card" style={{ width: "18rem" }}>
+      <img
+        src={anime.image_url}
+        className="card-img-top"
+        alt={anime.title}
+        style={{ height: 250, objectFit: "cover" }}
+      />
+      <div className="card-body d-flex flex-column justify-content-between">
+        <h5 className="card-title">{anime.title}</h5>
+        <p className="card-text mb-1">
+          <strong>Genre:</strong> {anime.genre}
+        </p>
+        <p className="card-text mb-1">
+          <strong>Rating:</strong> {anime.mean_rating}
+        </p>
+        <div className="d-flex gap-2 mt-2">
+          <button
+            onClick={() => onFavoriteToggle(anime.id)}
+            className={`btn ${isFavorite ? "btn-danger" : "btn-primary"}`}
+          >
+            {isFavorite ? "Remove Favorite" : "Add Favorite"}
+          </button>
+          <Link
+            to={`/animes/${anime.id}`}
+            className="btn btn-outline-secondary"
+          >
+            Details
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

client/development/component/Navbar.jsx

@@ -0,0 +1,39 @@
+import { Link, useNavigate } from "react-router";
+
+export default function Navbar() {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    localStorage.removeItem("access_token");
+    navigate("/login");
+  };
+
+  return (
+    <nav className="navbar navbar-expand-lg navbar-dark bg-dark px-4">
+      <div className="container-fluid">
+        {/* LEFT NAV */}
+        <div className="navbar-brand d-flex gap-3">
+          <Link to="/" className="nav-link text-white">
+            Home
+          </Link>
+          <Link to="/profiles" className="nav-link text-white">
+            Profile
+          </Link>
+          <Link to="/favorites" className="nav-link text-white">
+            Favorites
+          </Link>
+          <Link to="/recommendations" className="nav-link text-white">
+            AI Recommendations
+          </Link>
+        </div>
+
+        {/* RIGHT NAV */}
+        <div className="d-flex ms-auto">
+          <button className="btn btn-outline-light" onClick={handleLogout}>
+            Logout
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+}

client/development/component/RecommendationPage.jsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import RecommendationForm from "../pages/RecommendationForm";
+import AnimeCard from "./AnimeCard";
+
+const RecommendationPage = () => {
+  const [recommendations, setRecommendations] = useState([]);
+
+  return (
+    <div className="container py-5">
+      <h1 className="mb-4">AI Anime Recommendation</h1>
+
+      <RecommendationForm onRecommendationsGenerated={setRecommendations} />
+
+      {recommendations.length > 0 && (
+        <div className="mt-5">
+          <h2 className="mb-4">Your Recommendations</h2>
+          <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+            {recommendations.map((anime) => (
+              <div key={anime.id} className="col">
+                <AnimeCard anime={anime} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RecommendationPage;

client/development/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

client/development/firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

client/development/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Anime List</title>
+    <script src="https://accounts.google.com/gsi/client" async></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>