Merge pull request 'feature/SPA' (#10) from feature/SPA into develop

Reviewed-on: #10

cool_todo_manager/package-lock.json

@@ -9,19 +9,25 @@
       "version": "0.0.0",
       "dependencies": {
         "@hello-pangea/dnd": "^18.0.1",
+        "@radix-ui/react-form": "^0.1.2",
         "@radix-ui/react-icons": "^1.3.2",
         "@radix-ui/themes": "^3.2.0",
+        "@reduxjs/toolkit": "^2.6.0",
         "@tailwindcss/vite": "^4.0.6",
         "@tanstack/react-query": "^5.66.0",
         "@tanstack/react-query-devtools": "^5.66.0",
         "axios": "^1.7.9",
         "jotai": "^2.12.0",
+        "js-cookie": "^3.0.5",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-redux": "^9.2.0",
+        "react-router-dom": "^6.26.2",
         "tailwindcss": "^4.0.6"
       },
       "devDependencies": {
         "@eslint/js": "^9.19.0",
+        "@types/js-cookie": "^3.0.6",
         "@types/react": "^19.0.8",
         "@types/react-dom": "^19.0.3",
         "@vitejs/plugin-react": "^4.3.4",
@@ -2545,6 +2551,39 @@
         }
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.6.0.tgz",
+      "integrity": "sha512-mWJCYpewLRyTuuzRSEC/IwIBBkYg2dKtQas8mty5MaV2iXzcmicS3gW554FDeOvLnY3x13NIk8MB1e8wHO7rqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
+      "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.34.7",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.7.tgz",
@@ -3120,6 +3159,13 @@
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -4412,6 +4458,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -4509,6 +4565,15 @@
         }
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5323,6 +5388,38 @@
         }
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
+      "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
+      "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.2",
+        "react-router": "6.26.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -5351,12 +5448,27 @@
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
       "license": "MIT"
     },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",

cool_todo_manager/package.json

@@ -11,19 +11,25 @@
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
+    "@radix-ui/react-form": "^0.1.2",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.0",
+    "@reduxjs/toolkit": "^2.6.0",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "axios": "^1.7.9",
     "jotai": "^2.12.0",
+    "js-cookie": "^3.0.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^6.26.2",
     "tailwindcss": "^4.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",

cool_todo_manager/src/App.tsx

@@ -1,13 +1,24 @@
 import { Theme } from '@radix-ui/themes';
 import '@radix-ui/themes/styles.css';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { Provider } from 'react-redux';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import queryClient from './api/queryClient';
+import { store } from './api/RTKQuery';
 import './App.css';
-import MainBoard from './components/MainBoard/MainBoard';
+import MyRoutes from './routes/routes';
+
+const router = createBrowserRouter(MyRoutes);
 
 function App() {
 	return (
-			<Theme accentColor="amber" grayColor="gray">
+		<Theme className="size-full" accentColor="amber" grayColor="gray">
-				<MainBoard />
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
 					{/* <ThemePanel /> */}
+					<RouterProvider router={router} />
+				</Provider>
+			</QueryClientProvider>
 		</Theme>
 	);
 }

cool_todo_manager/src/api/RTKQuery.ts

@@ -0,0 +1,33 @@
+import { configureStore, isRejectedWithValue, Middleware } from '@reduxjs/toolkit';
+import { setupListeners } from '@reduxjs/toolkit/query';
+import { authApi, mainApi } from '../services/mainApi';
+
+const loggerMiddleware: Middleware = (_store) => (next) => (action) => {
+	console.log('dispatching', action);
+	if(isRejectedWithValue(action)) {
+		// @ts-ignore
+		const statusCode = action.payload.status;
+		if(statusCode === 401) {
+			console.log('Unauthorized, redirecting to login page');
+			localStorage.removeItem('token');
+			window.location.href = '/login';
+		}
+	}
+	let result = next(action);
+	return result;
+};
+
+export const store = configureStore({
+	reducer: {
+		[mainApi.reducerPath]: mainApi.reducer,
+		[authApi.reducerPath]: authApi.reducer,
+	},
+	middleware: (getDefaultMiddleware) =>
+		getDefaultMiddleware()
+			.prepend(loggerMiddleware)
+			.concat(mainApi.middleware)
+			.concat(authApi.middleware),
+});
+
+setupListeners(store.dispatch);
+

