feat: titles page

modules/frontend/src/App.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import UserPage from "./components/UserPage/UserPage";
+import UserPage from "./pages/UserPage/UserPage";
+import TitlesPage from "./pages/UserPage/UserPage";
 
 const App: React.FC = () => {
   return (
     <Router>
       <Routes>
         <Route path="/users/:id" element={<UserPage />} />
+        <Route path="/titles" element={<TitlesPage />} />
       </Routes>
     </Router>
   );

modules/frontend/src/api/index.ts

@@ -7,10 +7,17 @@ export { CancelablePromise, CancelError } from './core/CancelablePromise';
 export { OpenAPI } from './core/OpenAPI';
 export type { OpenAPIConfig } from './core/OpenAPI';
 
+export type { cursor } from './models/cursor';
+export type { Image } from './models/Image';
+export { ReleaseSeason } from './models/ReleaseSeason';
 export type { Review } from './models/Review';
+export type { Studio } from './models/Studio';
 export type { Tag } from './models/Tag';
+export type { Tags } from './models/Tags';
 export type { Title } from './models/Title';
+export { TitleStatus } from './models/TitleStatus';
 export type { User } from './models/User';
 export type { UserTitle } from './models/UserTitle';
+export { UserTitleStatus } from './models/UserTitleStatus';
 
 export { DefaultService } from './services/DefaultService';

modules/frontend/src/api/models/Image.ts

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type Image = {
+    id?: number;
+    storage_type?: string;
+    image_path?: string;
+};
+

modules/frontend/src/api/models/ReleaseSeason.ts

@@ -0,0 +1,13 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Title release season
+ */
+export enum ReleaseSeason {
+    WINTER = 'winter',
+    SPRING = 'spring',
+    SUMMER = 'summer',
+    FALL = 'fall',
+}

modules/frontend/src/api/models/Studio.ts

@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { Image } from './Image';
+export type Studio = {
+    id: number;
+    name: string;
+    poster?: Image;
+    description?: string;
+};
+

modules/frontend/src/api/models/Tag.ts

@@ -2,4 +2,7 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-export type Tag = Record<string, any>;
+/**
+ * A localized tag: keys are language codes (ISO 639-1), values are tag names
+ */
+export type Tag = Record<string, string>;

modules/frontend/src/api/models/Tags.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { Tag } from './Tag';
+/**
+ * Array of localized tags
+ */
+export type Tags = Array<Tag>;

modules/frontend/src/api/models/TitleStatus.ts

@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Title status
+ */
+export enum TitleStatus {
+    FINISHED = 'finished',
+    ONGOING = 'ongoing',
+    PLANNED = 'planned',
+}

modules/frontend/src/api/models/User.ts

@@ -6,7 +6,7 @@ export type User = {
     /**
      * Unique user ID (primary key)
      */
-    id?: number;
+    id: number;
     /**
      * ID of the user avatar (references images table)
      */
@@ -30,6 +30,6 @@ export type User = {
     /**
      * Timestamp when the user was created
      */
-    creation_date: string;
+    creation_date?: string;
 };
 

modules/frontend/src/api/models/UserTitleStatus.ts

@@ -0,0 +1,13 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * User's title status
+ */
+export enum UserTitleStatus {
+    FINISHED = 'finished',
+    PLANNED = 'planned',
+    DROPPED = 'dropped',
+    IN_PROGRESS = 'in-progress',
+}

modules/frontend/src/api/models/cursor.ts

@@ -0,0 +1,5 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type cursor = string;

modules/frontend/src/api/services/DefaultService.ts

@@ -2,11 +2,84 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { ReleaseSeason } from '../models/ReleaseSeason';
+import type { Title } from '../models/Title';
+import type { TitleStatus } from '../models/TitleStatus';
 import type { User } from '../models/User';
+import type { UserTitle } from '../models/UserTitle';
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
 export class DefaultService {
+    /**
+     * Get titles
+     * @param word
+     * @param status
+     * @param rating
+     * @param releaseYear
+     * @param releaseSeason
+     * @param limit
+     * @param offset
+     * @param fields
+     * @returns Title List of titles
+     * @throws ApiError
+     */
+    public static getTitles(
+        word?: string,
+        status?: TitleStatus,
+        rating?: number,
+        releaseYear?: number,
+        releaseSeason?: ReleaseSeason,
+        limit: number = 10,
+        offset?: number,
+        fields: string = 'all',
+    ): CancelablePromise<Array<Title>> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/titles',
+            query: {
+                'word': word,
+                'status': status,
+                'rating': rating,
+                'release_year': releaseYear,
+                'release_season': releaseSeason,
+                'limit': limit,
+                'offset': offset,
+                'fields': fields,
+            },
+            errors: {
+                400: `Request params are not correct`,
+                500: `Unknown server error`,
+            },
+        });
+    }
+    /**
+     * Get title description
+     * @param titleId
+     * @param fields
+     * @returns Title Title description
+     * @throws ApiError
+     */
+    public static getTitles1(
+        titleId: number,
+        fields: string = 'all',
+    ): CancelablePromise<Title> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/titles/{title_id}',
+            path: {
+                'title_id': titleId,
+            },
+            query: {
+                'fields': fields,
+            },
+            errors: {
+                400: `Request params are not correct`,
+                404: `Title not found`,
+                500: `Unknown server error`,
+            },
+        });
+    }
     /**
      * Get user info
      * @param userId
@@ -28,7 +101,47 @@ export class DefaultService {
                 'fields': fields,
             },
             errors: {
+                400: `Request params are not correct`,
                 404: `User not found`,
+                500: `Unknown server error`,
+            },
+        });
+    }
+    /**
+     * Get user titles
+     * @param userId
+     * @param cursor
+     * @param query
+     * @param limit
+     * @param offset
+     * @param fields
+     * @returns UserTitle List of user titles
+     * @throws ApiError
+     */
+    public static getUsersTitles(
+        userId: string,
+        cursor?: string,
+        query?: string,
+        limit: number = 10,
+        offset?: number,
+        fields: string = 'all',
+    ): CancelablePromise<Array<UserTitle>> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/users/{user_id}/titles',
+            path: {
+                'user_id': userId,
+            },
+            query: {
+                'cursor': cursor,
+                'query': query,
+                'limit': limit,
+                'offset': offset,
+                'fields': fields,
+            },
+            errors: {
+                400: `Request params are not correct`,
+                500: `Unknown server error`,
             },
         });
     }

