feat: added templates for user profile + competition constructor (if will be), started working on synchronizing front and back session

services/frontend/bun.lock

@@ -6,6 +6,8 @@
       "dependencies": {
         "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-label": "^2.1.2",
+        "@radix-ui/react-radio-group": "^1.2.3",
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tabs": "^1.1.3",
         "@tailwindcss/vite": "^4.0.9",
@@ -157,12 +159,16 @@
 
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.0", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA=="],
 
+    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.2", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw=="],
+
     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.4", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA=="],
 
     "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg=="],
 
     "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.0.2", "", { "dependencies": { "@radix-ui/react-slot": "1.1.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w=="],
 
+    "@radix-ui/react-radio-group": ["@radix-ui/react-radio-group@1.2.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-roving-focus": "1.1.2", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-use-size": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-xtCsqt8Rp09FK50ItqEqTJ7Sxanz8EM8dnkVIhJrc/wkMMomSmXHvYbhv3E7Zx4oXh98aaLt9W679SUYXg4IDA=="],
+
     "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.2", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw=="],
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ=="],
@@ -177,6 +183,10 @@
 
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w=="],
 
+    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og=="],
+
+    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.0", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw=="],
+
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.34.9", "", { "os": "android", "cpu": "arm" }, "sha512-qZdlImWXur0CFakn2BJ2znJOdqYZKiedEPEVNTBrpfPjc/YuTGcaYZcdmNFTkUj3DU0ZM/AElcM8Ybww3xVLzA=="],
 
     "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.34.9", "", { "os": "android", "cpu": "arm64" }, "sha512-4KW7P53h6HtJf5Y608T1ISKvNIYLWRKMvfnG0c44M6In4DQVU58HZFEVhWINDZKp7FZps98G3gxwC1sb0wXUUg=="],

services/frontend/package.json

@@ -12,6 +12,8 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
     "@tailwindcss/vite": "^4.0.9",

services/frontend/src/App.tsx

@@ -1,5 +1,5 @@
-import { Routes, Route } from "react-router";
 import "./styles/globals.css";
+import { Routes, Route } from "react-router";
 
 import { NavbarLayout } from "./widgets/navbar-layout";
 
@@ -8,6 +8,8 @@ import Competition from "./pages/Competition";
 import CompetitionSession from "./pages/CompetitionSession";
 import LoginPage from "./pages/Login";
 import { AuthLayout } from "./widgets/auth-layout";