cool_todo_manager/src/api/axios.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const BASE_URL = 'http://localhost:4567';
+
+export const axiosBase = axios.create({
+  baseURL: BASE_URL,
+});
+
+export const axiosAuth = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    Authorization: `Bearer ${localStorage.getItem('token')}` // Maybe we will use cookies
+  }
+});

cool_todo_manager/src/api/queryClient.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            retry: 2,
+        },
+    },
+})
+
+export default queryClient;

cool_todo_manager/src/components/AuthWrapper/AuthWrapper.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { Navigate } from 'react-router-dom';
+
+export default function AuthWrapper(props: PropsWithChildren) {
+
+	if (!localStorage.getItem('token')) {
+    console.log('No token found, redirecting to login');
+    return <Navigate to={'/login'} />
+	}
+
+	return <div>{props.children}</div>;
+}

cool_todo_manager/src/components/CardGroup/CardGroup.tsx

@@ -1,34 +1,77 @@
 import { Droppable } from '@hello-pangea/dnd';
-import { Box } from '@radix-ui/themes';
+import { Box, Button, Flex, Text } from '@radix-ui/themes';
+import {
+	useCreateTaskMutation,
+	useDeleteProjectMutation,
+	useGetTasksForGroupQuery,
+} from '../../services/mainApi';
 import TaskCard from '../TaskCard/TaskCard';
+import AddUserToProjectDialog from '../dialogs/AddUserToProjectDialog/AddUserToProjectDialog';
+import CreateTaskDialog from '../dialogs/CreateTaskDialog/CreateTaskDialog';
+import DeleteProjectDialog from '../dialogs/DeleteProjectDialog/CreateTaskDialog';
 
