ADD New Pre-Commit hooks and Formatting code

.gitignore

@@ -42,3 +42,6 @@ yarn-error.log*
 ## typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# traefik
+traefik/traefik

.pre-commit-config.yaml

@@ -1,11 +1,20 @@
 # See https://pre-commit.com for more information
 # See https://pre-commit.com/hooks.html for more hooks
 repos:
+  - repo: https://github.com/pre-commit/mirrors-mypy
+    rev: v1.9.0
+    hooks:
+      - id: mypy
+        args: [--no-strict-optional, --ignore-missing-imports]
+        additional_dependencies: [tokenize-rt==3.2.0, types-requests]
+        files: ^(backend/)
+
   - repo: https://github.com/psf/black
     rev: 24.4.0
     hooks:
       - id: black
         args: [--safe]
+        files: ^(backend/)
 
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v4.5.0
@@ -22,15 +31,37 @@ repos:
     hooks:
       - id: flake8
         language_version: python3
+        args: [--ignore=E501]
+        files: ^(backend/)
 
   - repo: https://github.com/asottile/reorder_python_imports
     rev: v3.12.0
     hooks:
       - id: reorder-python-imports
         args: [--py39-plus]
+        files: ^(backend/)
 
   - repo: https://github.com/asottile/pyupgrade
     rev: v3.15.2
     hooks:
       - id: pyupgrade
         args: [--py39-plus]
+        files: ^(backend/)
+
+  - repo: local
+    hooks:
+      - id: next-lint
+        name: next-lint
+        entry: bash -c 'cd ./frontend && npm run lint'
+        language: system
+        files: ^(frontend/)
+        stages:
+          - manual
+
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v3.1.0 # Use the sha or tag you want to point at
+    hooks:
+      - id: prettier
+        additional_dependencies:
+          - prettier@3.1.0
+        files: ^(frontend/)

README.md

@@ -17,8 +17,8 @@ Please note that AniX is an unofficial project and is not affiliated with the de
 
 ### Prerequisites
 