modules/frontend/src/api_/core/ApiError.ts

@@ -0,0 +1,25 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ApiRequestOptions } from './ApiRequestOptions';
+import type { ApiResult } from './ApiResult';
+
+export class ApiError extends Error {
+    public readonly url: string;
+    public readonly status: number;
+    public readonly statusText: string;
+    public readonly body: any;
+    public readonly request: ApiRequestOptions;
+
+    constructor(request: ApiRequestOptions, response: ApiResult, message: string) {
+        super(message);
+
+        this.name = 'ApiError';
+        this.url = response.url;
+        this.status = response.status;
+        this.statusText = response.statusText;
+        this.body = response.body;
+        this.request = request;
+    }
+}

modules/frontend/src/api_/core/ApiRequestOptions.ts

@@ -0,0 +1,17 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type ApiRequestOptions = {
+    readonly method: 'GET' | 'PUT' | 'POST' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'PATCH';
+    readonly url: string;
+    readonly path?: Record<string, any>;
+    readonly cookies?: Record<string, any>;
+    readonly headers?: Record<string, any>;
+    readonly query?: Record<string, any>;
+    readonly formData?: Record<string, any>;
+    readonly body?: any;
+    readonly mediaType?: string;
+    readonly responseHeader?: string;
+    readonly errors?: Record<number, string>;
+};

modules/frontend/src/api_/core/ApiResult.ts

@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type ApiResult = {
+    readonly url: string;
+    readonly ok: boolean;
+    readonly status: number;
+    readonly statusText: string;
+    readonly body: any;
+};

modules/frontend/src/api_/core/CancelablePromise.ts

@@ -0,0 +1,131 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export class CancelError extends Error {
+
+    constructor(message: string) {
+        super(message);
+        this.name = 'CancelError';
+    }
+
+    public get isCancelled(): boolean {
+        return true;
+    }
+}
+
+export interface OnCancel {
+    readonly isResolved: boolean;
+    readonly isRejected: boolean;
+    readonly isCancelled: boolean;
+
+    (cancelHandler: () => void): void;
+}
+
+export class CancelablePromise<T> implements Promise<T> {
+    #isResolved: boolean;
+    #isRejected: boolean;
+    #isCancelled: boolean;
+    readonly #cancelHandlers: (() => void)[];
+    readonly #promise: Promise<T>;
+    #resolve?: (value: T | PromiseLike<T>) => void;
+    #reject?: (reason?: any) => void;
+
+    constructor(
+        executor: (
+            resolve: (value: T | PromiseLike<T>) => void,
+            reject: (reason?: any) => void,
+            onCancel: OnCancel
+        ) => void
+    ) {
+        this.#isResolved = false;
+        this.#isRejected = false;
+        this.#isCancelled = false;
+        this.#cancelHandlers = [];
+        this.#promise = new Promise<T>((resolve, reject) => {
+            this.#resolve = resolve;
+            this.#reject = reject;
+
+            const onResolve = (value: T | PromiseLike<T>): void => {
+                if (this.#isResolved || this.#isRejected || this.#isCancelled) {
+                    return;
+                }
+                this.#isResolved = true;
+                if (this.#resolve) this.#resolve(value);
+            };
+
+            const onReject = (reason?: any): void => {
+                if (this.#isResolved || this.#isRejected || this.#isCancelled) {
+                    return;
+                }
+                this.#isRejected = true;
+                if (this.#reject) this.#reject(reason);
+            };
+
+            const onCancel = (cancelHandler: () => void): void => {
+                if (this.#isResolved || this.#isRejected || this.#isCancelled) {
+                    return;
+                }
+                this.#cancelHandlers.push(cancelHandler);
+            };
+
+            Object.defineProperty(onCancel, 'isResolved', {
+                get: (): boolean => this.#isResolved,
+            });
+
+            Object.defineProperty(onCancel, 'isRejected', {
+                get: (): boolean => this.#isRejected,
+            });
+
+            Object.defineProperty(onCancel, 'isCancelled', {
+                get: (): boolean => this.#isCancelled,
+            });
+
+            return executor(onResolve, onReject, onCancel as OnCancel);
+        });
+    }
+
+    get [Symbol.toStringTag]() {
+        return "Cancellable Promise";
+    }
+
+    public then<TResult1 = T, TResult2 = never>(
+        onFulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
+        onRejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null
+    ): Promise<TResult1 | TResult2> {
+        return this.#promise.then(onFulfilled, onRejected);
+    }
+
+    public catch<TResult = never>(
+        onRejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null
+    ): Promise<T | TResult> {
+        return this.#promise.catch(onRejected);
+    }
+
+    public finally(onFinally?: (() => void) | null): Promise<T> {
+        return this.#promise.finally(onFinally);
+    }
+
+    public cancel(): void {
+        if (this.#isResolved || this.#isRejected || this.#isCancelled) {
+            return;
+        }
+        this.#isCancelled = true;
+        if (this.#cancelHandlers.length) {
+            try {
+                for (const cancelHandler of this.#cancelHandlers) {
+                    cancelHandler();
+                }
+            } catch (error) {
+                console.warn('Cancellation threw an error', error);
+                return;
+            }
+        }
+        this.#cancelHandlers.length = 0;
+        if (this.#reject) this.#reject(new CancelError('Request aborted'));
+    }
+
+    public get isCancelled(): boolean {
+        return this.#isCancelled;
+    }
+}

modules/frontend/src/api_/core/OpenAPI.ts

@@ -0,0 +1,32 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ApiRequestOptions } from './ApiRequestOptions';
+
+type Resolver<T> = (options: ApiRequestOptions) => Promise<T>;
+type Headers = Record<string, string>;
+
+export type OpenAPIConfig = {
+    BASE: string;
+    VERSION: string;
+    WITH_CREDENTIALS: boolean;
+    CREDENTIALS: 'include' | 'omit' | 'same-origin';
+    TOKEN?: string | Resolver<string> | undefined;
+    USERNAME?: string | Resolver<string> | undefined;
+    PASSWORD?: string | Resolver<string> | undefined;
+    HEADERS?: Headers | Resolver<Headers> | undefined;
+    ENCODE_PATH?: ((path: string) => string) | undefined;
+};
+
+export const OpenAPI: OpenAPIConfig = {
+    BASE: '/api/v1',
+    VERSION: '1.0.0',
+    WITH_CREDENTIALS: false,
+    CREDENTIALS: 'include',
+    TOKEN: undefined,
+    USERNAME: undefined,
+    PASSWORD: undefined,
+    HEADERS: undefined,
+    ENCODE_PATH: undefined,
+};