+import CompetitionConstructor from "./pages/CompetitionConstructor";
+import UserProfile from "./pages/UserProfile";
 
 const App = () => {
   return (
@@ -24,6 +26,27 @@ const App = () => {
           path="/competition/:id/tasks/:taskId"
           element={<CompetitionSession />}
         />
+
+        <Route
+          path="/constructor/:id"
+          element={<CompetitionConstructor />}
+        />
+
+        <Route
+          path="/constructor/new"
+          element={<CompetitionConstructor />}
+        />
+
+        <Route
+          path="/constructor/:id/tasks/:taskId"
+          element={<CompetitionConstructor />}
+        />
+
+        <Route
+          path="/profile"
+          element={<UserProfile />}
+        />
+
       </Route>
     </Routes>
   );

services/frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,133 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/shared/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

services/frontend/src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/shared/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

services/frontend/src/components/ui/radio-group.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/shared/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

services/frontend/src/pages/CompetitionConstructor/components/ConstructorHeader/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Task } from "@/shared/types";
+import { Settings, Plus } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+
+interface ConstructorHeaderProps {
+  title: string;
+  tasks: Task[];
+  competitionId: string;
+  onAddTaskClick: () => void;
+}
+
+const ConstructorHeader: React.FC<ConstructorHeaderProps> = ({ 
+  title,
+  tasks, 
+  competitionId,
+  onAddTaskClick
+}) => {
+  return (
+    <header className="bg-white shadow-sm sticky top-0 z-30 w-full">
+      <div className="mx-auto max-w-6xl px-4">
+        <div className="py-4 text-center">
+          <h1 className="font-hse-sans text-xl font-semibold">
+            {title}
+          </h1>
+        </div>
+        
+        <div className="flex items-center justify-center gap-4 pb-4 overflow-x-auto no-scrollbar">
+          <Link
+            to={`/constructor/${competitionId}/tasks/settings`}
+            className="bg-gray-100 text-gray-700 rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer 
+              transition-all hover:bg-gray-200 flex-shrink-0 flex items-center"
+          >
+            <Settings size={16} className="mr-1" />
+          </Link>
+          
+          {tasks.map((task) => (
+            <Link
+              key={task.id}
+              to={`/constructor/${competitionId}/tasks/${task.id}`}
+              className="bg-blue-100 text-blue-700 rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer 
+                transition-all hover:bg-blue-200 flex-shrink-0"
+            >
+              {task.number}
+            </Link>
+          ))}
+          
+          <Button
+            variant="ghost"
+            size="sm"
+            className="rounded-lg flex items-center px-2 h-8"
+            onClick={onAddTaskClick}
+          >
+            <Plus size={18} />
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default ConstructorHeader;

services/frontend/src/pages/CompetitionConstructor/index.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { useParams, Navigate, useNavigate } from "react-router-dom";
+import { Task, TaskStatus } from "@/shared/types";
+import ConstructorHeader from "./components/ConstructorHeader";
+import TaskCreationModal from "./modules/TaskCreationModal";
+
+const CompetitionConstructor = () => {
+  const { id, taskId } = useParams<{ id: string; taskId?: string }>();
+  const navigate = useNavigate();
+  const [competitionTitle, setCompetitionTitle] = useState("Новая олимпиада");
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+  
+  const isSettings = taskId === "settings";
+  
+  const handleOpenTaskModal = () => {
+    setIsTaskModalOpen(true);
+  };
+  
+  const handleCloseTaskModal = () => {
+    setIsTaskModalOpen(false);
+  };
+  
+  const handleCreateTask = (taskData: Partial<Task>) => {
+    const newTask: Task = {
+      id: `task-${Date.now()}`,
+      number: taskData.number || `${tasks.length + 1}`,
+      status: TaskStatus.Uncleared,
+      solutionType: taskData.solutionType || "input",
+      description: taskData.description || "",
+      requirements: taskData.requirements,
+      attachments: taskData.attachments || []
+    };
+    
+    setTasks([...tasks, newTask]);
+    setIsTaskModalOpen(false);
+    navigate(`/constructor/${id}/tasks/${newTask.id}`);
+  };
+  
+  if (!taskId) {
+    if (tasks.length > 0) {
+      return <Navigate to={`/constructor/${id}/tasks/${tasks[0].id}`} replace />;
+    } else {
+      return <Navigate to={`/constructor/${id}/tasks/settings`} replace />;
+    }
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <ConstructorHeader 
+        title={competitionTitle}
+        tasks={tasks} 
+        competitionId={id || ""}
+        onAddTaskClick={handleOpenTaskModal}
+      />
+      
+      <TaskCreationModal 
+        isOpen={isTaskModalOpen}
+        onClose={handleCloseTaskModal}
+        onCreateTask={handleCreateTask}
+        taskCount={tasks.length}
+      />
+      
+      <main className="flex-1 bg-[#F8F8F8] pb-8">
+        <div className="max-w-6xl mx-auto px-4 py-6">
+          {isSettings ? (
+            <div className="bg-white rounded-lg p-6 shadow-sm">
+              <h2 className="text-2xl font-semibold mb-6 font-hse-sans">Настройки олимпиады</h2>
+              <p className="text-gray-500 font-hse-sans">
+                Здесь будет форма настроек олимпиады
+              </p>
+            </div>
+          ) : (
+            <div className="bg-white rounded-lg p-6 shadow-sm">
+              <h2 className="text-2xl font-semibold mb-6 font-hse-sans">
+                {`Редактирование задачи ${tasks.find(t => t.id === taskId)?.number || ""}`}
+              </h2>
+              <p className="text-gray-500 font-hse-sans">
+                Здесь будет форма редактирования задачи
+              </p>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default CompetitionConstructor;

services/frontend/src/pages/CompetitionConstructor/modules/TaskCreationModal/components/TaskDescriptionField/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+
+interface TaskDescriptionFieldProps {
+  description: string;
+  onChange: (value: string) => void;
+}
+
+const TaskDescriptionField: React.FC<TaskDescriptionFieldProps> = ({ description, onChange }) => {
+  return (
+    <div className="grid grid-cols-4 items-start gap-4">
+      <Label htmlFor="description" className="text-right pt-2">
+        Описание
+      </Label>
+      <Textarea
+        id="description"
+        value={description}
+        onChange={(e) => onChange(e.target.value)}
+        className="col-span-3 min-h-[100px]"
+        placeholder="Введите описание задачи"
+      />
+    </div>
+  );
+};
+
+export default TaskDescriptionField;

services/frontend/src/pages/CompetitionConstructor/modules/TaskCreationModal/components/TaskFileAttachments/index.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { FileIcon, X, Upload } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+interface TaskFileAttachmentsProps {
+  files: File[];
+  onChange: (files: File[]) => void;
+}
+
+const TaskFileAttachments: React.FC<TaskFileAttachmentsProps> = ({ files, onChange }) => {
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const newFiles = Array.from(e.target.files);
+      onChange([...files, ...newFiles]);
+    }
+  };
+  
+  const removeFile = (index: number) => {
+    onChange(files.filter((_, i) => i !== index));
+  };
+  
+  return (
+    <div className="grid grid-cols-4 items-start gap-4">
+      <Label className="text-right pt-2">
+        Файлы
+      </Label>
+      <div className="col-span-3">
+        <div className="flex flex-col gap-2">
+          {files.map((file, index) => (
+            <FileListItem 
+              key={index} 
+              file={file} 
+              onRemove={() => removeFile(index)} 
+            />
+          ))}
+          
+          <FileUploadButton onChange={handleFileChange} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface FileListItemProps {
+  file: File;
+  onRemove: () => void;
+}
+
+const FileListItem: React.FC<FileListItemProps> = ({ file, onRemove }) => {
+  return (
+    <div className="flex items-center justify-between p-2 border rounded-md">
+      <div className="flex items-center">
+        <FileIcon size={16} className="mr-2 text-gray-500" />
+        <span className="text-sm">{file.name}</span>
+        <span className="text-xs text-gray-500 ml-2">
+          ({Math.round(file.size / 1024)} KB)
+        </span>
+      </div>
+      <Button 
+        variant="ghost" 
+        size="sm" 
+        onClick={onRemove}
+      >
+        <X size={16} />
+      </Button>
+    </div>
+  );
+};
+
+interface FileUploadButtonProps {
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const FileUploadButton: React.FC<FileUploadButtonProps> = ({ onChange }) => {
+  return (
+    <label className="cursor-pointer">
+      <div className="flex items-center gap-2 p-2 border border-dashed rounded-md hover:bg-gray-50 transition-colors">
+        <Upload size={16} className="text-gray-500" />
+        <span className="text-sm text-gray-700">Добавить файлы</span>
+      </div>
+      <input 
+        type="file" 
+        className="hidden" 
+        onChange={onChange}
+        multiple
+      />
+    </label>
+  );
+};
+
+export default TaskFileAttachments;

services/frontend/src/pages/CompetitionConstructor/modules/TaskCreationModal/components/TaskNumberField/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface TaskNumberFieldProps {
+  number: string;
+  onChange: (value: string) => void;
+}
+
+const TaskNumberField: React.FC<TaskNumberFieldProps> = ({ number, onChange }) => {
+  return (
+    <div className="grid grid-cols-4 items-center gap-4">
+      <Label htmlFor="task-number" className="text-right">
+        Номер задачи
+      </Label>
+      <Input
+        id="task-number"
+        value={number}
+        onChange={(e) => onChange(e.target.value)}
+        className="col-span-3"
+      />
+    </div>
+  );
+};
+
+export default TaskNumberField;

services/frontend/src/pages/CompetitionConstructor/modules/TaskCreationModal/components/TaskRequirementsField/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+
+interface TaskRequirementsFieldProps {
+  requirements: string;
+  onChange: (value: string) => void;
+}
+
+const TaskRequirementsField: React.FC<TaskRequirementsFieldProps> = ({ requirements, onChange }) => {
+  return (
+    <div className="grid grid-cols-4 items-start gap-4">
+      <Label htmlFor="requirements" className="text-right pt-2">
+        Требования
+      </Label>
+      <Textarea
+        id="requirements"
+        value={requirements}
+        onChange={(e) => onChange(e.target.value)}
+        className="col-span-3"
+        placeholder="Введите требования к решению (необязательно)"
+      />
+    </div>
+  );
+};
+
+export default TaskRequirementsField;

services/frontend/src/pages/CompetitionConstructor/modules/TaskCreationModal/components/TaskSolutionTypeSelector/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { 
+  RadioGroup, 
+  RadioGroupItem 
+} from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+
+interface TaskSolutionTypeSelectorProps {
+  solutionType: 'input' | 'file' | 'code';
+  onChange: (value: 'input' | 'file' | 'code') => void;
+}
+
+const TaskSolutionTypeSelector: React.FC<TaskSolutionTypeSelectorProps> = ({ solutionType, onChange }) => {
+  return (
+    <div className="grid grid-cols-4 items-start gap-4">
+      <Label className="text-right pt-2">
+        Тип решения
+      </Label>
+      <RadioGroup 
+        className="col-span-3" 
+        value={solutionType} 
+        onValueChange={(value) => onChange(value as 'input' | 'file' | 'code')}
+      >
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="input" id="input" />
+          <Label htmlFor="input">Ввод ответа</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="file" id="file" />
+          <Label htmlFor="file">Загрузка файла</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="code" id="code" />
+          <Label htmlFor="code">Программный код</Label>
+        </div>
+      </RadioGroup>
+    </div>
+  );
+};
+
+export default TaskSolutionTypeSelector;

services/frontend/src/pages/CompetitionConstructor/modules/TaskCreationModal/index.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogFooter 
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Task } from "@/shared/types";
+import TaskNumberField from './components/TaskNumberField';
+import TaskDescriptionField from './components/TaskDescriptionField';
+import TaskRequirementsField from './components/TaskRequirementsField';
+import TaskSolutionTypeSelector from './components/TaskSolutionTypeSelector';
+import TaskFileAttachments from './components/TaskFileAttachments';
+
+interface TaskCreationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreateTask: (task: Partial<Task>) => void;
+  taskCount: number;
+}
+
+const TaskCreationModal: React.FC<TaskCreationModalProps> = ({
+  isOpen,
+  onClose,
+  onCreateTask,
+  taskCount
+}) => {
+  const [number, setNumber] = useState(`${taskCount + 1}`);
+  const [description, setDescription] = useState('');
+  const [requirements, setRequirements] = useState('');
+  const [solutionType, setSolutionType] = useState<'input' | 'file' | 'code'>('input');
+  const [attachedFiles, setAttachedFiles] = useState<File[]>([]);
+  
+  const handleSubmit = () => {
+    const newTask: Partial<Task> = {
+      number,
+      description,
+      requirements: requirements || undefined,
+      solutionType,
+      attachments: attachedFiles.map(file => file.name)
+    };
+    
+    onCreateTask(newTask);
+    
+    setNumber(`${taskCount + 1}`);
+    setDescription('');
+    setRequirements('');
+    setSolutionType('input');
+    setAttachedFiles([]);
+  };
+  
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[600px] font-hse-sans">
+        <DialogHeader>
+          <DialogTitle className="text-xl">Создание новой задачи</DialogTitle>
+        </DialogHeader>
+        
+        <div className="grid gap-4 py-4">
+          <TaskNumberField 
+            number={number} 
+            onChange={setNumber} 
+          />
+          
+          <TaskDescriptionField 
+            description={description} 
+            onChange={setDescription} 
+          />
+          
+          <TaskRequirementsField 
+            requirements={requirements} 
+            onChange={setRequirements} 
+          />
+          
+          <TaskSolutionTypeSelector 
+            solutionType={solutionType} 
+            onChange={setSolutionType} 
+          />
+          
+          <TaskFileAttachments 
+            files={attachedFiles} 
+            onChange={setAttachedFiles} 
+          />
+        </div>
+        
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose}>
+            Отмена
+          </Button>
+          <Button type="button" onClick={handleSubmit}>
+            Создать задачу
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TaskCreationModal;

services/frontend/src/pages/CompetitionSession/components/CompetitionHeader/index.tsx

@@ -15,7 +15,7 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
   competitionId 
 }) => {
   return (
-    <header className="bg-white shadow-sm">
+    <header className="bg-white shadow-sm sticky top-0 z-30 w-full">
       <div className="mx-auto max-w-6xl px-4">
         <div className="py-4 text-center">
           <h1 className="font-hse-sans text-xl font-semibold">

services/frontend/src/pages/CompetitionSession/index.tsx

@@ -1,43 +1,88 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useParams, Navigate } from "react-router-dom";
-import { Task } from "@/shared/types";
+import { Task, TaskStatus } from "@/shared/types";
-import { mockSolutions, mockTasks } from "@/shared/mocks/mocks";
+import { mockSolutions } from "@/shared/mocks/mocks"; // Keep mocks for solutions for now
 import CompetitionHeader from "./components/CompetitionHeader";
 import TaskContent from "./components/TaskContent";
 import TaskSolution from "./modules/TaskSolution";
+import { getCompetitionTasks } from "@/shared/api/session";
+import { Loader2 } from "lucide-react";
 
 const CompetitionSession = () => {
   const { id, taskId } = useParams<{ id: string; taskId?: string }>();
-  const [tasks] = useState<Task[]>(mockTasks);
+  const [tasks, setTasks] = useState<Task[]>([]);
   const [answer, setAnswer] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const competitionId = id || "";
+
+  useEffect(() => {
+    const fetchTasks = async () => {
+      try {
+        setLoading(true);
+        const fetchedTasks = await getCompetitionTasks(competitionId);
+        setTasks(fetchedTasks);
+        setError(null);
+      } catch (err) {
+        console.error("Failed to fetch tasks:", err);
+        setError("Не удалось загрузить задания. Пожалуйста, попробуйте позже.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (competitionId) {
+      fetchTasks();
+    }
+  }, [competitionId]);
 
   const currentTask = tasks.find(t => t.id === taskId) || null;
 
-  if (!taskId && tasks.length > 0) {
+  if (!taskId && tasks.length > 0 && !loading) {
-    return <Navigate to={`/competition/${id}/tasks/${tasks[0].id}`} replace />;
+    return <Navigate to={`/competition/${competitionId}/tasks/${tasks[0].id}`} replace />;
   }
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
-    console.log("Submitting answer:", answer);
+    if (!currentTask || !competitionId) return;
+    
+    try {
+
+      console.log("Solution submitted successfully");
+    } catch (err) {
+      console.error("Failed to submit solution:", err);
+    }
   };
-  
 
   return (
     <div className="flex flex-col min-h-screen">
       <CompetitionHeader 
         title="Олимпиада DANO 2025. Индивидуальный этап"
         tasks={tasks} 
-        competitionId={id || ""}  
+        competitionId={competitionId}  
       />
       
       <main className="flex-1 bg-[#F8F8F8] pb-8">
         <div className="max-w-6xl mx-auto px-4 py-6">
-          {currentTask ? (
+          {loading ? (
+            <div className="flex flex-col items-center justify-center h-40 bg-white rounded-lg">
+              <Loader2 className="h-8 w-8 animate-spin text-gray-400 mb-2" />
+              <p className="font-hse-sans text-gray-500">
+                Загрузка заданий...
+              </p>
+            </div>
+          ) : error ? (
+            <div className="flex justify-center items-center h-40 bg-white rounded-lg">
+              <p className="font-hse-sans text-red-500">
+                {error}
+              </p>
+            </div>
+          ) : currentTask ? (
             <div className="flex flex-col md:flex-row gap-6 font-hse-sans">
               <TaskContent task={currentTask} />
               <TaskSolution 
                 task={currentTask}
-                solutions={mockSolutions}
+                solutions={mockSolutions} // Still using mock solutions
                 answer={answer}
                 setAnswer={setAnswer}
                 onSubmit={handleSubmit}
@@ -46,7 +91,7 @@ const CompetitionSession = () => {
           ) : (
             <div className="flex justify-center items-center h-40 bg-white rounded-lg">
               <p className="font-hse-sans text-gray-500">
-                Загрузка задания...
+                Задание не найдено
               </p>
             </div>
           )}

services/frontend/src/pages/Competitions/components/CompetitionTag/index.tsx

@@ -1,26 +0,0 @@
-import { cn } from "@/shared/lib/utils";
-import { Badge } from "@/components/ui/badge";
-
-interface CompetitionTagProps {
-  label: string;
-  variant: 'olympics' | 'status';
-  className?: string;
-}
-
-const CompetitionTag = ({ label, variant, className }: CompetitionTagProps) => {
-  return (
-    <Badge 
-      variant="secondary"
-      className={cn(
-        "text-xs font-medium",
-        variant === 'olympics' && "bg-yellow-400 text-yellow-800 hover:bg-yellow-500 font-hse-sans",
-        variant === 'status' && "bg-black text-white hover:bg-gray-800 font-hse-sans",
-        className 
-      )}
-    >
-      {label}
-    </Badge>
-  );
-}
-
-export default CompetitionTag

services/frontend/src/pages/UserProfile/index.tsx

@@ -0,0 +1,398 @@
+import React from "react";
+import { User } from "lucide-react";
+import { useUserStore } from "@/shared/stores/user";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+const UserProfile = () => {
+  const user = useUserStore((state) => state.user);
+
+  return (
+    <div className="container mx-auto max-w-5xl px-4 py-8">
+      <div className="mb-8 flex items-center gap-6">
+        <div className="flex h-24 w-24 items-center justify-center rounded-full bg-blue-100">
+          {user?.avatar ? (
+            <img
+              src={user.avatar}
+              alt={user.username}
+              className="h-24 w-24 rounded-full object-cover"
+            />
+          ) : (
+            <User size={40} className="text-blue-500" />
+          )}
+        </div>
+        <div>
+          <h1 className="font-hse-sans text-3xl font-bold">{user?.username}</h1>
+          <p className="font-hse-sans text-gray-500">
+            {user?.role || "Участник"} • На платформе с{" "}
+            {new Date(user?.createdAt || Date.now()).toLocaleDateString("ru-RU", {
+              year: "numeric",
+              month: "long",
+            })}
+          </p>
+        </div>
+      </div>
+
+      <Tabs defaultValue="info" className="w-full">
+        <TabsList className="mb-6 w-full justify-start">
+          <TabsTrigger value="info" className="font-hse-sans">
+            Информация
+          </TabsTrigger>
+          <TabsTrigger value="statistics" className="font-hse-sans">
+            Статистика
+          </TabsTrigger>
+          <TabsTrigger value="achievements" className="font-hse-sans">
+            Достижения
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="info">
+          <UserInfo />
+        </TabsContent>
+
+        <TabsContent value="statistics">
+          <UserStatistics />
+        </TabsContent>
+
+        <TabsContent value="achievements">
+          <UserAchievements />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+const UserInfo = () => {
+  const user = useUserStore((state) => state.user);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="font-hse-sans">Личная информация</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          <div>
+            <h3 className="font-hse-sans text-sm font-medium text-gray-500">
+              Полное имя
+            </h3>
+            <p className="font-hse-sans mt-1">
+              {user?.fullName || "Не указано"}
+            </p>
+          </div>
+
+          <div>
+            <h3 className="font-hse-sans text-sm font-medium text-gray-500">
+              Email
+            </h3>
+            <p className="font-hse-sans mt-1">{user?.email || "Не указано"}</p>
+          </div>
+
+          <div>
+            <h3 className="font-hse-sans text-sm font-medium text-gray-500">
+              Учебное заведение
+            </h3>
+            <p className="font-hse-sans mt-1">
+              {user?.university || "Не указано"}
+            </p>
+          </div>
+
+          <div>
+            <h3 className="font-hse-sans text-sm font-medium text-gray-500">
+              Специализация
+            </h3>
+            <p className="font-hse-sans mt-1">
+              {user?.specialization || "Не указано"}
+            </p>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="font-hse-sans text-sm font-medium text-gray-500">
+            О себе
+          </h3>
+          <p className="font-hse-sans mt-1">
+            {user?.bio || "Пользователь пока не добавил информацию о себе."}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+const UserStatistics = () => {
+  // Mock statistics data
+  const statistics = {
+    totalCompetitions: 12,
+    completedCompetitions: 8,
+    totalScore: 756,
+    averageScore: 94.5,
+    bestResult: {
+      competition: "Олимпиада DANO 2024",
+      place: 3,
+      score: 97,
+    },
+    totalTasks: 86,
+    solvedTasks: 72,
+    tasksByStatus: {
+      correct: 58,
+      partial: 14,
+      wrong: 9,
+      unattempted: 5,
+    },
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          title="Всего соревнований"
+          value={statistics.totalCompetitions}
+        />
+        <StatCard
+          title="Завершено соревнований"
+          value={statistics.completedCompetitions}
+        />
+        <StatCard title="Всего баллов" value={statistics.totalScore} />
+        <StatCard
+          title="Средний балл"
+          value={statistics.averageScore.toFixed(1)}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="font-hse-sans">Лучший результат</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <p className="font-hse-sans text-lg font-medium">
+                {statistics.bestResult.competition}
+              </p>
+              <div className="flex items-center justify-between">
+                <span className="font-hse-sans text-gray-500">Место</span>
+                <span className="font-hse-sans font-medium">
+                  {statistics.bestResult.place}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="font-hse-sans text-gray-500">Баллы</span>
+                <span className="font-hse-sans font-medium">
+                  {statistics.bestResult.score}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="font-hse-sans">Решение задач</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="mb-4 space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="font-hse-sans">Всего задач</span>
+                <span className="font-hse-sans font-medium">
+                  {statistics.totalTasks}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="font-hse-sans">Решено задач</span>
+                <span className="font-hse-sans font-medium">
+                  {statistics.solvedTasks}
+                </span>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="font-hse-sans text-sm font-medium">
+                Статусы решений
+              </h4>
+              <div className="h-6 w-full overflow-hidden rounded-full bg-gray-200">
+                <div className="flex h-full">
+                  <div
+                    className="bg-green-500"
+                    style={{
+                      width: `${
+                        (statistics.tasksByStatus.correct /
+                          statistics.totalTasks) *
+                        100
+                      }%`,
+                    }}
+                  ></div>
+                  <div
+                    className="bg-yellow-500"
+                    style={{
+                      width: `${
+                        (statistics.tasksByStatus.partial /
+                          statistics.totalTasks) *
+                        100
+                      }%`,
+                    }}
+                  ></div>
+                  <div
+                    className="bg-red-500"
+                    style={{
+                      width: `${
+                        (statistics.tasksByStatus.wrong /
+                          statistics.totalTasks) *
+                        100
+                      }%`,
+                    }}
+                  ></div>
+                  <div
+                    className="bg-gray-300"
+                    style={{
+                      width: `${
+                        (statistics.tasksByStatus.unattempted /
+                          statistics.totalTasks) *
+                        100
+                      }%`,
+                    }}
+                  ></div>
+                </div>
+              </div>
+              <div className="flex justify-between text-xs">
+                <div className="flex items-center">
+                  <div className="mr-1 h-3 w-3 rounded-full bg-green-500"></div>
+                  <span className="font-hse-sans">
+                    Верно ({statistics.tasksByStatus.correct})
+                  </span>
+                </div>
+                <div className="flex items-center">
+                  <div className="mr-1 h-3 w-3 rounded-full bg-yellow-500"></div>
+                  <span className="font-hse-sans">
+                    Частично ({statistics.tasksByStatus.partial})
+                  </span>
+                </div>
+                <div className="flex items-center">
+                  <div className="mr-1 h-3 w-3 rounded-full bg-red-500"></div>
+                  <span className="font-hse-sans">
+                    Неверно ({statistics.tasksByStatus.wrong})
+                  </span>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+
+const StatCard = ({ title, value }: { title: string; value: number | string }) => (
+  <Card>
+    <CardContent className="pt-6">
+      <p className="font-hse-sans text-sm text-gray-500">{title}</p>
+      <p className="font-hse-sans mt-2 text-3xl font-bold">{value}</p>
+    </CardContent>
+  </Card>
+);
+
+const UserAchievements = () => {
+  const achievements = [
+    {
+      id: 1,
+      name: "Первые шаги",
+      description: "Участие в первом соревновании",
+      imageUrl: "/achievements/first-steps.png",
+      unlocked: true,
+    },
+    {
+      id: 2,
+      name: "Восходящая звезда",
+      description: "Победа в соревновании",
+      imageUrl: "/achievements/rising-star.png",
+      unlocked: true,
+    },
+    {
+      id: 3,
+      name: "Мастер кода",
+      description: "Решите 50 задач на программирование",
+      imageUrl: "/achievements/code-master.png",
+      unlocked: true,
+    },
+    {
+      id: 4,
+      name: "Бронзовый призер",
+      description: "Займите 3 место в соревновании",
+      imageUrl: "/achievements/bronze.png",
+      unlocked: true,
+    },
+    {
+      id: 5,
+      name: "Серебряный призер",
+      description: "Займите 2 место в соревновании",
+      imageUrl: "/achievements/silver.png",
+      unlocked: false,
+    },
+    {
+      id: 6,
+      name: "Золотой призер",
+      description: "Займите 1 место в соревновании",
+      imageUrl: "/achievements/gold.png",
+      unlocked: false,
+    },
+    {
+      id: 7,
+      name: "Марафонец",
+      description: "Участвуйте в 10 соревнованиях",
+      imageUrl: "/achievements/marathon.png",
+      unlocked: false,
+    },
+    {
+      id: 8,
+      name: "Идеальное решение",
+      description: "Получите максимальные баллы за все задачи в соревновании",
+      imageUrl: "/achievements/perfect.png",
+      unlocked: false,
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <h2 className="font-hse-sans text-xl font-semibold">
+        Разблокировано {achievements.filter(a => a.unlocked).length} из {achievements.length}
+      </h2>
+      
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
+        {achievements.map((achievement) => (
+          <div
+            key={achievement.id}
+            className={`flex flex-col items-center justify-center rounded-lg p-4 text-center ${
+              achievement.unlocked ? "" : "opacity-40"
+            }`}
+          >
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
+              {achievement.imageUrl ? (
+                <div className="relative h-16 w-16 overflow-hidden rounded-full">
+                  <div
+                    className="h-full w-full bg-cover bg-center"
+                    style={{ backgroundImage: `url(${achievement.imageUrl})` }}
+                  ></div>
+                </div>
+              ) : (
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-200 text-blue-700">
+                  <span className="font-hse-sans text-xl font-bold">
+                    {achievement.name.substring(0, 1)}
+                  </span>
+                </div>
+              )}
+            </div>
+            <h3 className="font-hse-sans text-sm font-medium">
+              {achievement.name}
+            </h3>
+            <p className="font-hse-sans mt-1 text-xs text-gray-500">
+              {achievement.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UserProfile;

services/frontend/src/pages/UserProfile/modules/UserAchievements/index.tsx

@@ -0,0 +1,45 @@
+const UserAchievements = () => {
+  return (
+    <div className="space-y-6">
+      <h2 className="font-hse-sans text-xl font-semibold">
+        Разблокировано {achievements.filter(a => a.unlocked).length} из {achievements.length}
+      </h2>
+      
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
+        {achievements.map((achievement) => (
+          <div
+            key={achievement.id}
+            className={`flex flex-col items-center justify-center rounded-lg p-4 text-center ${
+              achievement.unlocked ? "" : "opacity-40"
+            }`}
+          >
+            <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-full bg-blue-100">
+              {achievement.imageUrl ? (
+                <div className="relative h-16 w-16 overflow-hidden rounded-full">
+                  <div
+                    className="h-full w-full bg-cover bg-center"
+                    style={{ backgroundImage: `url(${achievement.imageUrl})` }}
+                  ></div>
+                </div>
+              ) : (
+                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-blue-200 text-blue-700">
+                  <span className="font-hse-sans text-xl font-bold">
+                    {achievement.name.substring(0, 1)}
+                  </span>
+                </div>
+              )}
+            </div>
+            <h3 className="font-hse-sans text-sm font-medium">
+              {achievement.name}
+            </h3>
+            <p className="font-hse-sans mt-1 text-xs text-gray-500">
+              {achievement.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UserAchievements

services/frontend/src/shared/api/index.ts

@@ -24,7 +24,6 @@ export const authFetch = ofetch.create({
 export const apiFetch = ofetch.create({
   baseURL: BASE_URL,
   async onRequest({ options }) {
-    console.log(import.meta.env.VITE_API_ENDPOINT);
     options.headers.set("Authorization", "Bearer " + getToken());
   },
   async onResponseError({ response }) {

services/frontend/src/shared/api/session.ts

@@ -0,0 +1,82 @@
+import { apiFetch } from './index';
+import { Task, TaskStatus } from '@/shared/types';
+
+interface ApiTask {
+  id: string;
+  title: string;
+  description: string;
+  type: 'input' | 'file' | 'code';
+  in_competition_position: number;
+  points: number;
+  status?: TaskStatus; 
+}
+
+/**
+ * Fetches tasks for a specific competition
+ * @param competitionId - The ID of the competition
+ * @returns Promise with an array of tasks in the application's format
+ */
+export const getCompetitionTasks = async (competitionId: string): Promise<Task[]> => {
+  try {
+    const apiTasks: ApiTask[] = await apiFetch(`/api/v1/competitions/${competitionId}/tasks`);
+    
+    // Transform API tasks to application Task format
+    return apiTasks.map(apiTask => transformApiTask(apiTask));
+  } catch (error) {
+    console.error('Failed to fetch competition tasks:', error);
+    throw error;
+  }
+};
+
+/**
+ * Transforms an API task to the application's Task format
+ */
+const transformApiTask = (apiTask: ApiTask): Task => {
+  return {
+    id: apiTask.id,
+    number: String(apiTask.in_competition_position), 
+    status: apiTask.status || TaskStatus.Uncleared,
+    solutionType: apiTask.type, 
+    description: apiTask.description,
+    maxScore: apiTask.points
+  };
+};
+
+
+// export const submitTaskSolution = async (
+//   competitionId: string, 
+//   taskId: string, 
+//   solution: string | File
+// ): Promise<void> => {
+//   const endpoint = `/api/v1/competitions/${competitionId}/tasks/${taskId}/submit`;
+  
+//   // Handle different solution types
+//   if (typeof solution === 'string') {
+//     // Text or code solution
+//     await apiFetch(endpoint, {
+//       method: 'POST',
+//       body: { answer: solution }
+//     });
+//   } else {
+//     // File solution
+//     const formData = new FormData();
+//     formData.append('file', solution);
+    
+//     await apiFetch(endpoint, {
+//       method: 'POST',
+//       body: formData
+//     });
+//   }
+// };
+
+/**
+ * Gets the status of a task submission
+ * This would be used to poll for updates after submission
+ */
+// export const getTaskSubmissionStatus = async (
+//   competitionId: string,
+//   taskId: string
+// ): Promise<TaskStatus> => {
+//   const response = await apiFetch(`/api/v1/competitions/${competitionId}/tasks/${taskId}/status`);
+//   return response.status;
+// };

services/frontend/src/shared/mocks/mocks.ts

@@ -57,49 +57,70 @@ const mockTasks: Task[] = [
     id: "1", 
     number: "1.1", 
     status: TaskStatus.Uncleared, 
-    solutionType: "input"
+    solutionType: "input",
+    description: "123",
+    maxScore: 10,
   },
   { 
     id: "2", 
     number: "1.2", 
     status: TaskStatus.Checking, 
-    solutionType: "file"
+    solutionType: "file",
+    description: "123",
+    maxScore: 20,
   },
   { 
     id: "3", 
     number: "1.3", 
     status: TaskStatus.Correct, 
-    solutionType: "code"
+    solutionType: "code",
+    description: "123",
+    maxScore: 20,
   },
   { 
     id: "4", 
     number: "2.1", 
     status: TaskStatus.Partial, 
-    solutionType: "input"
+    solutionType: "input",
+    description: "123",
+    maxScore: 20,
+
   },
   { 
     id: "5", 
     number: "2.2", 
     status: TaskStatus.Wrong, 
-    solutionType: "file"
+    solutionType: "file",
+    description: "123",
+    maxScore: 20,
+
   },
   { 
     id: "6", 
     number: "2.3", 
     status: TaskStatus.Uncleared, 
-    solutionType: "code"
+    solutionType: "code",
+    description: "123",
+    maxScore: 20,
+
   },
   { 
     id: "7", 
     number: "3.1", 
     status: TaskStatus.Checking, 
-    solutionType: "file"
+    solutionType: "file",
+    description: "123",
+    maxScore: 20,
+
   },
   { 
     id: "8", 
     number: "3.2", 
     status: TaskStatus.Correct, 
-    solutionType: "input"
+    solutionType: "input",
+    description: "123",
+    maxScore: 20,
+
   },
 ];
 
@@ -132,5 +153,84 @@ const mockSolutions: Solution[] = [
 
 ];
 
+const mockAchievements = [
+  {
+    id: 1,
+    name: "Первые шаги",
+    description: "Участие в первом соревновании",
+    imageUrl: "/achievements/first-steps.png",
+    unlocked: true,
+  },
+  {
+    id: 2,
+    name: "Восходящая звезда",
+    description: "Победа в соревновании",
+    imageUrl: "/achievements/rising-star.png",
+    unlocked: true,
+  },
+  {
+    id: 3,
+    name: "Мастер кода",
+    description: "Решите 50 задач на программирование",
+    imageUrl: "/achievements/code-master.png",
+    unlocked: true,
+  },
+  {
+    id: 4,
+    name: "Бронзовый призер",
+    description: "Займите 3 место в соревновании",
+    imageUrl: "/achievements/bronze.png",
+    unlocked: true,
+  },
+  {
+    id: 5,
+    name: "Серебряный призер",
+    description: "Займите 2 место в соревновании",
+    imageUrl: "/achievements/silver.png",
+    unlocked: false,
+  },
+  {
+    id: 6,
+    name: "Золотой призер",
+    description: "Займите 1 место в соревновании",
+    imageUrl: "/achievements/gold.png",
+    unlocked: false,
+  },
+  {
+    id: 7,
+    name: "Марафонец",
+    description: "Участвуйте в 10 соревнованиях",
+    imageUrl: "/achievements/marathon.png",
+    unlocked: false,
+  },
+  {
+    id: 8,
+    name: "Идеальное решение",
+    description: "Получите максимальные баллы за все задачи в соревновании",
+    imageUrl: "/achievements/perfect.png",
+    unlocked: false,
+  },
+];
 
-export { mockCompetitions, mockTasks, mockSolutions };
+
+const mockStatistics = {
+  totalCompetitions: 12,
+  completedCompetitions: 8,
+  totalScore: 756,
+  averageScore: 94.5,
+  bestResult: {
+    competition: "Олимпиада DANO 2024",
+    place: 3,
+    score: 97,
+  },
+  totalTasks: 86,
+  solvedTasks: 72,
+  tasksByStatus: {
+    correct: 58,
+    partial: 14,
+    wrong: 9,
+    unattempted: 5,
+  },
+};
+
+export { mockCompetitions, mockTasks, mockSolutions, mockAchievements, mockStatistics };

services/frontend/src/shared/types.ts

@@ -30,11 +30,16 @@ interface Solution {
   score?: number,
   maxScore?: number,
 }
+
 interface Task {
   id: string;
   number: string;
+  description: string;
+  maxScore: number;
   status: TaskStatus;
   solutionType: SolutionType;
+  requirements?: string;
+  attachments?: string[];
 }
 
 export { CompetitionStatus, TaskStatus };