From 2e08e17056b0293e2ed61ab0ab7ec208835db647 Mon Sep 17 00:00:00 2001
From: Pumnia Mykhailo <74021315+GvoFor@users.noreply.github.com>
Date: Mon, 2 Sep 2024 10:57:10 +0300
Subject: [PATCH] feat: add an ability to create a project gf-87 (#115)

* fix: filename gf-87

* feat: improve Button component gf-87

* feat: improve Input component gf-87

* feat: add an ability to create new project gf-87

* fix: disable button while name is empty gf-87

* refactor: move empty string length const into consts folder gf-87

* refactor: cleanup Input component and its styles gf-87

* refactor: rename Button disabled prop and fix its styles gf-87

* fix: correct the order of projects returned by backend gf-87

* fix: close modal only on success gf-87

Also:
- add success toast notification
- fix data rerendering issue

* fix: wrap modal open/close functions with useCallback gf-87

Without useCallback this functions recalculates when modal opens,
which leads to issues when use these functions as dependencies in other hooks

* refactor: rename 'success message' to 'notification message' gf-87

* refactor: rename 'projectsStatus' back to 'dataStatus' gf-87

* fix: button styles gf-87

* refactor: rename EMPTY_STRING_LENGTH constant and make it common gf-87

* refactor: rid of DESCRIPTION_ROWS_COUNT constant gf-87

* refactor: rename 'rows' to 'rowsCount' gf-87

* refactor: move EMPTY_LENGTH to shared package gf-87

* refactor: create SortType enum gf-87

* refactor: rename 'event' to 'event_' gf-87

* fix: make create button disabled only when there is errors in form gf-87

* fix: remove button disalability gf-87

* refactor: make button variant prop inline gf-87

* refactor: move SortType to shared gf-87

* fix: rid of ProjectCreateResponseDto gf-87

---------

Co-authored-by: Yelyzaveta Veis <64521658+liza-veis@users.noreply.github.com>
---
 apps/backend/src/libs/enums/enums.ts          |  1 +
 .../modules/projects/project.repository.ts    |  6 +-
 apps/frontend/src/assets/css/variables.css    |  1 +
 .../src/libs/components/button/button.tsx     | 21 ++++++-
 .../libs/components/button/styles.module.css  | 18 ++++++
 .../src/libs/components/input/input.tsx       | 43 ++++++++++-----
 .../libs/components/input/styles.module.css   | 15 +++++
 apps/frontend/src/libs/constants/constants.ts |  1 +
 apps/frontend/src/libs/enums/enums.ts         |  2 +-
 ...e.enum.ts => notification-message.enum.ts} |  1 +
 .../use-modal-state/use-modal-state.hook.ts   | 10 ++--
 .../src/modules/projects/libs/types/types.ts  |  1 +
 .../validation-schemas/validation-schemas.ts  |  1 +
 .../src/modules/projects/projects-api.ts      | 17 ++++++
 .../frontend/src/modules/projects/projects.ts |  2 +
 .../src/modules/projects/slices/actions.ts    | 18 +++++-
 .../modules/projects/slices/project.slice.ts  | 14 ++++-
 .../src/modules/projects/slices/projects.ts   |  3 +-
 .../pages/projects/components/components.ts   |  1 +
 .../libs/constants/constants.ts               |  1 +
 ...default-project-create-payload.constant.ts |  8 +++
 .../project-create-form.tsx                   | 55 +++++++++++++++++++
 .../project-create-form/styles.module.css     | 12 ++++
 apps/frontend/src/pages/projects/projects.tsx | 42 ++++++++++++--
 .../src/pages/projects/styles.module.css      |  5 ++
 packages/shared/src/index.ts                  |  2 +
 .../shared/src/libs/constants/constants.ts    |  1 +
 .../libs/constants/empty-length.constant.ts   |  3 +
 packages/shared/src/libs/enums/enums.ts       |  1 +
 .../shared/src/libs/enums/sort-type.enum.ts   |  6 ++
 .../projects/libs/exceptions/exceptions.ts    |  2 +-
 ...xception.ts => project-error.exception.ts} |  0
 32 files changed, 280 insertions(+), 34 deletions(-)
 rename apps/frontend/src/libs/enums/{notification-massage.enum.ts => notification-message.enum.ts} (70%)
 create mode 100644 apps/frontend/src/modules/projects/libs/validation-schemas/validation-schemas.ts
 create mode 100644 apps/frontend/src/pages/projects/components/project-create-form/libs/constants/constants.ts
 create mode 100644 apps/frontend/src/pages/projects/components/project-create-form/libs/constants/default-project-create-payload.constant.ts
 create mode 100644 apps/frontend/src/pages/projects/components/project-create-form/project-create-form.tsx
 create mode 100644 apps/frontend/src/pages/projects/components/project-create-form/styles.module.css
 create mode 100644 packages/shared/src/libs/constants/constants.ts
 create mode 100644 packages/shared/src/libs/constants/empty-length.constant.ts
 create mode 100644 packages/shared/src/libs/enums/sort-type.enum.ts
 rename packages/shared/src/modules/projects/libs/exceptions/{user-error.exception.ts => project-error.exception.ts} (100%)