modules/frontend/src/api_/core/request.ts

@@ -0,0 +1,323 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import axios from 'axios';
+import type { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios';
+import FormData from 'form-data';
+
+import { ApiError } from './ApiError';
+import type { ApiRequestOptions } from './ApiRequestOptions';
+import type { ApiResult } from './ApiResult';
+import { CancelablePromise } from './CancelablePromise';
+import type { OnCancel } from './CancelablePromise';
+import type { OpenAPIConfig } from './OpenAPI';
+
+export const isDefined = <T>(value: T | null | undefined): value is Exclude<T, null | undefined> => {
+    return value !== undefined && value !== null;
+};
+
+export const isString = (value: any): value is string => {
+    return typeof value === 'string';
+};
+
+export const isStringWithValue = (value: any): value is string => {
+    return isString(value) && value !== '';
+};
+
+export const isBlob = (value: any): value is Blob => {
+    return (
+        typeof value === 'object' &&
+        typeof value.type === 'string' &&
+        typeof value.stream === 'function' &&
+        typeof value.arrayBuffer === 'function' &&
+        typeof value.constructor === 'function' &&
+        typeof value.constructor.name === 'string' &&
+        /^(Blob|File)$/.test(value.constructor.name) &&
+        /^(Blob|File)$/.test(value[Symbol.toStringTag])
+    );
+};
+
+export const isFormData = (value: any): value is FormData => {
+    return value instanceof FormData;
+};
+
+export const isSuccess = (status: number): boolean => {
+    return status >= 200 && status < 300;
+};
+
+export const base64 = (str: string): string => {
+    try {
+        return btoa(str);
+    } catch (err) {
+        // @ts-ignore
+        return Buffer.from(str).toString('base64');
+    }
+};
+
+export const getQueryString = (params: Record<string, any>): string => {
+    const qs: string[] = [];
+
+    const append = (key: string, value: any) => {
+        qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+    };
+
+    const process = (key: string, value: any) => {
+        if (isDefined(value)) {
+            if (Array.isArray(value)) {
+                value.forEach(v => {
+                    process(key, v);
+                });
+            } else if (typeof value === 'object') {
+                Object.entries(value).forEach(([k, v]) => {
+                    process(`${key}[${k}]`, v);
+                });
+            } else {
+                append(key, value);
+            }
+        }
+    };
+
+    Object.entries(params).forEach(([key, value]) => {
+        process(key, value);
+    });
+
+    if (qs.length > 0) {
+        return `?${qs.join('&')}`;
+    }
+
+    return '';
+};
+
+const getUrl = (config: OpenAPIConfig, options: ApiRequestOptions): string => {
+    const encoder = config.ENCODE_PATH || encodeURI;
+
+    const path = options.url
+        .replace('{api-version}', config.VERSION)
+        .replace(/{(.*?)}/g, (substring: string, group: string) => {
+            if (options.path?.hasOwnProperty(group)) {
+                return encoder(String(options.path[group]));
+            }
+            return substring;
+        });
+
+    const url = `${config.BASE}${path}`;
+    if (options.query) {
+        return `${url}${getQueryString(options.query)}`;
+    }
+    return url;
+};
+
+export const getFormData = (options: ApiRequestOptions): FormData | undefined => {
+    if (options.formData) {
+        const formData = new FormData();
+
+        const process = (key: string, value: any) => {
+            if (isString(value) || isBlob(value)) {
+                formData.append(key, value);
+            } else {
+                formData.append(key, JSON.stringify(value));
+            }
+        };
+
+        Object.entries(options.formData)
+            .filter(([_, value]) => isDefined(value))
+            .forEach(([key, value]) => {
+                if (Array.isArray(value)) {
+                    value.forEach(v => process(key, v));
+                } else {
+                    process(key, value);
+                }
+            });
+
+        return formData;
+    }
+    return undefined;
+};
+
+type Resolver<T> = (options: ApiRequestOptions) => Promise<T>;
+
+export const resolve = async <T>(options: ApiRequestOptions, resolver?: T | Resolver<T>): Promise<T | undefined> => {
+    if (typeof resolver === 'function') {
+        return (resolver as Resolver<T>)(options);
+    }
+    return resolver;
+};
+
+export const getHeaders = async (config: OpenAPIConfig, options: ApiRequestOptions, formData?: FormData): Promise<Record<string, string>> => {
+    const [token, username, password, additionalHeaders] = await Promise.all([
+        resolve(options, config.TOKEN),
+        resolve(options, config.USERNAME),
+        resolve(options, config.PASSWORD),
+        resolve(options, config.HEADERS),
+    ]);
+
+    const formHeaders = typeof formData?.getHeaders === 'function' && formData?.getHeaders() || {}
+
+    const headers = Object.entries({
+        Accept: 'application/json',
+        ...additionalHeaders,
+        ...options.headers,
+        ...formHeaders,
+    })
+    .filter(([_, value]) => isDefined(value))
+    .reduce((headers, [key, value]) => ({
+        ...headers,
+        [key]: String(value),
+    }), {} as Record<string, string>);
+
+    if (isStringWithValue(token)) {
+        headers['Authorization'] = `Bearer ${token}`;
+    }
+
+    if (isStringWithValue(username) && isStringWithValue(password)) {
+        const credentials = base64(`${username}:${password}`);
+        headers['Authorization'] = `Basic ${credentials}`;
+    }
+
+    if (options.body !== undefined) {
+        if (options.mediaType) {
+            headers['Content-Type'] = options.mediaType;
+        } else if (isBlob(options.body)) {
+            headers['Content-Type'] = options.body.type || 'application/octet-stream';
+        } else if (isString(options.body)) {
+            headers['Content-Type'] = 'text/plain';
+        } else if (!isFormData(options.body)) {
+            headers['Content-Type'] = 'application/json';
+        }
+    }
+
+    return headers;
+};
+
+export const getRequestBody = (options: ApiRequestOptions): any => {
+    if (options.body) {
+        return options.body;
+    }
+    return undefined;
+};
+
+export const sendRequest = async <T>(
+    config: OpenAPIConfig,
+    options: ApiRequestOptions,
+    url: string,
+    body: any,
+    formData: FormData | undefined,
+    headers: Record<string, string>,
+    onCancel: OnCancel,
+    axiosClient: AxiosInstance
+): Promise<AxiosResponse<T>> => {
+    const source = axios.CancelToken.source();
+
+    const requestConfig: AxiosRequestConfig = {
+        url,
+        headers,
+        data: body ?? formData,
+        method: options.method,
+        withCredentials: config.WITH_CREDENTIALS,
+        withXSRFToken: config.CREDENTIALS === 'include' ? config.WITH_CREDENTIALS : false,
+        cancelToken: source.token,
+    };
+
+    onCancel(() => source.cancel('The user aborted a request.'));
+
+    try {
+        return await axiosClient.request(requestConfig);
+    } catch (error) {
+        const axiosError = error as AxiosError<T>;
+        if (axiosError.response) {
+            return axiosError.response;
+        }
+        throw error;
+    }
+};
+
+export const getResponseHeader = (response: AxiosResponse<any>, responseHeader?: string): string | undefined => {
+    if (responseHeader) {
+        const content = response.headers[responseHeader];
+        if (isString(content)) {
+            return content;
+        }
+    }
+    return undefined;
+};
+
+export const getResponseBody = (response: AxiosResponse<any>): any => {
+    if (response.status !== 204) {
+        return response.data;
+    }
+    return undefined;
+};
+
+export const catchErrorCodes = (options: ApiRequestOptions, result: ApiResult): void => {
+    const errors: Record<number, string> = {
+        400: 'Bad Request',
+        401: 'Unauthorized',
+        403: 'Forbidden',
+        404: 'Not Found',
+        500: 'Internal Server Error',
+        502: 'Bad Gateway',
+        503: 'Service Unavailable',
+        ...options.errors,
+    }
+
+    const error = errors[result.status];
+    if (error) {
+        throw new ApiError(options, result, error);
+    }
+
+    if (!result.ok) {
+        const errorStatus = result.status ?? 'unknown';
+        const errorStatusText = result.statusText ?? 'unknown';
+        const errorBody = (() => {
+            try {
+                return JSON.stringify(result.body, null, 2);
+            } catch (e) {
+                return undefined;
+            }
+        })();
+
+        throw new ApiError(options, result,
+            `Generic Error: status: ${errorStatus}; status text: ${errorStatusText}; body: ${errorBody}`
+        );
+    }
+};
+
+/**
+ * Request method
+ * @param config The OpenAPI configuration object
+ * @param options The request options from the service
+ * @param axiosClient The axios client instance to use
+ * @returns CancelablePromise<T>
+ * @throws ApiError
+ */
+export const request = <T>(config: OpenAPIConfig, options: ApiRequestOptions, axiosClient: AxiosInstance = axios): CancelablePromise<T> => {
+    return new CancelablePromise(async (resolve, reject, onCancel) => {
+        try {
+            const url = getUrl(config, options);
+            const formData = getFormData(options);
+            const body = getRequestBody(options);
+            const headers = await getHeaders(config, options, formData);
+
+            if (!onCancel.isCancelled) {
+                const response = await sendRequest<T>(config, options, url, body, formData, headers, onCancel, axiosClient);
+                const responseBody = getResponseBody(response);
+                const responseHeader = getResponseHeader(response, options.responseHeader);
+
+                const result: ApiResult = {
+                    url,
+                    ok: isSuccess(response.status),
+                    status: response.status,
+                    statusText: response.statusText,
+                    body: responseHeader ?? responseBody,
+                };
+
+                catchErrorCodes(options, result);
+
+                resolve(result.body);
+            }
+        } catch (error) {
+            reject(error);
+        }
+    });
+};

modules/frontend/src/api_/index.ts

@@ -0,0 +1,23 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export { ApiError } from './core/ApiError';
+export { CancelablePromise, CancelError } from './core/CancelablePromise';
+export { OpenAPI } from './core/OpenAPI';
+export type { OpenAPIConfig } from './core/OpenAPI';
+
+export type { cursor } from './models/cursor';
+export type { Image } from './models/Image';
+export { ReleaseSeason } from './models/ReleaseSeason';
+export type { Review } from './models/Review';
+export type { Studio } from './models/Studio';
+export type { Tag } from './models/Tag';
+export type { Tags } from './models/Tags';
+export type { Title } from './models/Title';
+export { TitleStatus } from './models/TitleStatus';
+export type { User } from './models/User';
+export type { UserTitle } from './models/UserTitle';
+export { UserTitleStatus } from './models/UserTitleStatus';
+
+export { DefaultService } from './services/DefaultService';

modules/frontend/src/api_/models/Image.ts

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type Image = {
+    id?: number;
+    storage_type?: string;
+    image_path?: string;
+};
+

modules/frontend/src/api_/models/ReleaseSeason.ts

@@ -0,0 +1,13 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Title release season
+ */
+export enum ReleaseSeason {
+    WINTER = 'winter',
+    SPRING = 'spring',
+    SUMMER = 'summer',
+    FALL = 'fall',
+}

modules/frontend/src/api_/models/Review.ts

@@ -0,0 +1,5 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type Review = Record<string, any>;

modules/frontend/src/api_/models/Studio.ts

@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { Image } from './Image';
+export type Studio = {
+    id: number;
+    name: string;
+    poster?: Image;
+    description?: string;
+};
+

modules/frontend/src/api_/models/Tag.ts

@@ -0,0 +1,8 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * A localized tag: keys are language codes (ISO 639-1), values are tag names
+ */
+export type Tag = Record<string, string>;

modules/frontend/src/api_/models/Tags.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { Tag } from './Tag';
+/**
+ * Array of localized tags
+ */
+export type Tags = Array<Tag>;

modules/frontend/src/api_/models/Title.ts

@@ -0,0 +1,5 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type Title = Record<string, any>;

modules/frontend/src/api_/models/TitleStatus.ts

@@ -0,0 +1,12 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * Title status
+ */
+export enum TitleStatus {
+    FINISHED = 'finished',
+    ONGOING = 'ongoing',
+    PLANNED = 'planned',
+}

modules/frontend/src/api_/models/User.ts

@@ -0,0 +1,35 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type User = {
+    /**
+     * Unique user ID (primary key)
+     */
+    id: number;
+    /**
+     * ID of the user avatar (references images table)
+     */
+    avatar_id?: number | null;
+    /**
+     * User email
+     */
+    mail?: string;
+    /**
+     * Username (alphanumeric + _ or -)
+     */
+    nickname: string;
+    /**
+     * Display name
+     */
+    disp_name?: string;
+    /**
+     * User description
+     */
+    user_desc?: string;
+    /**
+     * Timestamp when the user was created
+     */
+    creation_date?: string;
+};
+

modules/frontend/src/api_/models/UserTitle.ts

@@ -0,0 +1,5 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type UserTitle = Record<string, any>;

modules/frontend/src/api_/models/UserTitleStatus.ts

@@ -0,0 +1,13 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * User's title status
+ */
+export enum UserTitleStatus {
+    FINISHED = 'finished',
+    PLANNED = 'planned',
+    DROPPED = 'dropped',
+    IN_PROGRESS = 'in-progress',
+}

modules/frontend/src/api_/models/cursor.ts

@@ -0,0 +1,5 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type cursor = string;

modules/frontend/src/api_/services/DefaultService.ts

@@ -0,0 +1,148 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+import type { ReleaseSeason } from '../models/ReleaseSeason';
+import type { Title } from '../models/Title';
+import type { TitleStatus } from '../models/TitleStatus';
+import type { User } from '../models/User';
+import type { UserTitle } from '../models/UserTitle';
+import type { CancelablePromise } from '../core/CancelablePromise';
+import { OpenAPI } from '../core/OpenAPI';
+import { request as __request } from '../core/request';
+export class DefaultService {
+    /**
+     * Get titles
+     * @param word
+     * @param status
+     * @param rating
+     * @param releaseYear
+     * @param releaseSeason
+     * @param limit
+     * @param offset
+     * @param fields
+     * @returns Title List of titles
+     * @throws ApiError
+     */
+    public static getTitles(
+        word?: string,
+        status?: TitleStatus,
+        rating?: number,
+        releaseYear?: number,
+        releaseSeason?: ReleaseSeason,
+        limit: number = 10,
+        offset?: number,
+        fields: string = 'all',
+    ): CancelablePromise<Array<Title>> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/titles',
+            query: {
+                'word': word,
+                'status': status,
+                'rating': rating,
+                'release_year': releaseYear,
+                'release_season': releaseSeason,
+                'limit': limit,
+                'offset': offset,
+                'fields': fields,
+            },
+            errors: {
+                400: `Request params are not correct`,
+                500: `Unknown server error`,
+            },
+        });
+    }
+    /**
+     * Get title description
+     * @param titleId
+     * @param fields
+     * @returns Title Title description
+     * @throws ApiError
+     */
+    public static getTitles1(
+        titleId: number,
+        fields: string = 'all',
+    ): CancelablePromise<Title> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/titles/{title_id}',
+            path: {
+                'title_id': titleId,
+            },
+            query: {
+                'fields': fields,
+            },
+            errors: {
+                400: `Request params are not correct`,
+                404: `Title not found`,
+                500: `Unknown server error`,
+            },
+        });
+    }
+    /**
+     * Get user info
+     * @param userId
+     * @param fields
+     * @returns User User info
+     * @throws ApiError
+     */
+    public static getUsers(
+        userId: string,
+        fields: string = 'all',
+    ): CancelablePromise<User> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/users/{user_id}',
+            path: {
+                'user_id': userId,
+            },
+            query: {
+                'fields': fields,
+            },
+            errors: {
+                400: `Request params are not correct`,
+                404: `User not found`,
+                500: `Unknown server error`,
+            },
+        });
+    }
+    /**
+     * Get user titles
+     * @param userId
+     * @param cursor
+     * @param query
+     * @param limit
+     * @param offset
+     * @param fields
+     * @returns UserTitle List of user titles
+     * @throws ApiError
+     */
+    public static getUsersTitles(
+        userId: string,
+        cursor?: string,
+        query?: string,
+        limit: number = 10,
+        offset?: number,
+        fields: string = 'all',
+    ): CancelablePromise<Array<UserTitle>> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/users/{user_id}/titles',
+            path: {
+                'user_id': userId,
+            },
+            query: {
+                'cursor': cursor,
+                'query': query,
+                'limit': limit,
+                'offset': offset,
+                'fields': fields,
+            },
+            errors: {
+                400: `Request params are not correct`,
+                500: `Unknown server error`,
+            },
+        });
+    }
+}