-const tasks = [
+import { PlusIcon } from '@radix-ui/react-icons';
-	{ id: 1, title: 'Task 1', description: 'Description for Task 1' },
-	{ id: 2, title: 'Task 2', description: 'Description for Task 2' },
-];
 
 type TCardGroup = {
-  id: string
+	id: string;
-}
+	title: string; 
+};
 
 export default function CardGroup(props: TCardGroup) {
+	const { data, isLoading } = useGetTasksForGroupQuery(props.id);
+
+	const [createTaskForGroup] = useCreateTaskMutation();
+	const [deleteProject] = useDeleteProjectMutation();
+
+	const createTask = (taskText: string, date: string) => {
+		createTaskForGroup({
+			title: taskText,
+			projectId: props.id,
+			assignedUserId: 1,
+			deadline: date,
+		});
+	};
+
+	const deleteGroup = () => {
+		deleteProject(props.id);
+	};
+
 	return (
-				<Droppable droppableId={props.id}>
+		<Droppable droppableId={props.id.toString()}>
 			{(provided) => (
+				<Box className="flex flex-col text-center rounded-lg p-4 bg-gray-200 min-w-fit">
+					<Text className="mb-2">{props.title}</Text>
 					<Box
 						ref={provided.innerRef}
-							{...provided.droppableProps}
+						className="bg-gray-200 min-w-full rounded-lg !flex flex-col gap-2"
 					>
-							{tasks.map((task, i) => (
+						{data &&
+							data.map((task, i) => (
 								<TaskCard
 									key={task.id}
-									id={task.id.toString() + props.id}
+									id={task.id.toString()}
 									title={task.title}
-									description={task.description}
+									description={task.status}
 									index={i}
+									status={task.status}
 								/>
 							))}
-							{provided.placeholder}
+					</Box>
+					<Flex gap={'2'} className="mx-auto w-full mt-2">
+						<CreateTaskDialog onClose={createTask}>
+							<Button className='!grow-1'>Add Task</Button>
+						</CreateTaskDialog>
+						<DeleteProjectDialog onClose={deleteGroup}>
+							<Button className='!grow-1' color="red">Delete Project</Button>
+						</DeleteProjectDialog>
+					</Flex>
+
+					<AddUserToProjectDialog projectId={+props.id}>
+						<Button className='!mt-2'>
+							<PlusIcon />
+							Add user	
+						</Button>
+					</AddUserToProjectDialog>
 				</Box>
 			)}
 		</Droppable>

cool_todo_manager/src/components/MainBoard/MainBoard.tsx

@@ -1,17 +1,36 @@
 import { DragDropContext } from '@hello-pangea/dnd';
+import { Button, Flex, ScrollArea } from '@radix-ui/themes';
+import {
+	useCreateProjectMutation,
+	useGetProjectsQuery
+} from '../../services/mainApi';
 import CardGroup from '../CardGroup/CardGroup';
-
+import CreateProjectDialog from '../dialogs/CreateProjectDialog/CreateProjectDialog';
 
 export default function MainBoard() {
-
 	const dragEndHandle = (result: TDragResult) => {
-        result
+		result;
-    }   
+	};
+
+	const [createProject] = useCreateProjectMutation();
+	const { data: cringe, isLoading } = useGetProjectsQuery({});
 
 	return (
+		<>
 			<DragDropContext onDragEnd={dragEndHandle}>
-			<CardGroup id='qwhdf' />
+				<ScrollArea scrollbars="horizontal" className="pb-3">
-			<CardGroup id='123fsduiyuiyi' />
+					<Flex gap={'2'} className="min-w-fit">
+						{!isLoading &&
+							(cringe as any[]).map((item: any) => (
+								<CardGroup id={item.id} title={item.title} />
+							))}
+					</Flex>
+				</ScrollArea>
 			</DragDropContext>
+
+			<CreateProjectDialog onCreate={createProject}>
+				<Button>Create project</Button>
+			</CreateProjectDialog>
+		</>
 	);
 }

cool_todo_manager/src/components/TaskCard/TaskCard.tsx

@@ -1,35 +1,66 @@
 import { Draggable } from '@hello-pangea/dnd';
-import { DragHandleHorizontalIcon } from '@radix-ui/react-icons';
+import { Badge, Button, Card, Flex, Text } from '@radix-ui/themes';
-import { Box, Button, Card, Flex, Text } from '@radix-ui/themes';
+import { useUpdateTaskMutation } from '../../services/mainApi';
 
 type TTaskCard = {
 	title?: string;
 	description?: string;
 	id?: string;
 	index?: number;
+	status: 'todo' | 'in-progress' | 'completed';
 };
 
+const badgeNames = {
+	todo: 'To do',
+	'in-progress': 'In progress',
+	completed: 'Completed',
+} as const
+
+const badgeColors = {
+	todo: 'blue',
+	'in-progress': 'orange',
+	completed: 'green',
+} as const
+
 export default function TaskCard(props: TTaskCard) {
+	const [updateTask] = useUpdateTaskMutation();
+
+	const updateStatus = (newStatus: 'todo' | 'in-progress' | 'completed') => {
+		updateTask({ id: props.id, status: newStatus });
+	};
+
 	return (
 		<Draggable draggableId={props.id || '123'} index={props.index || 0}>
 			{(provided) => (
 				<Card
-					className="!w-62"
+					className="!w-62 !flex flex-col gap-2"
 					ref={provided.innerRef}
 					{...provided.draggableProps}
 				>
 					<Flex direction="column" gap="2">
+						<Flex justify={'between'}>
 							<Text wrap="pretty">{props.title}</Text>
-						<Button>Mark completed</Button>
+							<Badge color={badgeColors[props.status] || 'gray'}>{badgeNames[props.status]}</Badge>
-						<Flex className="w-full !justify-center transition-transform">
-							<Box
-								className="px-10 cursor-grab"
-								{...provided.dragHandleProps}
-							>
-								<DragHandleHorizontalIcon />
-							</Box>
 						</Flex>
 					</Flex>
+
+					<Flex justify={'between'}>
+						{props.status !== 'todo' && (
+							<Button color={badgeColors['todo']} onClick={() => updateStatus('todo')}>
+								Todo
+							</Button>
+						)}
+						{props.status !== 'in-progress' && (
+							<Button color={badgeColors['in-progress']} onClick={() => updateStatus('in-progress')}>
+								In Progress
+							</Button>
+						)}
+						{props.status !== 'completed' && (
+							<Button color={badgeColors['completed']} onClick={() => updateStatus('completed')}>
+								Completed
+							</Button>
+						)}
+					</Flex>
 				</Card>
 			)}
 		</Draggable>

cool_todo_manager/src/components/dialogs/AddUserToProjectDialog/AddUserToProjectDialog.tsx

@@ -0,0 +1,92 @@
+import { Button, Dialog, Flex, Select } from '@radix-ui/themes';
+import { PropsWithChildren, useState } from 'react';
+import {
+    useAddProjectMemberMutation,
+    useGetAllUsersQuery,
+} from '../../../services/mainApi';
+
+type TAddUserToProjectDialog = {
+	projectId: number;
+} & PropsWithChildren;
+
+export default function AddUserToProjectDialog(props: TAddUserToProjectDialog) {
+	const { projectId, children } = props;
+	const { data: users, isLoading, error, refetch } = useGetAllUsersQuery({});
+	const [addProjectMember, { isLoading: isAdding }] =
+		useAddProjectMemberMutation();
+	const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
+
+	const handleAddUser = async () => {
+		if (selectedUserId) {
+			try {
+				await addProjectMember({
+					projectId,
+					memberId: selectedUserId,
+				}).unwrap();
+				setSelectedUserId(null);
+			} catch (err) {
+				console.error('Failed to add user:', err);
+			}
+		}
+	};
+
+
+	return (
+		<Dialog.Root onOpenChange={() => refetch()}>
+			<Dialog.Trigger>{children}</Dialog.Trigger>
+
+			<Dialog.Content maxWidth="450px">
+				<Dialog.Title>Add User to Project</Dialog.Title>
+
+				<Flex direction="column" gap="3" mt="4">
+					{isLoading ? (
+						<span>Loading users...</span>
+					) : error ? (
+						<span>Error loading users.</span>
+					) : (
+						<Select.Root
+							value={selectedUserId?.toString() || ''}
+							onValueChange={(value) =>
+								setSelectedUserId(Number(value))
+							}
+							required
+						>
+							<Select.Trigger aria-label="User">
+								{selectedUserId
+									? users?.find(
+											(user: any) =>
+												user.id === selectedUserId,
+									  )?.username
+									: 'Select a user'}
+							</Select.Trigger>
+							<Select.Content>
+								{users?.map((user: any) => (
+									<Select.Item key={user.id} value={user.id}>
+										{user.username}
+									</Select.Item>
+								))}
+							</Select.Content>
+						</Select.Root>
+					)}
+				</Flex>
+
+				<Flex gap="3" mt="4" justify="end">
+					<Dialog.Close>
+						<Button variant="soft" color="gray">
+							Cancel
+						</Button>
+					</Dialog.Close>
+					<Dialog.Close>
+						<Button
+							color="green"
+							onClick={handleAddUser}
+							disabled={!selectedUserId || isAdding}
+						>
+							{isAdding ? 'Adding...' : 'Add'}
+						</Button>
+					</Dialog.Close>
+				</Flex>
+			</Dialog.Content>
+		</Dialog.Root>
+	);
+}

cool_todo_manager/src/components/dialogs/CreateProjectDialog/CreateProjectDialog.tsx

@@ -0,0 +1,59 @@
+import { Button, Dialog, Flex, TextArea, TextField } from '@radix-ui/themes';
+import { PropsWithChildren, useState } from 'react';
+
+type TCreateProjectDialog = {
+	onCreate: (f: any) => void;
+} & PropsWithChildren;
+
+export default function CreateProjectDialog(props: TCreateProjectDialog) {
+	const [title, setTitle] = useState('');
+	const [description, setDescription] = useState('');
+
+	const handleCreate = () => {
+		props.onCreate({title, description});
+		setTitle('');
+		setDescription('');
+	};
+
+	return (
+		<Dialog.Root>
+			<Dialog.Trigger>
+				{props.children}
+			</Dialog.Trigger>
+
+			<Dialog.Content maxWidth="450px">
+				<Dialog.Title>Create a New Project</Dialog.Title>
+
+				<Flex direction="column" gap="3" mt="4">
+					<TextField.Root
+						value={title}
+						onChange={(e) => setTitle(e.target.value)}
+						required
+					></TextField.Root>
+					<TextArea
+						value={description}
+						onChange={(e) => setDescription(e.target.value)}
+						placeholder="Optional description"
+					/>
+				</Flex>
+
+				<Flex gap="3" mt="4" justify="end">
+					<Dialog.Close>
+						<Button variant="soft" color="gray">
+							Cancel
+						</Button>
+					</Dialog.Close>
+					<Dialog.Close>
+						<Button
+							color="green"
+							onClick={handleCreate}
+							disabled={!title}
+						>
+							Create
+						</Button>
+					</Dialog.Close>
+				</Flex>
+			</Dialog.Content>
+		</Dialog.Root>
+	);
+}

cool_todo_manager/src/components/dialogs/CreateTaskDialog/CreateTaskDialog.tsx

@@ -0,0 +1,63 @@
+import { Button, Dialog, Flex, Text, TextField } from '@radix-ui/themes';
+import { PropsWithChildren, useState } from 'react';
+
+type TCreateTaskDialog = {
+	onClose: (text: string, timeString: string) => void;
+} & PropsWithChildren;
+
+export default function CreateTaskDialog(props: TCreateTaskDialog) {
+	const [text, setText] = useState('');
+	const [deadline, setDeadline] = useState('');
+
+	return (
+		<Dialog.Root>
+			<Dialog.Trigger>{props.children}</Dialog.Trigger>
+
+			<Dialog.Content maxWidth="450px">
+				<Dialog.Title>Task creation</Dialog.Title>
+
+				<Flex direction="column" gap="3">
+					<label>
+						<Text as="div" size="2" mb="1" weight="bold">
+							Task description
+						</Text>
+						<TextField.Root
+							defaultValue=""
+							value={text}
+							onChange={(e) => setText(e.target.value)}
+							placeholder="Enter task description"
+						/>
+					</label>
+					<label>
+						<Text as="div" size="2" mb="1" weight="bold">
+							Deadline
+						</Text>
+						<input
+							type="date"
+							onChange={(e) => setDeadline(e.target.value)}
+						></input>
+					</label>
+				</Flex>
+
+				<Flex gap="3" mt="4" justify="end">
+					<Dialog.Close>
+						<Button variant="soft" color="gray">
+							Cancel
+						</Button>
+					</Dialog.Close>
+					<Dialog.Close>
+						<Button
+							onClick={() => {
+								props.onClose(text, deadline);
+								setDeadline('');
+								setText('');
+							}}
+						>
+							Create
+						</Button>
+					</Dialog.Close>
+				</Flex>
+			</Dialog.Content>
+		</Dialog.Root>
+	);
+}

cool_todo_manager/src/components/dialogs/DeleteProjectDialog/CreateTaskDialog.tsx

@@ -0,0 +1,36 @@
+import { Button, Dialog, Flex } from '@radix-ui/themes';
+import { PropsWithChildren } from 'react';
+
+type TCreateTaskDialog = {
+	onClose: () => void;
+} & PropsWithChildren;
+
+export default function DeleteProjectDialog(props: TCreateTaskDialog) {
+	return (
+		<Dialog.Root>
+			<Dialog.Trigger>{props.children}</Dialog.Trigger>
+
+			<Dialog.Content maxWidth="450px">
+				<Dialog.Title>Delete project?</Dialog.Title>
+
+				<Flex gap="3" mt="4" justify="end">
+					<Dialog.Close>
+						<Button variant="soft" color="gray">
+							Cancel
+						</Button>
+					</Dialog.Close>
+					<Dialog.Close>
+						<Button
+							color="red"
+							onClick={() => {
+								props.onClose();
+							}}
+						>
+							Delete
+						</Button>
+					</Dialog.Close>
+				</Flex>
+			</Dialog.Content>
+		</Dialog.Root>
+	);
+}

cool_todo_manager/src/index.css

@@ -1 +1,5 @@
 @import 'tailwindcss';
+
+#root {
+    height: 100vh;
+}

cool_todo_manager/src/main.tsx

@@ -1,5 +1,5 @@
-import { createRoot } from "react-dom/client";
+import { createRoot } from 'react-dom/client';
-import App from "./App.tsx";
+import App from './App.tsx';
-import "./index.css";
+import './index.css';
 
-createRoot(document.getElementById("root")!).render(<App />);
+createRoot(document.getElementById('root')!).render(<App />);

cool_todo_manager/src/pages/auth/LoginPage/LoginPage.tsx

@@ -0,0 +1,90 @@
+import {
+	Box,
+	Button,
+	Card,
+	Heading,
+	Link,
+	Text,
+	TextField,
+} from '@radix-ui/themes';
+import { Form } from 'radix-ui';
+import { useState } from 'react';
+import { useLoginMutation } from '../../../services/mainApi';
+
+export default function LoginPage() {
+	const [login, { isError }] = useLoginMutation();
+
+	const [username, setUsername] = useState('');
+	const [password, setPassword] = useState('');
+
+	const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		login({ username, password });
+	};
+
+	return (
+		<>
+			<Card className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 w-fit">
+				<Heading size="4" className="text-center !mb-2">
+					Login
+				</Heading>
+
+				<Form.Root
+					className="flex flex-col gap-4"
+					onSubmit={submitHandler}
+				>
+					<Form.Field name="email">
+						<Form.Message match={'valueMissing'}>
+							<Text>Username is required</Text>
+						</Form.Message>
+
+						<Form.Control asChild>
+							<TextField.Root
+								type="text"
+								placeholder="Username"
+								value={username}
+								onChange={(e) => setUsername(e.target.value)}
+							>
+								<TextField.Slot />
+							</TextField.Root>
+						</Form.Control>
+					</Form.Field>
+
+					<Form.Field name="password">
+						<Form.Message match="valueMissing">
+							<Text>Password is required</Text>
+						</Form.Message>
+
+						<Form.Control asChild>
+							<TextField.Root
+								type="password"
+								placeholder="Password"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+							>
+								<TextField.Slot />
+							</TextField.Root>
+						</Form.Control>
+					</Form.Field>
+
+					{isError && (
+						<Text>{'Unable to login. Please try again.'}</Text>
+					)}
+
+					<Button
+						// onClick={(e) => e.preventDefault()}
+						className="mt-4"
+					>
+						Sign In
+					</Button>
+					
+					<Box className='w-full !flex justify-center'>
+						<Link href="/register">
+							<Text>Register</Text>
+						</Link>
+					</Box>
+				</Form.Root>
+			</Card>
+		</>
+	);
+}

cool_todo_manager/src/pages/auth/RegisterPage/RegisterPage.tsx

@@ -0,0 +1,125 @@
+import {
+	Box,
+	Button,
+	Card,
+	Heading,
+	Link,
+	Text,
+	TextField,
+} from '@radix-ui/themes';
+import { Form } from 'radix-ui';
+import { useState } from 'react';
+import { useRegisterMutation } from '../../../services/mainApi';
+
+export default function RegisterPage() {
+	const [register, { isLoading, error }] = useRegisterMutation();
+	const [formData, setFormData] = useState({
+		username: '',
+		email: '',
+		password: '',
+	});
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setFormData({
+			...formData,
+			[e.target.name]: e.target.value,
+		});
+	};
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		try {
+			await register(formData).unwrap();
+		} catch (err) {
+			console.error('Failed to register:', err);
+		}
+	};
+
+	return (
+		<Card className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-fit">
+			<Heading size="4" className="text-center !mb-2">
+				Register
+			</Heading>
+			<Form.Root
+				className="flex flex-col gap-4"
+				onSubmit={handleSubmit}
+			>
+				<Form.Field name="username">
+					<Form.Message match="valueMissing">
+						<Text>Username is required</Text>
+					</Form.Message>
+
+					<Form.Control asChild>
+						<TextField.Root
+							type="text"
+							name="username"
+							placeholder="Username"
+							required
+							value={formData.username}
+							onChange={handleChange}
+						>
+							<TextField.Slot />
+						</TextField.Root>
+					</Form.Control>
+				</Form.Field>
+
+				<Form.Field name="email">
+					<Form.Message match="valueMissing">
+						<Text>Email is required</Text>
+					</Form.Message>
+
+					<Form.Message match="typeMismatch">
+						<Text>Email is not valid</Text>
+					</Form.Message>
+
+					<Form.Control asChild>
+						<TextField.Root
+							type="email"
+							name="email"
+							placeholder="Email"
+							required
+							value={formData.email}
+							onChange={handleChange}
+						>
+							<TextField.Slot />
+						</TextField.Root>
+					</Form.Control>
+				</Form.Field>
+
+				<Form.Field name="password">
+					<Form.Message match="valueMissing">
+						<Text>Password is required</Text>
+					</Form.Message>
+
+					<Form.Control asChild>
+						<TextField.Root
+							type="password"
+							placeholder="Password"
+							required
+							value={formData.password}
+							onChange={handleChange}
+						>
+							<TextField.Slot />
+						</TextField.Root>
+					</Form.Control>
+				</Form.Field>
+
+				<Button type="submit" disabled={isLoading} className="mt-4">
+					Register
+				</Button>
+
+				{error && (
+					<Box className="text-red-500">
+						<Text>Error registering user.</Text>
+					</Box>
+				)}
+
+				<Box className="w-full !flex justify-center">
+					<Link href="/login">
+						<Text>Login</Text>
+					</Link>
+				</Box>
+			</Form.Root>
+		</Card>
+	);
+}

cool_todo_manager/src/pages/main/MainPage.tsx

@@ -0,0 +1,10 @@
+import { Box } from '@radix-ui/themes'
+import { Outlet } from 'react-router-dom'
+
+export default function MainPage() {
+  return (
+    <Box className='size-full'>
+        <Outlet />
+    </Box>
+  )
+}

cool_todo_manager/src/routes/routes.tsx

@@ -0,0 +1,26 @@
+import { createRoutesFromElements, Route } from 'react-router-dom';
+import AuthWrapper from '../components/AuthWrapper/AuthWrapper';
+import MainBoard from '../components/MainBoard/MainBoard';
+import LoginPage from '../pages/auth/LoginPage/LoginPage';
+import RegisterPage from '../pages/auth/RegisterPage/RegisterPage';
+import MainPage from '../pages/main/MainPage';
+
+const MyRoutes = createRoutesFromElements(
+	<>
+		<Route
+			path="/"
+			element={
+				<AuthWrapper>
+					<MainPage />
+				</AuthWrapper>
+			}
+		>
+			<Route index element={<MainBoard />} />
+		</Route>
+
+		<Route path="login" element={<LoginPage />} />
+		<Route path="register" element={<RegisterPage />} />
+	</>,
+);
+
+export default MyRoutes;

cool_todo_manager/src/services/mainApi.ts

@@ -0,0 +1,231 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const mainApi = createApi({
+	reducerPath: 'api',
+	baseQuery: fetchBaseQuery({
+		baseUrl: 'http://109.107.166.17:5000/api/',
+		prepareHeaders: (headers) => {
+			headers.set(
+				'Authorization',
+				`Bearer ${localStorage.getItem('token')}`,
+			);
+			return headers;
+		},
+	}),
+	tagTypes: ['Task', 'Project', 'ProjectMembers'],
+	endpoints: (builder) => ({
+		getTasks: builder.query<string[], void>({
+			query: () => ({
+				url: 'tasks',
+				method: 'GET',
+			}),
+			providesTags: (result) =>
+				result
+					? [
+							...result.map((task) => ({
+								type: 'Task' as const,
+								id: task,
+							})),
+							{ type: 'Task', id: 'LIST' },
+					  ]
+					: [{ type: 'Task', id: 'LIST' }],
+		}),
+		getTasksForGroup: builder.query<any[], string>({
+			query: (id: string) => ({
+				url: `tasks/project/${id}`,
+				method: 'GET',
+			}),
+			providesTags: (result) =>
+				result
+					? [
+							...result.map((task) => ({
+								type: 'Task' as const,
+								id: task,
+							})),
+							{ type: 'Task', id: 'LIST' },
+					  ]
+					: [{ type: 'Task', id: 'LIST' }],
+		}),
+		getTask: builder.query<string, string>({
+			query: (id) => ({
+				url: `tasks/${id}`,
+				method: 'GET',
+			}),
+			providesTags: (result, error, id) => [{ type: 'Task', id }],
+		}),
+		updateTask: builder.mutation({
+			query: (task) => ({
+				url: `tasks/${task.id}`,
+				method: 'PATCH',
+				body: { status: task.status },
+			}),
+			invalidatesTags: (result, error, id) => [{ type: 'Task', id }],
+		}),
+		deleteTask: builder.mutation({
+			query: (id) => ({
+				url: `tasks/${id}`,
+				method: 'DELETE',
+			}),
+			invalidatesTags: (result, error, id) => [{ type: 'Task', id }],
+		}),
+		createTask: builder.mutation({
+			query: (newTask) => ({
+				url: 'tasks/create',
+				method: 'POST',
+				body: newTask,
+			}),
+			invalidatesTags: [{ type: 'Task', id: 'LIST' }],
+		}),
+
+		// PROJECTS
+		createProject: builder.mutation({
+			query: (newProject) => ({
+				url: 'projects/create',
+				method: 'POST',
+				body: newProject,
+			}),
+			invalidatesTags: [{ type: 'Project', id: 'LIST' }],
+		}),
+		getProjects: builder.query({
+			query: () => ({
+				url: 'projects/my',
+				method: 'GET',
+			}),
+			providesTags: (result, error, id) => [
+				{ type: 'Project', id: 'LIST' },
+			],
+		}),
+		getProject: builder.query({
+			query: (id) => ({
+				url: `projects/${id}`,
+				method: 'GET',
+			}),
+			providesTags: (result, error, id) => [{ type: 'Project', id }],
+		}),
+		updateProject: builder.mutation({
+			query: ({ id, project }) => ({
+				url: `projects/${id}`,
+				method: 'PATCH',
+				body: project,
+			}),
+			invalidatesTags: (result, error, id) => [{ type: 'Project', id }],
+		}),
+		deleteProject: builder.mutation({
+			query: (id) => ({
+				url: `projects/${id}`,
+				method: 'DELETE',
+			}),
+			invalidatesTags: (result, error, id) => [
+				{ type: 'Project', id: 'LIST' },
+			],
+		}),
+
+		// PROJECT MEMBERS
+		addProjectMember: builder.mutation({
+			query: ({ projectId, memberId }) => ({
+				url: `projects/${projectId}/members/add`,
+				method: 'POST',
+				body: { userId: memberId, role: '' },
+			}),
+			invalidatesTags: (result, error, args) => [
+				{ type: 'ProjectMembers', id: 'LIST' },
+			],
+		}),
+		getProjectMembers: builder.query({
+			query: (id) => ({
+				url: `projects/${id}/members`,
+				method: 'GET',
+			}),
+			providesTags: (result, error, args) => [
+				{ type: 'ProjectMembers', id: 'LIST' },
+			],
+		}),
+		removeProjectMember: builder.mutation({
+			query: ({ projectId, memberId }) => ({
+				url: `projects/${projectId}/members/remove`,
+				method: 'DELETE',
+				body: { userId: memberId },
+			}),
+			invalidatesTags: (result, error, id) => [
+				{ type: 'ProjectMembers', id: 'LIST' },
+			],
+		}),
+	}),
+});
+
+export const authApi = createApi({
+	reducerPath: 'authApi',
+	baseQuery: fetchBaseQuery({
+		baseUrl: 'http://109.107.166.17:4000/api/',
+	}),
+	endpoints: (builder) => ({
+		login: builder.mutation({
+			query: (credentials) => ({
+				url: '/auth/login',
+				method: 'POST',
+				body: credentials,
+			}),
+			async onQueryStarted(arg, { queryFulfilled }) {
+				try {
+					const response = await queryFulfilled;
+					if (response.data.access_token) {
+						localStorage.setItem(
+							'token',
+							response.data.access_token,
+						);
+						if (response.meta?.response?.status === 201)
+							window.location.href = '/';
+					}
+				} catch (error) {}
+			},
+		}),
+		register: builder.mutation({
+			query: (credentials) => ({
+				url: '/auth/register',
+				method: 'POST',
+				body: credentials,
+			}),
+			onQueryStarted: async (arg, { queryFulfilled }) => {
+				try {
+					const response = await queryFulfilled;
+					if (response.meta?.response?.status === 201)
+						window.location.href = '/login';
+				} catch (error) {}
+			},
+		}),
+
+		// USERS
+		getAllUsers: builder.query({
+			query: () => ({
+				url: '/users',
+				method: 'GET',
+			}),
+			keepUnusedDataFor: 0,
+			
+		}),
+	}),
+});
+
+export const { useLoginMutation, useRegisterMutation, useGetAllUsersQuery } =
+	authApi;
+
+export const {
+	useGetTasksQuery,
+	useCreateTaskMutation,
+	useUpdateTaskMutation,
+	useDeleteTaskMutation,
+	useGetTasksForGroupQuery,
+} = mainApi;
+
+export const {
+	useGetProjectsQuery,
+	useCreateProjectMutation,
+	useUpdateProjectMutation,
+	useDeleteProjectMutation,
+} = mainApi;
+
+export const {
+	useRemoveProjectMemberMutation,
+	useAddProjectMemberMutation,
+	useGetProjectMembersQuery,
+} = mainApi;