diff --git a/apps/backend/src/libs/enums/enums.ts b/apps/backend/src/libs/enums/enums.ts
index d2783b5bc..3715b486c 100644
--- a/apps/backend/src/libs/enums/enums.ts
+++ b/apps/backend/src/libs/enums/enums.ts
@@ -1,3 +1,4 @@
+export { SortType } from "@git-fit/shared";
 export {
 	APIPath,
 	AppEnvironment,
diff --git a/apps/backend/src/modules/projects/project.repository.ts b/apps/backend/src/modules/projects/project.repository.ts
index 3bd525726..e6aafc9bc 100644
--- a/apps/backend/src/modules/projects/project.repository.ts
+++ b/apps/backend/src/modules/projects/project.repository.ts
@@ -1,3 +1,4 @@
+import { SortType } from "~/libs/enums/enums.js";
 import { type Repository } from "~/libs/types/types.js";
 
 import { ProjectEntity } from "./project.entity.js";
@@ -36,7 +37,10 @@ class ProjectRepository implements Repository {
 	}
 
 	public async findAll(): Promise<ProjectEntity[]> {
-		const projects = await this.projectModel.query().execute();
+		const projects = await this.projectModel
+			.query()
+			.orderBy("created_at", SortType.DESCENDING)
+			.execute();
 
 		return projects.map((project) => ProjectEntity.initialize(project));
 	}
diff --git a/apps/frontend/src/assets/css/variables.css b/apps/frontend/src/assets/css/variables.css
index da9ddc1b4..e4f169378 100644
--- a/apps/frontend/src/assets/css/variables.css
+++ b/apps/frontend/src/assets/css/variables.css
@@ -19,6 +19,7 @@
 	--color-success: #0d9c00;
 	--color-warning: #d3bf06;
 	--color-danger: #ca4925;
+	--color-danger-hover: #b83b19;
 
 	/* Shadow */
 	--box-shadow: 0px 0px 25px 0px #00000080;
diff --git a/apps/frontend/src/libs/components/button/button.tsx b/apps/frontend/src/libs/components/button/button.tsx
index bd78260d8..020419bcc 100644
--- a/apps/frontend/src/libs/components/button/button.tsx
+++ b/apps/frontend/src/libs/components/button/button.tsx
@@ -1,4 +1,5 @@
 import { NavLink } from "~/libs/components/components.js";
+import { getValidClassNames } from "~/libs/helpers/helpers.js";
 
 import styles from "./styles.module.css";
 
@@ -6,25 +7,39 @@ type Properties = {
 	href?: string | undefined;
 	isDisabled?: boolean;
 	label: string;
+	onClick?: () => void;
 	type?: "button" | "submit";
+	variant?: "danger" | "default" | "outlined";
 };
 
 const Button = ({
 	href,
-	isDisabled = false,
+	isDisabled,
 	label,
+	onClick,
 	type = "button",
+	variant = "default",
 }: Properties): JSX.Element => {
+	const buttonClassName = getValidClassNames(
+		styles["button"],
+		styles[`button-${variant}`],
+	);
+
 	if (href) {
 		return (
-			<NavLink className={styles["button"] ?? ""} to={href}>
+			<NavLink className={buttonClassName} to={href}>
 				{label}
 			</NavLink>
 		);
 	}
 
 	return (
-		<button className={styles["button"]} disabled={isDisabled} type={type}>
+		<button
+			className={buttonClassName}
+			disabled={isDisabled}
+			onClick={onClick}
+			type={type}
+		>
 			{label}
 		</button>
 	);
diff --git a/apps/frontend/src/libs/components/button/styles.module.css b/apps/frontend/src/libs/components/button/styles.module.css
index 95f2ae424..9aa7efa8f 100644
--- a/apps/frontend/src/libs/components/button/styles.module.css
+++ b/apps/frontend/src/libs/components/button/styles.module.css
@@ -1,4 +1,5 @@
 .button {
+	min-height: 44px;
 	padding: 10px 16px;
 	font-family: Inter, sans-serif;
 	font-size: 16px;
@@ -21,3 +22,20 @@
 .button:hover:not(:disabled) {
 	background-color: var(--color-brand-primary-hover);
 }
+
+.button-danger {
+	background-color: var(--color-danger);
+}
+
+.button-danger:hover:not(:disabled) {
+	background-color: var(--color-danger-hover);
+}
+
+.button-outlined {
+	background-color: transparent;
+	border: 1px solid var(--color-brand-primary);
+}
+
+.button-outlined:hover:not(:disabled) {
+	background-color: var(--color-background-hover);
+}
diff --git a/apps/frontend/src/libs/components/input/input.tsx b/apps/frontend/src/libs/components/input/input.tsx
index af41313cd..fdabf53f0 100644
--- a/apps/frontend/src/libs/components/input/input.tsx
+++ b/apps/frontend/src/libs/components/input/input.tsx
@@ -20,6 +20,7 @@ type Properties<T extends FieldValues> = {
 	name: FieldPath<T>;
 	placeholder?: string;
 	rightIcon?: JSX.Element;
+	rowsCount?: number;
 	type?: "email" | "password" | "text";
 };
 
@@ -33,6 +34,7 @@ const Input = <T extends FieldValues>({
 	name,
 	placeholder = "",
 	rightIcon,
+	rowsCount,
 	type = "text",
 }: Properties<T>): JSX.Element => {
 	const { field } = useFormController({ control, name });
@@ -41,11 +43,7 @@ const Input = <T extends FieldValues>({
 	const hasError = Boolean(error);
 	const hasLeftIcon = Boolean(leftIcon);
 	const hasRightIcon = Boolean(rightIcon);
-	const inputClassNames = getValidClassNames(
-		styles["input-field"],
-		hasLeftIcon && styles["with-left-icon"],
-		hasRightIcon && styles["with-right-icon"],
-	);
+	const isTextArea = Boolean(rowsCount);
 
 	return (
 		<label className={styles["input-label"]}>
@@ -62,16 +60,31 @@ const Input = <T extends FieldValues>({
 					</div>
 				)}
 
-				<input
-					autoComplete={autoComplete}
-					className={inputClassNames}
-					disabled={isDisabled}
-					name={field.name}
-					onChange={field.onChange}
-					placeholder={placeholder}
-					type={type}
-					value={field.value}
-				/>
+				{isTextArea ? (
+					<textarea
+						className={getValidClassNames(
+							styles["input-field"],
+							styles["input-textarea"],
+						)}
+						disabled={isDisabled}
+						name={field.name}
+						onChange={field.onChange}
+						placeholder={placeholder}
+						rows={rowsCount}
+						value={field.value}
+					/>
+				) : (
+					<input
+						autoComplete={autoComplete}
+						className={styles["input-field"]}
+						disabled={isDisabled}
+						name={field.name}
+						onChange={field.onChange}
+						placeholder={placeholder}
+						type={type}
+						value={field.value}
+					/>
+				)}
 
 				{hasRightIcon && (
 					<div
diff --git a/apps/frontend/src/libs/components/input/styles.module.css b/apps/frontend/src/libs/components/input/styles.module.css
index bfa2a0dc4..3fc382611 100644
--- a/apps/frontend/src/libs/components/input/styles.module.css
+++ b/apps/frontend/src/libs/components/input/styles.module.css
@@ -48,6 +48,21 @@
 	border-color: var(--color-brand-primary-hover);
 }
 
+.input-textarea {
+	resize: none;
+}
+
+.input-textarea::-webkit-scrollbar {
+	cursor: default;
+	background-color: inherit;
+}
+
+.input-textarea::-webkit-scrollbar-thumb {
+	cursor: default;
+	background-color: var(--color-border-secondary);
+	border-radius: 6px;
+}
+
 .input-icon {
 	position: absolute;
 	top: 50%;
diff --git a/apps/frontend/src/libs/constants/constants.ts b/apps/frontend/src/libs/constants/constants.ts
index fd0d9406e..4eef64916 100644
--- a/apps/frontend/src/libs/constants/constants.ts
+++ b/apps/frontend/src/libs/constants/constants.ts
@@ -1 +1,2 @@
 export { SIDEBAR_ITEMS } from "./navigation-items.constant.js";
+export { EMPTY_LENGTH } from "@git-fit/shared";
diff --git a/apps/frontend/src/libs/enums/enums.ts b/apps/frontend/src/libs/enums/enums.ts
index eb4d55b46..04ae622a9 100644
--- a/apps/frontend/src/libs/enums/enums.ts
+++ b/apps/frontend/src/libs/enums/enums.ts
@@ -1,6 +1,6 @@
 export { AppRoute } from "./app-route.enum.js";
 export { DataStatus } from "./data-status.enum.js";
-export { NotificationMessage } from "./notification-massage.enum.js";
+export { NotificationMessage } from "./notification-message.enum.js";
 export { QueryParameterName } from "./query-parameter-name.enum.js";
 export {
 	APIPath,
diff --git a/apps/frontend/src/libs/enums/notification-massage.enum.ts b/apps/frontend/src/libs/enums/notification-message.enum.ts
similarity index 70%
rename from apps/frontend/src/libs/enums/notification-massage.enum.ts
rename to apps/frontend/src/libs/enums/notification-message.enum.ts
index 2f106e256..d54486c2b 100644
--- a/apps/frontend/src/libs/enums/notification-massage.enum.ts
+++ b/apps/frontend/src/libs/enums/notification-message.enum.ts
@@ -1,4 +1,5 @@
 const NotificationMessage = {
+	PROJECT_CREATE_SUCCESS: "Project was successfully created",
 	SUCCESS_PROFILE_UPDATE: "Successfully updated profile information.",
 } as const;
 
diff --git a/apps/frontend/src/libs/hooks/use-modal-state/use-modal-state.hook.ts b/apps/frontend/src/libs/hooks/use-modal-state/use-modal-state.hook.ts
index f38f989f7..eb19976a6 100644
--- a/apps/frontend/src/libs/hooks/use-modal-state/use-modal-state.hook.ts
+++ b/apps/frontend/src/libs/hooks/use-modal-state/use-modal-state.hook.ts
@@ -1,4 +1,4 @@
-import { useState } from "~/libs/hooks/hooks.js";
+import { useCallback, useState } from "~/libs/hooks/hooks.js";
 
 type Properties = {
 	isModalOpened: boolean;
@@ -9,13 +9,13 @@ type Properties = {
 const useModal = (): Properties => {
 	const [isModalOpened, setIsModalOpened] = useState<boolean>(false);
 
-	const handleModalOpen = (): void => {
+	const handleModalOpen = useCallback(() => {
 		setIsModalOpened(true);
-	};
+	}, []);
 
-	const handleModalClose = (): void => {
+	const handleModalClose = useCallback(() => {
 		setIsModalOpened(false);
-	};
+	}, []);
 
 	return {
 		isModalOpened,
diff --git a/apps/frontend/src/modules/projects/libs/types/types.ts b/apps/frontend/src/modules/projects/libs/types/types.ts
index 83e073cb0..4d6a35c75 100644
--- a/apps/frontend/src/modules/projects/libs/types/types.ts
+++ b/apps/frontend/src/modules/projects/libs/types/types.ts
@@ -1,4 +1,5 @@
 export {
+	type ProjectCreateRequestDto,
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllResponseDto,
 } from "@git-fit/shared";
diff --git a/apps/frontend/src/modules/projects/libs/validation-schemas/validation-schemas.ts b/apps/frontend/src/modules/projects/libs/validation-schemas/validation-schemas.ts
new file mode 100644
index 000000000..8ce344c8a
--- /dev/null
+++ b/apps/frontend/src/modules/projects/libs/validation-schemas/validation-schemas.ts
@@ -0,0 +1 @@
+export { projectCreateValidationSchema } from "@git-fit/shared";
diff --git a/apps/frontend/src/modules/projects/projects-api.ts b/apps/frontend/src/modules/projects/projects-api.ts
index 745f4655b..a7a508f8f 100644
--- a/apps/frontend/src/modules/projects/projects-api.ts
+++ b/apps/frontend/src/modules/projects/projects-api.ts
@@ -5,6 +5,7 @@ import { type Storage } from "~/libs/modules/storage/storage.js";
 
 import { ProjectsApiPath } from "./libs/enums/enums.js";
 import {
+	type ProjectCreateRequestDto,
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllResponseDto,
 } from "./libs/types/types.js";
@@ -20,6 +21,22 @@ class ProjectApi extends BaseHTTPApi {
 		super({ baseUrl, http, path: APIPath.PROJECTS, storage });
 	}
 
+	public async create(
+		payload: ProjectCreateRequestDto,
+	): Promise<ProjectGetAllItemResponseDto> {
+		const response = await this.load(
+			this.getFullEndpoint(ProjectsApiPath.ROOT, {}),
+			{
+				contentType: ContentType.JSON,
+				hasAuth: true,
+				method: "POST",
+				payload: JSON.stringify(payload),
+			},
+		);
+
+		return await response.json<ProjectGetAllItemResponseDto>();
+	}
+
 	public async getAll(): Promise<ProjectGetAllResponseDto> {
 		const response = await this.load(
 			this.getFullEndpoint(ProjectsApiPath.ROOT, {}),
diff --git a/apps/frontend/src/modules/projects/projects.ts b/apps/frontend/src/modules/projects/projects.ts
index d47808b7e..62ff26316 100644
--- a/apps/frontend/src/modules/projects/projects.ts
+++ b/apps/frontend/src/modules/projects/projects.ts
@@ -12,7 +12,9 @@ const projectApi = new ProjectApi({
 
 export { projectApi };
 export {
+	type ProjectCreateRequestDto,
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllResponseDto,
 } from "./libs/types/types.js";
+export { projectCreateValidationSchema } from "./libs/validation-schemas/validation-schemas.js";
 export { actions, reducer } from "./slices/projects.js";
diff --git a/apps/frontend/src/modules/projects/slices/actions.ts b/apps/frontend/src/modules/projects/slices/actions.ts
index 22c0e20bf..b01ee5bb3 100644
--- a/apps/frontend/src/modules/projects/slices/actions.ts
+++ b/apps/frontend/src/modules/projects/slices/actions.ts
@@ -1,7 +1,9 @@
 import { createAsyncThunk } from "@reduxjs/toolkit";
 
+import { NotificationMessage } from "~/libs/enums/enums.js";
 import { type AsyncThunkConfig } from "~/libs/types/types.js";
 import {
+	type ProjectCreateRequestDto,
 	type ProjectGetAllItemResponseDto,
 	type ProjectGetAllResponseDto,
 } from "~/modules/projects/projects.js";
@@ -28,4 +30,18 @@ const loadAll = createAsyncThunk<
 	return await projectApi.getAll();
 });
 
-export { getById, loadAll };
+const create = createAsyncThunk<
+	ProjectGetAllItemResponseDto,
+	ProjectCreateRequestDto,
+	AsyncThunkConfig
+>(`${sliceName}/create`, async (payload, { extra }) => {
+	const { projectApi, toastNotifier } = extra;
+
+	const response = await projectApi.create(payload);
+
+	toastNotifier.showSuccess(NotificationMessage.PROJECT_CREATE_SUCCESS);
+
+	return response;
+});
+
+export { create, getById, loadAll };
diff --git a/apps/frontend/src/modules/projects/slices/project.slice.ts b/apps/frontend/src/modules/projects/slices/project.slice.ts
index 690fc9d69..eb4e75e91 100644
--- a/apps/frontend/src/modules/projects/slices/project.slice.ts
+++ b/apps/frontend/src/modules/projects/slices/project.slice.ts
@@ -4,11 +4,12 @@ import { DataStatus } from "~/libs/enums/enums.js";
 import { type ValueOf } from "~/libs/types/types.js";
 import { type ProjectGetAllItemResponseDto } from "~/modules/projects/projects.js";
 
-import { getById, loadAll } from "./actions.js";
+import { create, getById, loadAll } from "./actions.js";
 
 type State = {
 	dataStatus: ValueOf<typeof DataStatus>;
 	project: null | ProjectGetAllItemResponseDto;
+	projectCreateStatus: ValueOf<typeof DataStatus>;
 	projects: ProjectGetAllItemResponseDto[];
 	projectStatus: ValueOf<typeof DataStatus>;
 };
@@ -16,6 +17,7 @@ type State = {
 const initialState: State = {
 	dataStatus: DataStatus.IDLE,
 	project: null,
+	projectCreateStatus: DataStatus.IDLE,
 	projects: [],
 	projectStatus: DataStatus.IDLE,
 };
@@ -44,6 +46,16 @@ const { actions, name, reducer } = createSlice({
 			state.projects = [];
 			state.dataStatus = DataStatus.REJECTED;
 		});
+		builder.addCase(create.pending, (state) => {
+			state.projectCreateStatus = DataStatus.PENDING;
+		});
+		builder.addCase(create.fulfilled, (state, action) => {
+			state.projects = [action.payload, ...state.projects];
+			state.projectCreateStatus = DataStatus.FULFILLED;
+		});
+		builder.addCase(create.rejected, (state) => {
+			state.projectCreateStatus = DataStatus.REJECTED;
+		});
 	},
 	initialState,
 	name: "projects",
diff --git a/apps/frontend/src/modules/projects/slices/projects.ts b/apps/frontend/src/modules/projects/slices/projects.ts
index 2e187a197..36d354749 100644
--- a/apps/frontend/src/modules/projects/slices/projects.ts
+++ b/apps/frontend/src/modules/projects/slices/projects.ts
@@ -1,8 +1,9 @@
-import { getById, loadAll } from "./actions.js";
+import { create, getById, loadAll } from "./actions.js";
 import { actions } from "./project.slice.js";
 
 const allActions = {
 	...actions,
+	create,
 	getById,
 	loadAll,
 };
diff --git a/apps/frontend/src/pages/projects/components/components.ts b/apps/frontend/src/pages/projects/components/components.ts
index 2952b2abb..3fabd6147 100644
--- a/apps/frontend/src/pages/projects/components/components.ts
+++ b/apps/frontend/src/pages/projects/components/components.ts
@@ -1 +1,2 @@
 export { ProjectCard } from "./project-card/project-card.js";
+export { ProjectCreateForm } from "./project-create-form/project-create-form.js";
diff --git a/apps/frontend/src/pages/projects/components/project-create-form/libs/constants/constants.ts b/apps/frontend/src/pages/projects/components/project-create-form/libs/constants/constants.ts
new file mode 100644
index 000000000..4827f05c2
--- /dev/null
+++ b/apps/frontend/src/pages/projects/components/project-create-form/libs/constants/constants.ts
@@ -0,0 +1 @@
+export { DEFAULT_PROJECT_CREATE_PAYLOAD } from "./default-project-create-payload.constant.js";
diff --git a/apps/frontend/src/pages/projects/components/project-create-form/libs/constants/default-project-create-payload.constant.ts b/apps/frontend/src/pages/projects/components/project-create-form/libs/constants/default-project-create-payload.constant.ts
new file mode 100644
index 000000000..5cc58e214
--- /dev/null
+++ b/apps/frontend/src/pages/projects/components/project-create-form/libs/constants/default-project-create-payload.constant.ts
@@ -0,0 +1,8 @@
+import { type ProjectCreateRequestDto } from "~/modules/projects/projects.js";
+
+const DEFAULT_PROJECT_CREATE_PAYLOAD: ProjectCreateRequestDto = {
+	description: "",
+	name: "",
+};
+
+export { DEFAULT_PROJECT_CREATE_PAYLOAD };
diff --git a/apps/frontend/src/pages/projects/components/project-create-form/project-create-form.tsx b/apps/frontend/src/pages/projects/components/project-create-form/project-create-form.tsx
new file mode 100644
index 000000000..ff0c534b5
--- /dev/null
+++ b/apps/frontend/src/pages/projects/components/project-create-form/project-create-form.tsx
@@ -0,0 +1,55 @@
+import { Button, Input } from "~/libs/components/components.js";
+import { useAppForm, useCallback } from "~/libs/hooks/hooks.js";
+import {
+	type ProjectCreateRequestDto,
+	projectCreateValidationSchema,
+} from "~/modules/projects/projects.js";
+
+import { DEFAULT_PROJECT_CREATE_PAYLOAD } from "./libs/constants/constants.js";
+import styles from "./styles.module.css";
+
+type Properties = {
+	onSubmit: (payload: ProjectCreateRequestDto) => void;
+};
+
+const ProjectCreateForm = ({ onSubmit }: Properties): JSX.Element => {
+	const { control, errors, handleSubmit } = useAppForm<ProjectCreateRequestDto>(
+		{
+			defaultValues: DEFAULT_PROJECT_CREATE_PAYLOAD,
+			validationSchema: projectCreateValidationSchema,
+		},
+	);
+
+	const handleFormSubmit = useCallback(
+		(event_: React.BaseSyntheticEvent): void => {
+			void handleSubmit((formData: ProjectCreateRequestDto) => {
+				onSubmit(formData);
+			})(event_);
+		},
+		[handleSubmit, onSubmit],
+	);
+
+	return (
+		<form className={styles["form-wrapper"]} onSubmit={handleFormSubmit}>
+			<Input
+				autoComplete="given-name"
+				control={control}
+				errors={errors}
+				label="Name"
+				name="name"
+			/>
+			<Input
+				control={control}
+				errors={errors}
+				label="Description"
+				name="description"
+				rowsCount={4}
+			/>
+			<div className={styles["button-wrapper"]}>
+				<Button label="Create" type="submit" />
+			</div>
+		</form>
+	);
+};
+
+export { ProjectCreateForm };
diff --git a/apps/frontend/src/pages/projects/components/project-create-form/styles.module.css b/apps/frontend/src/pages/projects/components/project-create-form/styles.module.css
new file mode 100644
index 000000000..c4a040516
--- /dev/null
+++ b/apps/frontend/src/pages/projects/components/project-create-form/styles.module.css
@@ -0,0 +1,12 @@
+.form-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	align-items: flex-end;
+}
+
+.button-wrapper {
+	display: flex;
+	flex-direction: column;
+	min-width: 150px;
+}
diff --git a/apps/frontend/src/pages/projects/projects.tsx b/apps/frontend/src/pages/projects/projects.tsx
index b342a9df3..acfb00c8a 100644
--- a/apps/frontend/src/pages/projects/projects.tsx
+++ b/apps/frontend/src/pages/projects/projects.tsx
@@ -1,35 +1,67 @@
-import { PageLayout } from "~/libs/components/components.js";
+import { Button, Modal, PageLayout } from "~/libs/components/components.js";
 import { DataStatus } from "~/libs/enums/enums.js";
 import {
 	useAppDispatch,
 	useAppSelector,
+	useCallback,
 	useEffect,
+	useModal,
 } from "~/libs/hooks/hooks.js";
-import { actions as projectActions } from "~/modules/projects/projects.js";
+import {
+	actions as projectActions,
+	type ProjectCreateRequestDto,
+} from "~/modules/projects/projects.js";
 
-import { ProjectCard } from "./components/components.js";
+import { ProjectCard, ProjectCreateForm } from "./components/components.js";
 import styles from "./styles.module.css";
 
 const Projects = (): JSX.Element => {
 	const dispatch = useAppDispatch();
 
-	const { dataStatus, projects } = useAppSelector(({ projects }) => projects);
+	const { dataStatus, projectCreateStatus, projects } = useAppSelector(
+		({ projects }) => projects,
+	);
 
 	useEffect(() => {
 		void dispatch(projectActions.loadAll());
 	}, [dispatch]);
 
+	const { isModalOpened, onModalClose, onModalOpen } = useModal();
+
+	useEffect(() => {
+		if (projectCreateStatus === DataStatus.FULFILLED) {
+			onModalClose();
+		}
+	}, [projectCreateStatus, onModalClose]);
+
+	const handleProjectCreateSubmit = useCallback(
+		(payload: ProjectCreateRequestDto) => {
+			void dispatch(projectActions.create(payload));
+		},
+		[dispatch],
+	);
+
 	const isLoading =
 		dataStatus === DataStatus.IDLE || dataStatus === DataStatus.PENDING;
 
 	return (
 		<PageLayout isLoading={isLoading}>
-			<h1 className={styles["title"]}>Projects</h1>
+			<header className={styles["projects-header"]}>
+				<h1 className={styles["title"]}>Projects</h1>
+				<Button label="Create New" onClick={onModalOpen} />
+			</header>
 			<div className={styles["projects-list"]}>
 				{projects.map((project) => (
 					<ProjectCard key={project.id} project={project} />
 				))}
 			</div>
+			<Modal
+				isModalOpened={isModalOpened}
+				onModalClose={onModalClose}
+				title="Create new project"
+			>
+				<ProjectCreateForm onSubmit={handleProjectCreateSubmit} />
+			</Modal>
 		</PageLayout>
 	);
 };
diff --git a/apps/frontend/src/pages/projects/styles.module.css b/apps/frontend/src/pages/projects/styles.module.css
index 25b9df981..77ddd8d19 100644
--- a/apps/frontend/src/pages/projects/styles.module.css
+++ b/apps/frontend/src/pages/projects/styles.module.css
@@ -5,6 +5,11 @@
 	line-height: 120%;
 }
 
+.projects-header {
+	display: flex;
+	justify-content: space-between;
+}
+
 .projects-list {
 	display: flex;
 	flex-direction: column;
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 65e25c5de..31bb93acb 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -1,9 +1,11 @@
+export { EMPTY_LENGTH } from "./libs/constants/constants.js";
 export {
 	APIPath,
 	AppEnvironment,
 	ContentType,
 	ExceptionMessage,
 	ServerErrorType,
+	SortType,
 } from "./libs/enums/enums.js";
 export {
 	ApplicationError,
diff --git a/packages/shared/src/libs/constants/constants.ts b/packages/shared/src/libs/constants/constants.ts
new file mode 100644
index 000000000..b2ef5e722
--- /dev/null
+++ b/packages/shared/src/libs/constants/constants.ts
@@ -0,0 +1 @@
+export { EMPTY_LENGTH } from "./empty-length.constant.js";
diff --git a/packages/shared/src/libs/constants/empty-length.constant.ts b/packages/shared/src/libs/constants/empty-length.constant.ts
new file mode 100644
index 000000000..3e9ba6bd7
--- /dev/null
+++ b/packages/shared/src/libs/constants/empty-length.constant.ts
@@ -0,0 +1,3 @@
+const EMPTY_LENGTH = 0;
+
+export { EMPTY_LENGTH };
diff --git a/packages/shared/src/libs/enums/enums.ts b/packages/shared/src/libs/enums/enums.ts
index 804a22ef4..6b13a2da1 100644
--- a/packages/shared/src/libs/enums/enums.ts
+++ b/packages/shared/src/libs/enums/enums.ts
@@ -3,3 +3,4 @@ export { AppEnvironment } from "./app-environment.enum.js";
 export { ContentType } from "./content-type.enum.js";
 export { ExceptionMessage } from "./exception-message.enum.js";
 export { ServerErrorType } from "./server-error-type.enum.js";
+export { SortType } from "./sort-type.enum.js";
diff --git a/packages/shared/src/libs/enums/sort-type.enum.ts b/packages/shared/src/libs/enums/sort-type.enum.ts
new file mode 100644
index 000000000..8b385ae2b
--- /dev/null
+++ b/packages/shared/src/libs/enums/sort-type.enum.ts
@@ -0,0 +1,6 @@
+const SortType = {
+	ASCENDING: "asc",
+	DESCENDING: "desc",
+} as const;
+
+export { SortType };
diff --git a/packages/shared/src/modules/projects/libs/exceptions/exceptions.ts b/packages/shared/src/modules/projects/libs/exceptions/exceptions.ts
index da4f9f798..a07546492 100644
--- a/packages/shared/src/modules/projects/libs/exceptions/exceptions.ts
+++ b/packages/shared/src/modules/projects/libs/exceptions/exceptions.ts
@@ -1 +1 @@
-export { ProjectError } from "./user-error.exception.js";
+export { ProjectError } from "./project-error.exception.js";
diff --git a/packages/shared/src/modules/projects/libs/exceptions/user-error.exception.ts b/packages/shared/src/modules/projects/libs/exceptions/project-error.exception.ts
similarity index 100%
rename from packages/shared/src/modules/projects/libs/exceptions/user-error.exception.ts
rename to packages/shared/src/modules/projects/libs/exceptions/project-error.exception.ts