modules/frontend/src/components/ListView/ListView.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+interface ListViewProps<TItem> {
+  hook: ReturnType<typeof import("./useListView.tsx").useListView<TItem>>;
+  renderHorizontal: (item: TItem) => React.ReactNode;
+  renderSquare: (item: TItem) => React.ReactNode;
+}
+
+export function ListView<TItem>({
+  hook,
+  renderHorizontal,
+  renderSquare
+}: ListViewProps<TItem>) {
+  const { items, search, setSearch, viewMode, setViewMode, loadMore, hasMore } = hook;
+
+  return (
+    <div>
+      {/* Search + Layout Switcher */}
+      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
+        <input
+          placeholder="Search..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+
+        <button onClick={() => setViewMode("horizontal")}>Horizontal</button>
+        <button onClick={() => setViewMode("square")}>Square</button>
+      </div>
+
+      {/* Items */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: viewMode === "square" ? "repeat(auto-fill, 160px)" : "1fr",
+          gap: 12
+        }}
+      >
+        {items.map(item =>
+          viewMode === "horizontal"
+            ? renderHorizontal(item)
+            : renderSquare(item)
+        )}
+      </div>
+
+      {hasMore && (
+        <button onClick={loadMore} style={{ marginTop: 16 }}>
+          Load More
+        </button>
+      )}
+    </div>
+  );
+}