-* Python 3.6 or later ([https://www.python.org/downloads/](https://www.python.org/downloads/))
-* Node.js and npm ([https://nodejs.org/en](https://nodejs.org/en))
+- Python 3.6 or later ([https://www.python.org/downloads/](https://www.python.org/downloads/))
+- Node.js and npm ([https://nodejs.org/en](https://nodejs.org/en))
 
 ### Setting Up the Backend
 
@@ -38,8 +38,6 @@ Please note that AniX is an unofficial project and is not affiliated with the de
    pip install -r ./requirements.txt
    ```
 
-5. (Optional) Create a `.env` file in the project root directory to store sensitive information like API keys.
-
 ### Setting Up the Frontend
 
 1. Navigate to the `frontend` directory.
@@ -54,26 +52,33 @@ Please note that AniX is an unofficial project and is not affiliated with the de
 1. Start the backend server:
 
    ```bash
-   cd ..  # Navigate back to the project root directory
+   cd ./backend
+   source ./venv/bin/activate
    uvicorn main:app --reload
    ```
 
 2. Start the frontend development server:
 
    ```bash
-   cd frontend
+   cd ./frontend
    npm run dev
    ```
 
-3. Start local reverse proxy server like traefik
+3. Start local traefik reverse proxy
 
-    ```to be added soon```
+   1. download a traefik binary from [github](https://github.com/traefik/traefik/releases/tag/v2.11.2)
+   2. place it in traefik directory and make it executable
+   3. add the following line to the hosts file `127.0.0.1 anix.test.local`
+   4. run `sudo ./traefik --configFile ./traefik.yml`
 
-This will start the development server for both the backend and frontend. You can access the AniX web client in your browser at ```no url for now```.
+This will start the development server for both the backend and frontend. You can access the AniX web client in your browser at `anix.test.local` via http only.
 
-<!-- ## Development
+## Development
 
-The code for both the backend and frontend is well-commented and should be easy to understand and modify. Feel free to make changes and experiment with the project. -->
+0. Install global pre-commit `pip install pre-commit`
+1. Install pre-commit hooks `pre-commit install #inside repository folder`
+
+Feel free to make changes and experiment with the project.
 
 ## Deployment
 

backend/main.py

@@ -31,11 +31,13 @@ TAGS = [
 ]
 
 app = FastAPI(
-            openapi_tags=TAGS, 
-            title="AniX API",
-            description="unofficial API proxy for Anixart android application.",
-            openapi_url="/api/openapi.json",
-            docs_url="/api/docs", redoc_url=None)
+    openapi_tags=TAGS,
+    title="AniX API",
+    description="unofficial API proxy for Anixart android application.",
+    openapi_url="/api/openapi.json",
+    docs_url="/api/docs",
+    redoc_url=None,
+)
 
 app.include_router(profile.router, prefix="/api/profile", tags=["Profile"])
 app.include_router(auth.router, prefix="/api/auth", tags=["Profile"])

backend/modules/proxy.py

@@ -1,10 +1,22 @@
+from typing import TypedDict
 from typing import Union
 
 import requests
 from fastapi import Request
 
+
+class Endpoints(TypedDict):
+    release: dict[str, str]
+    profile: str
+    filter: str
+    auth: str
+    user: dict[str, str]
+    search: str
+    statistic: dict[str, str]
+
+
 API_URL = "https://api.anixart.tv"
-ENDPOINTS = {
+ENDPOINTS: Endpoints = {
     "release": {
         "info": f"{API_URL}/release",
         "episode": f"{API_URL}/episode",
@@ -30,10 +42,9 @@ USER_AGENT = "AnixartApp/8.2.1-23121216 (Android 11; SDK 30; arm64-v8a;)"
 
 
 async def apiRequest(
-    # noqa: E501
     request: Request = None,
-    endpoint: str = "",
-    path: str = "",
+    endpoint: Union[str, Endpoints] = "",
+    path: Union[str, int] = "",
     query: str = "",
     data: Union[None, str, dict] = None,
 ):

backend/modules/release/release.py

@@ -11,9 +11,7 @@ async def GetReleaseById(request: Request, release_id: str):
     return await apiRequest(request, ENDPOINTS["release"]["info"], release_id)
 
 
-@router.get(
-    "/{release_id}/voiceover", summary="Get release voiceover info"
-)
+@router.get("/{release_id}/voiceover", summary="Get release voiceover info")
 async def GetReleaseVoiceover(request: Request, release_id: str):
     return await apiRequest(request, ENDPOINTS["release"]["episode"], release_id)
 

backend/modules/user/profile.py

@@ -1,14 +1,17 @@
+from typing import Union
+
 from fastapi import APIRouter
 from fastapi import Request
 from modules.proxy import apiRequest
 from modules.proxy import ENDPOINTS
-from typing import Union
 
 router = APIRouter()
 
 
 @router.get("/{user_id}", summary="Get user profile by user ID")
-async def getUserById(request: Request, user_id: str, short: bool = False, token: Union[None, str] = None):
+async def getUserById(
+    request: Request, user_id: str, short: bool = False, token: Union[None, str] = None
+):
     query = ""
     if token:
         query = f"?token={token}"
@@ -23,5 +26,5 @@ async def getUserById(request: Request, user_id: str, short: bool = False, token
             "login": res["profile"]["login"],
             "avatar": res["profile"]["avatar"],
         },
-        "is_my_profile": res["is_my_profile"]
+        "is_my_profile": res["is_my_profile"],
     }

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/app/api/config.js

@@ -1,11 +1,11 @@
-export const API_URL = "http://anix.test.local/api";
+export const API_URL = "/api";
 
 export const endpoints = {
-    index: {
-        last: `${API_URL}/index/last`,
-        ongoing: `${API_URL}/index/ongoing`,
-        announce: `${API_URL}/index/announce`,
-        finished: `${API_URL}/index/finished`,
-    },
-    search: `${API_URL}/search`
-}; 
+  index: {
+    last: `${API_URL}/index/last`,
+    ongoing: `${API_URL}/index/ongoing`,
+    announce: `${API_URL}/index/announce`,
+    finished: `${API_URL}/index/finished`,
+  },
+  search: `${API_URL}/search`,
+};

frontend/app/components/CardList/CardList.jsx

@@ -3,7 +3,8 @@ import { ReleaseCard } from "@/app/components/ReleaseCard/ReleaseCard";
 export const CardList = (props) => {
   return props.data.map((item) => {
     return (
-      <ReleaseCard key={item.id}
+      <ReleaseCard
+        key={item.id}
         id={item.id}
         title={item.title_ru}
         poster={item.image}

frontend/app/components/ColorPicker/ColorPicker.jsx

@@ -20,37 +20,40 @@ export const ColorPicker = (props) => {
   const [mode, setMode] = useState(ui("mode"));
 
   return (
-      <dialog className="active left round bottom small" style={{blockSize: "unset"}}>
-        <h5>Выбор темы</h5>
-        <div className="grid center-align">
-          {colors.map((item) => {
-            return (
-              <button
-                key={item.color}
-                className={`circle border small ${item.color} s2`}
-                onClick={() => props.theme(item.hex)}
-              ></button>
-            );
-          })}
-        </div>
-        <div className="medium-divider"></div>
-        <nav>
-          <button
-            className={`circle small transparent`}
-            onClick={() => {
-              props.mode();
-              setMode(ui("mode"));
-            }}
-          >
-            {mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>}
-          </button>
-          <button
-            className={`circle small transparent `}
-            onClick={() => props.setColorPicker(!props.colorPicker)}
-          >
-            <i>close</i>
-          </button>
-        </nav>
-      </dialog>
+    <dialog
+      className="active left round bottom small"
+      style={{ blockSize: "unset" }}
+    >
+      <h5>Выбор темы</h5>
+      <div className="grid center-align">
+        {colors.map((item) => {
+          return (
+            <button
+              key={item.color}
+              className={`circle border small ${item.color} s2`}
+              onClick={() => props.theme(item.hex)}
+            ></button>
+          );
+        })}
+      </div>
+      <div className="medium-divider"></div>
+      <nav>
+        <button
+          className={`circle small transparent`}
+          onClick={() => {
+            props.mode();
+            setMode(ui("mode"));
+          }}
+        >
+          {mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>}
+        </button>
+        <button
+          className={`circle small transparent `}
+          onClick={() => props.setColorPicker(!props.colorPicker)}
+        >
+          <i>close</i>
+        </button>
+      </nav>
+    </dialog>
   );
 };

frontend/app/components/ColorPicker/ColorPicker.module.css

@@ -1,9 +1,9 @@
-.radiquum-pink{
-    background-color: #ffc8ff !important;
+.radiquum-pink {
+  background-color: #ffc8ff !important;
 }
-.fuxigen-blue{
-    background-color: #0087c7 !important;
+.fuxigen-blue {
+  background-color: #0087c7 !important;
+}
+.anixart-red {
+  background-color: #e54040 !important;
 }
-.anixart-red{
-    background-color: #e54040 !important;
-}

frontend/app/components/LogInNeeded/LogInNeeded.jsx

@@ -4,12 +4,10 @@ import Link from "next/link";
 
 export const LogInNeeded = (props) => {
   return (
-      <div className="absolute padding error center middle round">
-        <i className="extra">no_accounts</i>
-        <h5>Требуется авторизация</h5>
-        <p>
-          Для доступа к этой вкладке требуется авторизация в аккаунте anixart
-        </p>
-      </div>
+    <div className="absolute padding error center middle round">
+      <i className="extra">no_accounts</i>
+      <h5>Требуется авторизация</h5>
+      <p>Для доступа к этой вкладке требуется авторизация в аккаунте anixart</p>
+    </div>
   );
 };

frontend/app/components/NavigationRail/NavigationRail.jsx

@@ -60,7 +60,6 @@ export const NavigationRail = (props) => {
       >
         <i>palette</i>
       </button>
-
     </nav>
   );
 };

frontend/app/components/ReleaseCard/ReleaseCard.jsx

@@ -5,11 +5,18 @@ import Link from "next/link";
 export const ReleaseCard = (props) => {
   return (
     <Link href={`/release/${props.id}`} className="s3">
-      <article className="no-padding round fill" style={{width: 284, height: 508}}>
+      <article
+        className="no-padding round fill"
+        style={{ width: 284, height: 508 }}
+      >
         <img className="responsive large top-round" src={props.poster} />
         <div className="padding">
-          <h6>{`${props.title.substring(0, 36)}${[...props.title].length > 36 ? "..." : ""}`}</h6>
-          <p>{`${props.description}${[...props.description].length > 160 ? "..." : ""}`}</p>
+          <h6>{`${props.title.substring(0, 36)}${
+            [...props.title].length > 36 ? "..." : ""
+          }`}</h6>
+          <p>{`${props.description}${
+            [...props.description].length > 160 ? "..." : ""
+          }`}</p>
         </div>
       </article>
     </Link>

frontend/app/globals.css

@@ -17,8 +17,10 @@ body {
   }
 } */
 
-body, nav.left, main{
-  transition: background .2s;
+body,
+nav.left,
+main {
+  transition: background 0.2s;
   transform-origin: left;
   min-height: 100dvh;
 }

frontend/app/layout.js

@@ -1,5 +1,5 @@
 import "./globals.css";
-import {App} from "@/app/App"
+import { App } from "@/app/App";
 
 export const metadata = {
   title: "AniX",

frontend/app/login/page.js

@@ -1,3 +1,3 @@
 export default () => {
-    return (<p>login page</p>)
-}
+  return <p>login page</p>;
+};

frontend/app/page.js

@@ -23,7 +23,7 @@ export default function Home() {
 
       return params.toString();
     },
-    [searchParams]
+    [searchParams],
   );
 
   // set list on initial page load

frontend/app/search/page.js

@@ -32,7 +32,7 @@ export default function Search() {
 
       return params.toString();
     },
-    [searchParams]
+    [searchParams],
   );
 
   async function fetchData(query, page = 0) {

frontend/jsconfig.json

@@ -3,5 +3,6 @@
     "paths": {
       "@/*": ["./*"]
     }
-  }
+  },
+  "exclude": ["node_modules", "**/.next/**", "**/_next/**", "**/dist/**"]
 }

frontend/package.json

@@ -1,5 +1,6 @@
 {
   "name": "frontend",
+  "type": "module",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -17,6 +18,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "eslint-config-next": "14.2.2",
     "postcss": "^8"
   }
 }

frontend/tailwind.config.js

@@ -1,11 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  },
-  plugins: [],
-};

traefik/traefik-dynamic.yml

@@ -0,0 +1,25 @@
+http:
+  routers:
+    dashboard:
+      rule: Host(`traefik.test.local`) && (PathPrefix(`/api`) || PathPrefix(`/dashboard`))
+      service: api@internal
+    anix-api:
+      entryPoints:
+        - web
+      rule: Host(`anix.test.local`) && PathPrefix(`/api`)
+      service: anix-api-svc
+    anix-front:
+      entryPoints:
+        - web
+      rule: Host(`anix.test.local`)
+      service: anix-front-svc
+
+  services:
+    anix-api-svc:
+      loadBalancer:
+        servers:
+          - url: "http://127.0.0.1:8000"
+    anix-front-svc:
+      loadBalancer:
+        servers:
+          - url: "http://127.0.0.1:3000"

traefik/traefik.yml

@@ -0,0 +1,12 @@
+entryPoints:
+  web:
+    address: ":80"
+
+api:
+  insecure: false
+  dashboard: true
+
+providers:
+  file:
+    filename: "./traefik-dynamic.yml"
+    watch: true