admin/freelancer-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Freelancer Match — AI-матчинг, escrow, milestones, portfolio, skill-tests, verification

Browse Source
This commit is contained in:
DevSecOps
2026-07-03 15:03:30 +00:00
commit 0b785db1b3
61 changed files with 2725 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/Dockerfile
+12
View File
@@ -0,0 +1,12 @@
FROM node:20-alpine AS base
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]
frontend/app/ai-match/page.tsx
+86
View File
@@ -0,0 +1,86 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
export default function AIMatchPage() {
const [projectId, setProjectId] = useState("");
const [loading, setLoading] = useState(false);
const [matches, setMatches] = useState<any[]>([]);
const [error, setError] = useState("");
async function handleMatch() {
if (!projectId) return;
setLoading(true);
try {
const res = await fetch("/api/ai/match-project", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ project_id: projectId, limit: 10 }),
});
if (!res.ok) throw new Error("Ошибка при поиске совпадений");
const data = await res.json();
setMatches(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
return (
<div className="min-h-screen bg-gray-50">
<header className="bg-white border-b px-6 py-4 flex items-center justify-between">
<Link href="/dashboard" className="text-blue-600 hover:text-blue-800">← Назад</Link>
<h1 className="text-xl font-bold">AI-матчинг</h1>
</header>
<main className="container mx-auto px-4 py-8 max-w-3xl">
<div className="bg-white rounded-xl shadow-sm p-6 mb-6">
<h2 className="text-2xl font-bold mb-4">Подобрать фрилансеров</h2>
<input
value={projectId}
onChange={(e) => setProjectId(e.target.value)}
placeholder="ID проекта"
className="w-full px-4 py-3 border rounded-lg mb-4"
/>
{error && (
<div className="mb-4 p-3 bg-red-50 text-red-700 rounded">{error}</div>
)}
<Button onClick={handleMatch} disabled={loading}>
{loading ? "Поиск..." : "Найти совпадения"}
</Button>
</div>
{matches.length > 0 && (
<div className="space-y-4">
{matches.map((m, i) => (
<div key={i} className="bg-white rounded-xl shadow-sm p-6">
<div className="flex items-center justify-between mb-2">
<h3 className="font-semibold">{m.name}</h3>
<span className="text-green-600 font-bold">{(m.match_score * 100).toFixed(0)}%</span>
</div>
{m.skills_matched.length > 0 && (
<p className="text-sm text-gray-500 mb-2">Совпадение навыков: {m.skills_matched.join(", ")}</p>
)}
<ul className="space-y-1">
{m.reasons.map((r, j) => (
<li key={j} className="text-sm text-gray-600">• {r}</li>
))}
</ul>
</div>
))}
</div>
)}
</main>
</div>
);
}
frontend/app/auth/login/page.tsx
+73
View File
@@ -0,0 +1,73 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
const loginSchema = z.object({
email: z.string().email(),
password: z.string().min(1),
});
type FormData = z.infer<typeof loginSchema>;
export default function LoginPage() {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const form = useForm<FormData>({ resolver: zodResolver(loginSchema) });
async function onSubmit(data: FormData) {
setLoading(true);
try {
const res = await fetch("/api/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
});
if (!res.ok) throw new Error("Неверный email или пароль");
router.push("/dashboard");
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-md p-8 rounded-xl shadow-sm bg-white">
<h1 className="text-2xl font-bold mb-6">Вход</h1>
{error && (
<div className="mb-4 p-3 bg-red-50 text-red-700 rounded">{error}</div>
)}
<input {...form.register("email")} placeholder="Email" className="w-full mb-3 px-4 py-2 border rounded" />
{form.formState.errors.email && (
<p className="text-sm text-red-500 mb-2">{form.formState.errors.email.message}</p>
)}
<input {...form.register("password")} type="password" placeholder="Пароль" className="w-full mb-4 px-4 py-2 border rounded" />
{form.formState.errors.password && (
<p className="text-sm text-red-500 mb-2">{form.formState.errors.password.message}</p>
)}
<button type="submit" disabled={loading} className="w-full bg-blue-600 text-white py-3 rounded font-medium">
{loading ? "Вход..." : "Войти"}
</button>
<p className="text-center mt-4 text-sm">
Нет аккаунта?{" "}
<Link href="/auth/register" className="text-blue-600">Зарегистрироваться</Link>
</p>
</form>
</div>
);
}
frontend/app/auth/register/page.tsx
+79
View File
@@ -0,0 +1,79 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
const registerSchema = z.object({
email: z.string().email(),
password: z.string().min(12),
fullName: z.string().optional(),
});
type FormData = z.infer<typeof registerSchema>;
export default function RegisterPage() {
const searchParams = useSearchParams();
const router = useRouter();
const role = searchParams.get("role") || "freelancer";
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const form = useForm<FormData>({ resolver: zodResolver(registerSchema) });
async function onSubmit(data: FormData) {
setLoading(true);
try {
const res = await fetch("/api/auth/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...data, role }),
});
if (!res.ok) throw new Error("Ошибка регистрации");
router.push("/dashboard");
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-md p-8 rounded-xl shadow-sm bg-white">
<h1 className="text-2xl font-bold mb-6">Регистрация</h1>
{error && (
<div className="mb-4 p-3 bg-red-50 text-red-700 rounded">{error}</div>
)}
<input {...form.register("email")} placeholder="Email" className="w-full mb-3 px-4 py-2 border rounded" />
{form.formState.errors.email && (
<p className="text-sm text-red-500 mb-2">{form.formState.errors.email.message}</p>
)}
<input {...form.register("password")} type="password" placeholder="Пароль (мин. 12 символов)" className="w-full mb-3 px-4 py-2 border rounded" />
{form.formState.errors.password && (
<p className="text-sm text-red-500 mb-2">{form.formState.errors.password.message}</p>
)}
<input {...form.register("fullName")} placeholder="Имя" className="w-full mb-4 px-4 py-2 border rounded" />
<button type="submit" disabled={loading} className="w-full bg-blue-600 text-white py-3 rounded font-medium">
{loading ? "Регистрация..." : `Зарегистрироваться как ${role === "client" ? "заказчик" : "фрилансер"}`}
</button>
<p className="text-center mt-4 text-sm">
Уже есть аккаунт?{" "}
<Link href="/auth/login" className="text-blue-600">Войти</Link>
</p>
</form>
</div>
);
}
frontend/app/dashboard/page.tsx
+51
View File
@@ -0,0 +1,51 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import Link from "next/link";
async function fetchProjects() {
const res = await fetch("/api/projects?status=open");
return res.json();
}
export default function DashboardPage() {
const { data: projects, isLoading } = useQuery({ queryKey: ["projects"], queryFn: fetchProjects });
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="bg-white border-b px-6 py-4 flex items-center justify-between">
<h1 className="text-xl font-bold">Freelancer Match</h1>
<nav className="flex gap-4">
<Link href="/projects" className="text-gray-600 hover:text-blue-600">Проекты</Link>
<Link href="/ai-match" className="text-gray-600 hover:text-blue-600">AI-матчинг</Link>
</nav>
</header>
{/* Content */}
<main className="container mx-auto px-4 py-8">
<h2 className="text-2xl font-bold mb-6">Добро пожаловать!</h2>
{isLoading ? (
<p>Загрузка...</p>
) : projects && projects.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
{projects.map((project) => (
<Link key={project.id} href={`/projects/${project.id}`} className="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition">
<h3 className="font-semibold mb-2">{project.title}</h3>
<p className="text-gray-600 text-sm line-clamp-2">{project.description}</p>
{project.budget_max && (
<div className="mt-3 text-green-600 font-medium">
до {project.budget_max.toLocaleString()}₽
</div>
)}
</Link>
))}
</div>
) : (
<p className="text-gray-500">Нет доступных проектов</p>
)}
</main>
</div>
);
}
frontend/app/globals.css
+20
View File
@@ -0,0 +1,20 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #0a0a0a;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
}
frontend/app/layout.tsx
+18
View File
@@ -0,0 +1,18 @@
import type { Metadata } from "next";
import "./globals.css";
import { Providers } from "@/lib/providers";
export const metadata: Metadata = {
title: "Freelancer Match — Умная площадка для фрилансеров",
description: "AI-подбор фрилансеров, escrow-гарант сделок",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ru">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
frontend/app/page.tsx
+55
View File
@@ -0,0 +1,55 @@
import Link from "next/link";
import { Button } from "@/components/ui/button";
export default function Home() {
return (
<div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
{/* Hero */}
<section className="container mx-auto px-4 py-20 text-center">
<h1 className="text-5xl font-bold mb-6">Freelancer Match</h1>
<p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
Умная площадка для фрилансеров и заказчиков. AI-подбор, escrow-гарант сделок.
</p>
<div className="flex gap-4 justify-center">
<Button size="lg" asChild>
<Link href="/auth/register?role=freelancer">Начать как фрилансер</Link>
</Button>
<Button variant="outline" size="lg" asChild>
<Link href="/auth/register?role=client">Создать проект</Link>
</Button>
</div>
</section>
{/* Features */}
<section className="container mx-auto px-4 py-16 grid md:grid-cols-3 gap-8">
{[
{ title: "AI-матчинг", desc: "Умный подбор фрилансеров по навыкам и опыту" },
{ title: "Escrow-гарант", desc: "Безопасные сделки с защитой обеих сторон" },
{ title: "Рейтинги", desc: "Прозрачные отзывы и система доверия" },
].map((f) => (
<div key={f.title} className="p-6 rounded-xl bg-white shadow-sm">
<h3 className="text-lg font-semibold mb-2">{f.title}</h3>
<p className="text-gray-600">{f.desc}</p>
</div>
))}
</section>
{/* Stats */}
<section className="container mx-auto px-4 py-16 text-center">
<div className="grid grid-cols-3 gap-8">
{[["10K+", "Фрилансеров"], ["50M₽", "Обработано сделок"], ["98%", "Довольных клиентов"]].map(([num, label]) => (
<div key={num}>
<div className="text-3xl font-bold">{num}</div>
<div className="text-gray-600">{label}</div>
</div>
))}
</div>
</section>
{/* Footer */}
<footer className="border-t py-8 text-center text-gray-500">
© 2026 Freelancer Match. Все права защищены.
</footer>
</div>
);
}
frontend/app/projects/[id]/page.tsx
+66
View File
@@ -0,0 +1,66 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
async function fetchProject(id: string) {
const res = await fetch(`/api/projects/${id}`);
if (!res.ok) throw new Error("Проект не найден");
return res.json();
}
export default function ProjectPage() {
const params = useParams<{ id: string }>();
const router = useRouter();
const { data: project, isLoading } = useQuery({
queryKey: ["project", params.id],
queryFn: () => fetchProject(params.id),
});
if (isLoading) return <div className="min-h-screen flex items-center justify-center">Загрузка...</div>;
if (!project) return <div>Проект не найден</div>;
return (
<div className="min-h-screen bg-gray-50">
<header className="bg-white border-b px-6 py-4 flex items-center justify-between">
<Link href="/dashboard" className="text-blue-600 hover:text-blue-800">← Назад</Link>
<h1 className="text-xl font-bold">Freelancer Match</h1>
</header>
<main className="container mx-auto px-4 py-8 max-w-3xl">
<div className="bg-white rounded-xl shadow-sm p-6 mb-6">
<h2 className="text-2xl font-bold mb-4">{project.title}</h2>
<p className="text-gray-700 whitespace-pre-wrap mb-4">{project.description}</p>
{project.category && (
<span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
{project.category}
</span>
)}
<div className="mt-4 flex gap-2 flex-wrap">
{project.required_skills.map((skill: string) => (
<span key={skill} className="px-2 py-1 bg-gray-100 rounded text-sm">{skill}</span>
))}
</div>
{(project.budget_min || project.budget_max) && (
<div className="mt-4 p-3 bg-green-50 rounded">
{project.budget_min ? `${project.budget_min.toLocaleString()}₽` : "—"} —{" "}
{project.budget_max ? `${project.budget_max.toLocaleString()}₽` : "до бесконечности"}
</div>
)}
{project.deadline && (
<p className="mt-2 text-sm text-gray-500">Дедлайн: {new Date(project.deadline).toLocaleDateString("ru-RU")}</p>
)}
</div>
<Button onClick={() => router.push("/auth/login")}>Оставить заявку</Button>
</main>
</div>
);
}
frontend/app/reviews/page.tsx
+81
View File
@@ -0,0 +1,81 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
export default function ReviewsPage() {
const [rating, setRating] = useState(0);
const [comment, setComment] = useState("");
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
async function handleSubmit() {
if (rating === 0) return;
setLoading(true);
try {
await fetch("/api/reviews", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ project_id: "123", reviewee_id: "456", rating, comment }),
});
setSuccess(true);
} catch (err) {
console.error(err);
} finally {
setLoading(false);
}
}
return (
<div className="min-h-screen bg-gray-50">
<header className="bg-white border-b px-6 py-4 flex items-center justify-between">
<Link href="/dashboard" className="text-blue-600 hover:text-blue-800">← Назад</Link>
<h1 className="text-xl font-bold">Отзывы и рейтинги</h1>
</header>
<main className="container mx-auto px-4 py-8 max-w-2xl">
<div className="bg-white rounded-xl shadow-sm p-6 mb-6">
<h2 className="text-2xl font-bold mb-4">Оставить отзыв</h2>
{/* Rating stars */}
<div className="flex gap-1 mb-4">
{[1, 2, 3, 4, 5].map((star) => (
<button key={star} onClick={() => setRating(star)} className="text-3xl cursor-pointer">
{star <= rating ? "⭐" : "☆"}
</button>
))}
</div>
<textarea
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="Расскажите о вашем опыте..."
className="w-full px-4 py-3 border rounded-lg mb-4 min-h-[100px]"
/>
{success && (
<div className="mb-4 p-3 bg-green-50 text-green-700 rounded">Спасибо за отзыв!</div>
)}
<Button onClick={handleSubmit} disabled={loading || rating === 0}>
{loading ? "Отправка..." : `Оценить на ${rating}/5`}
</Button>
</div>
{/* Reviews list */}
<div className="space-y-4">
{[1, 2, 3].map((i) => (
<div key={i} className="bg-white rounded-xl shadow-sm p-6">
<div className="flex items-center justify-between mb-2">
<span className="font-semibold">Пользователь {i}</span>
<span>{rating}/5</span>
</div>
<p className="text-gray-600 text-sm">Отличный опыт работы! Рекомендую.</p>
</div>
))}
</div>
</main>
</div>
);
}
frontend/components/ui/button.tsx
+51
View File
@@ -0,0 +1,51 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-blue-600 text-white hover:bg-blue-700",
destructive: "bg-red-500 text-white hover:bg-red-600",
outline: "border border-gray-300 bg-transparent hover:bg-gray-100",
secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
ghost: "hover:bg-gray-100",
link: "text-blue-600 underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8 text-base",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
className={buttonVariants({ variant, size, className })}
ref={ref}
{...props}
/>
);
}
);
Button.displayName = "Button";
export { Button, buttonVariants };
frontend/lib/providers.tsx
+14
View File
@@ -0,0 +1,14 @@
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";
export function Providers({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(() => new QueryClient());
return (
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
);
}
frontend/package.json
+41
View File
@@ -0,0 +1,41 @@
{
"name": "freelancer-match-frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.1",
"@tanstack/react-query": "^5.60.5",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.460.0",
"next": "^14.2.0",
"react": "^18.3.0",
"react-dom": "^18.3.0",
"react-hook-form": "^7.53.2",
"tailwind-merge": "^2.6.0",
"zod": "^3.23.8",
"zustand": "^4.5.5"
},
"devDependencies": {
"@types/node": "^20.17.0",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.0",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.15",
"typescript": "^5.6.0"
}
}
frontend/postcss.config.js
+6
View File
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
frontend/tailwind.config.js
+11
View File
@@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
};
frontend/tsconfig.json
+23
View File
@@ -0,0 +1,23 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [{ "name": "next" }],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}