modules/frontend/src/components/ListView/useListView.tsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import type { FetchFunction } from "../../types/list";
+
+export function useListView<TItem>(fetchFn: FetchFunction<TItem>) {
+  const [items, setItems] = useState<TItem[]>([]);
+  const [cursor, setCursor] = useState<string | undefined>();
+  const [search, setSearch] = useState("");
+  const [viewMode, setViewMode] = useState<"horizontal" | "square">("horizontal");
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    loadItems(true);
+  }, [search]);
+
+  const loadItems = async (reset = false) => {
+    setIsLoading(true);
+    const result = await fetchFn({
+      search,
+      cursor: reset ? undefined : cursor,
+    });
+
+    setItems(prev => reset ? result.items : [...prev, ...result.items]);
+    setCursor(result.nextCursor);
+    setIsLoading(false);
+  };
+
+  return {
+    items,
+    search,
+    setSearch,
+    viewMode,
+    setViewMode,
+    loadMore: () => loadItems(),
+    hasMore: Boolean(cursor),
+    isLoading,
+  };
+}

modules/frontend/src/components/UserPage/UserPage.module.css

@@ -1,97 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  padding: 3rem 1rem;
-  background-color: #f5f6fa;
-  min-height: 100vh;
-  font-family: "Inter", sans-serif;
-}
-
-.card {
-  background-color: #ffffff;
-  border-radius: 1rem;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-  padding: 2rem;
-  max-width: 400px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-.avatar {
-  margin-bottom: 1.5rem;
-}
-
-.avatarImg {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 3px solid #4a90e2;
-}
-
-.avatarPlaceholder {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background-color: #dcdde1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 3rem;
-  color: #4a4a4a;
-  font-weight: bold;
-  border: 3px solid #4a90e2;
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.name {
-  font-size: 1.8rem;
-  font-weight: 700;
-  margin: 0.25rem 0;
-  color: #2f3640;
-}
-
-.nickname {
-  font-size: 1rem;
-  color: #718093;
-  margin-bottom: 1rem;
-}
-
-.desc {
-  font-size: 1rem;
-  color: #353b48;
-  margin-bottom: 1rem;
-}
-
-.created {
-  font-size: 0.9rem;
-  color: #7f8fa6;
-}
-
-.loader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 80vh;
-  font-size: 1.5rem;
-  color: #4a90e2;
-}
-
-.error {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 80vh;
-  color: #e84118;
-  font-weight: 600;
-  font-size: 1.2rem;
-}

modules/frontend/src/components/cards/TitleCardHorizontal.tsx

@@ -0,0 +1,22 @@
+import type { Title } from "../../api/models/Title";
+
+export function TitleCardHorizontal({ title }: { title: Title }) {
+  return (
+    <div style={{
+      display: "flex",
+      gap: 12,
+      padding: 12,
+      border: "1px solid #ddd",
+      borderRadius: 8
+    }}>
+      {title.posterUrl && (
+        <img src={title.posterUrl} width={80} />
+      )}
+      <div>
+        <h3>{title.name}</h3>
+        <p>{title.year} · {title.season} · Rating: {title.rating}</p>
+        <p>Status: {title.status}</p>
+      </div>
+    </div>
+  );
+}

modules/frontend/src/components/cards/TitleCardSquare.tsx

@@ -0,0 +1,22 @@
+// TitleCardSquare.tsx
+import type { Title } from "../../api/models/Title";
+
+export function TitleCardSquare({ title }: { title: Title }) {
+  return (
+    <div style={{
+      width: 160,
+      border: "1px solid #ddd",
+      padding: 8,
+      borderRadius: 8,
+      textAlign: "center"
+    }}>
+      {title.posterUrl && (
+        <img src={title.posterUrl} width={140} />
+      )}
+      <div>
+        <h4>{title.name}</h4>
+        <small>{title.year} • {title.rating}</small>
+      </div>
+    </div>
+  );
+}

modules/frontend/src/pages/TitlePage/TitlePage.tsx

@@ -0,0 +1,64 @@
+// import React, { useEffect, useState } from "react";
+// import { useParams } from "react-router-dom";
+// import { DefaultService } from "../../api/services/DefaultService";
+// import type { User } from "../../api/models/User";
+// import styles from "./UserPage.module.css";
+
+// const UserPage: React.FC = () => {
+//   const { id } = useParams<{ id: string }>();
+//   const [user, setUser] = useState<User | null>(null);
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState<string | null>(null);
+
+//   useEffect(() => {
+//     if (!id) return;
+
+//     const getTitleInfo = async () => {
+//       try {
+//         const userInfo = await DefaultService.getTitle(id, "all");
+//         setUser(userInfo);
+//       } catch (err) {
+//         console.error(err);
+//         setError("Failed to fetch user info.");
+//       } finally {
+//         setLoading(false);
+//       }
+//     };
+//     getTitleInfo();
+//   }, [id]);
+
+//   if (loading) return <div className={styles.loader}>Loading...</div>;
+//   if (error) return <div className={styles.error}>{error}</div>;
+//   if (!user) return <div className={styles.error}>User not found.</div>;
+
+//   return (
+//     <div className={styles.container}>
+//       <div className={styles.card}>
+//         <div className={styles.avatar}>
+//           {user.avatar_id ? (
+//             <img
+//               src={`/images/${user.avatar_id}.png`}
+//               alt="User Avatar"
+//               className={styles.avatarImg}
+//             />
+//           ) : (
+//             <div className={styles.avatarPlaceholder}>
+//               {user.disp_name?.[0] || "U"}
+//             </div>
+//           )}
+//         </div>
+
+//         <div className={styles.info}>
+//           <h1 className={styles.name}>{user.disp_name || user.nickname}</h1>
+//           <p className={styles.nickname}>@{user.nickname}</p>
+//           {user.user_desc && <p className={styles.desc}>{user.user_desc}</p>}
+//           <p className={styles.created}>
+//             Joined: {new Date(user.creation_date).toLocaleDateString()}
+//           </p>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default UserPage;

modules/frontend/src/pages/TitlesPage/TitlesPage.module.css

@@ -0,0 +1,59 @@
+.container {
+  padding: 24px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.searchInput {
+  padding: 8px;
+  width: 240px;
+}
+
+.list {
+  display: grid;
+  gap: 12px;
+}
+
+.card {
+  display: flex;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  gap: 12px;
+}
+
+.poster {
+  width: 80px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.posterPlaceholder {
+  width: 80px;
+  height: 120px;
+  background: #eee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cardInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.loadMore {
+  margin-top: 16px;
+  padding: 8px 16px;
+}
+
+.loader,
+.error {
+  padding: 20px;
+  text-align: center;
+}

modules/frontend/src/pages/TitlesPage/TitlesPage.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from "react";
+import { DefaultService } from "../../api/services/DefaultService";
+import type { Title } from "../../api/models/Title";
+import styles from "./TitlesPage.module.css";
+
+const LIMIT = 20;
+
+const TitlesPage: React.FC = () => {
+  const [titles, setTitles] = useState<Title[]>([]);
+  const [search, setSearch] = useState("");
+  const [offset, setOffset] = useState(0);
+
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTitles = async (reset: boolean) => {
+    try {
+      if (reset) {
+        setLoading(true);
+        setOffset(0);
+      } else {
+        setLoadingMore(true);
+      }
+
+      const result = await DefaultService.getTitles(
+        search || undefined,
+        undefined,  // status
+        undefined,  // rating
+        undefined,  // release_year
+        undefined,  // release_season
+        LIMIT,
+        reset ? 0 : offset,
+        "all"
+      );
+
+      if (reset) {
+        setTitles(result);
+      } else {
+        setTitles(prev => [...prev, ...result]);
+      }
+
+      if (result.length > 0) {
+        setOffset(prev => prev + LIMIT);
+      }
+
+    } catch (err) {
+      console.error(err);
+      setError("Failed to fetch titles.");
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTitles(true);
+  }, [search]);
+
+  if (loading) return <div className={styles.loader}>Loading...</div>;
+  if (error) return <div className={styles.error}>{error}</div>;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1>Titles</h1>
+
+        <input
+          className={styles.searchInput}
+          placeholder="Search titles..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+      </div>
+
+      <div className={styles.list}>
+        {titles.map((t) => (
+          <div key={t.id} className={styles.card}>
+            {t.poster_id ? (
+              <img
+                src={`/images/${t.poster_id}.png`}
+                alt="Poster"
+                className={styles.poster}
+              />
+            ) : (
+              <div className={styles.posterPlaceholder}>No Image</div>
+            )}
+
+            <div className={styles.cardInfo}>
+              <h3 className={styles.titleName}>{t.name}</h3>
+              <p className={styles.meta}>
+                {t.release_year} • {t.release_season}
+              </p>
+              <p className={styles.rating}>Rating: {t.rating}</p>
+              <p className={styles.status}>{t.status}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {titles.length > 0 && (
+        <button
+          className={styles.loadMore}
+          onClick={() => fetchTitles(false)}
+          disabled={loadingMore}
+        >
+          {loadingMore ? "Loading..." : "Load More"}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default TitlesPage;

modules/frontend/src/pages/UserPage/UserPage.module.css

@@ -0,0 +1,103 @@
+body,
+html {
+  width: 100%;
+  margin: 0;
+  background-color: #777;
+  color: #fff;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+.header {
+  width: 100vw;
+  padding: 30px 40px;
+  background: #f7f7f7;
+  display: flex;
+  align-items: center;
+  gap: 25px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid #e5e5e5;
+  color: #000000;
+}
+
+.avatarWrapper {
+  width: 120px;
+  height: 120px;
+  min-width: 120px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ddd;
+}
+
+.avatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatarPlaceholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #ccc;
+  font-size: 42px;
+  font-weight: bold;
+  color: #555;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.name {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.nickname {
+  font-size: 18px;
+  color: #666;
+  margin-top: 6px;
+}
+
+.container {
+  max-width: 100vw;
+  width: 100%;
+  position: absolute;
+  top: 0%;
+  /* margin: 25px auto; */
+  /* padding: 0 20px; */
+}
+
+.content {
+  margin-top: 20px;
+}
+
+.desc {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.created {
+  font-size: 16px;
+  color: #888;
+}
+
+.loader,
+.error {
+  text-align: center;
+  margin-top: 40px;
+  font-size: 18px;
+}

modules/frontend/src/pages/UserPage/UserPage.tsx

@@ -33,8 +33,8 @@ const UserPage: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.card}>
-        <div className={styles.avatar}>
+      <div className={styles.header}>
+        <div className={styles.avatarWrapper}>
           {user.avatar_id ? (
             <img
               src={`/images/${user.avatar_id}.png`}
@@ -48,13 +48,16 @@ const UserPage: React.FC = () => {
           )}
         </div>
 
-        <div className={styles.info}>
+        <div className={styles.userInfo}>
           <h1 className={styles.name}>{user.disp_name || user.nickname}</h1>
           <p className={styles.nickname}>@{user.nickname}</p>
-          {user.user_desc && <p className={styles.desc}>{user.user_desc}</p>}
-          <p className={styles.created}>
+          {/* <p className={styles.created}>
             Joined: {new Date(user.creation_date).toLocaleDateString()}
-          </p>
+          </p> */}
+        </div>
+
+        <div className={styles.content}>
+          {user.user_desc && <p className={styles.desc}>{user.user_desc}</p>}
         </div>
       </div>
     </div>

modules/frontend/src/types/list.ts

@@ -0,0 +1,12 @@
+export interface PaginatedResult<TItem> {
+  items: TItem[];
+  nextCursor?: string;
+}
+
+export interface FetchParams {
+  search: string;
+  cursor?: string;
+}
+
+export type FetchFunction<TItem> =
+  (params: FetchParams) => Promise<PaginatedResult<TItem>>;