snake/YTVeille
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Ismail SEBBANE
2026-05-22 09:17:28 +02:00
commit 26b3ed6994
33 changed files with 2943 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/Dockerfile
+21
View File
@@ -0,0 +1,21 @@
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json ./
RUN npm install
FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ARG NEXT_PUBLIC_API_URL=http://localhost:8000
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
RUN npm run build
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["npm", "start"]
frontend/app/globals.css
+353
View File
@@ -0,0 +1,353 @@
/* ===== DESIGN SYSTEM =====
Palette inspirée Sparklite : rouge primaire, fond clair, typographie propre
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--primary: #E8401C;
--primary-dark: #c43415;
--primary-light: #fde8e3;
--bg: #F5F5F7;
--surface: #ffffff;
--surface-dark: #1A1A2E;
--border: #e5e7eb;
--text: #111827;
--text-secondary: #6b7280;
--text-muted: #9ca3af;
--sidebar-width: 240px;
--filter-width: 280px;
--radius: 12px;
--shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
--shadow-hover: 0 4px 20px rgba(232,64,28,.15);
--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
html.dark {
--primary-light: rgba(232,64,28,.18);
--bg: #0f172a;
--surface: #1e293b;
--surface-dark: #0a0f1e;
--border: #334155;
--text: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
--shadow-hover: 0 4px 20px rgba(232,64,28,.25);
}
html, body { height: 100%; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); }
/* ===== LAYOUT ===== */
.app-shell {
display: grid;
grid-template-columns: var(--filter-width) 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"filters topbar"
"filters main";
height: 100vh;
overflow: hidden;
}
/* ===== TOPBAR ===== */
.topbar {
grid-area: topbar;
display: flex;
align-items: center;
gap: 12px;
padding: 0 24px;
background: var(--surface);
border-bottom: 1px solid var(--border);
z-index: 10;
}
.topbar__search {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 16px;
font-size: 14px;
color: var(--text-secondary);
cursor: pointer;
transition: var(--transition);
}
.topbar__search:hover { border-color: var(--primary); }
.topbar__search input {
border: none; background: transparent; outline: none; width: 100%; font-size: 14px; color: var(--text);
}
.topbar__btn {
display: flex; align-items: center; gap: 6px;
background: var(--primary); color: white; border: none;
border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600;
cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.topbar__btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.topbar__btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.topbar__status { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.topbar__theme-btn {
width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid var(--border);
background: var(--bg); cursor: pointer; font-size: 16px;
display: flex; align-items: center; justify-content: center;
transition: var(--transition); flex-shrink: 0;
}
.topbar__theme-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
/* ===== SIDEBAR ===== */
.sidebar {
grid-area: sidebar;
display: flex; flex-direction: column;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 20px 0;
overflow-y: auto;
}
.sidebar__logo {
display: flex; align-items: center; gap: 10px;
padding: 0 20px 20px;
font-size: 18px; font-weight: 700; color: var(--text);
border-bottom: 1px solid var(--border);
margin-bottom: 12px;
}
.sidebar__logo-icon {
width: 36px; height: 36px; background: var(--primary);
border-radius: 10px; display: flex; align-items: center; justify-content: center;
color: white; font-size: 18px;
}
.sidebar__nav { flex: 1; }
.sidebar__nav-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 20px; cursor: pointer;
font-size: 14px; font-weight: 500; color: var(--text-secondary);
transition: var(--transition); border-radius: 0; position: relative;
text-decoration: none; border: none; background: none; width: 100%; text-align: left;
}
.sidebar__nav-item:hover { background: var(--bg); color: var(--text); }
.sidebar__nav-item--active { color: var(--primary); background: var(--primary-light); }
.sidebar__nav-item--active::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; background: var(--primary); border-radius: 0 3px 3px 0;
}
.sidebar__badge {
margin-left: auto; background: var(--primary); color: white;
border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700;
}
.sidebar__section-title {
font-size: 11px; font-weight: 600; text-transform: uppercase;
color: var(--text-muted); letter-spacing: .08em;
padding: 16px 20px 8px;
}
.sidebar__footer {
padding: 16px 20px 0; border-top: 1px solid var(--border);
}
/* ===== MAIN CONTENT ===== */
.main {
grid-area: main;
overflow-y: auto;
padding: 24px;
display: flex; flex-direction: column; gap: 16px;
}
.main__header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 4px;
}
.main__title { font-size: 20px; font-weight: 700; }
.main__count { font-size: 14px; color: var(--text-secondary); }
.main__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.main__empty {
text-align: center; padding: 80px 20px;
color: var(--text-muted); font-size: 15px;
}
.main__loading {
display: flex; gap: 16px; flex-wrap: wrap;
}
/* ===== VIDEO CARD ===== */
.video-card {
background: var(--surface); border-radius: var(--radius);
box-shadow: var(--shadow); overflow: hidden;
transition: var(--transition); display: flex; flex-direction: column;
text-decoration: none; color: inherit;
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.video-card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #e5e7eb; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.video-card:hover .video-card__thumb img { transform: scale(1.04); }
.video-card__score {
position: absolute; top: 10px; right: 10px;
background: var(--primary); color: white;
border-radius: 999px; padding: 3px 10px;
font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(232,64,28,.4);
}
.video-card__duration {
position: absolute; bottom: 8px; right: 8px;
background: rgba(0,0,0,.75); color: white;
border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 600;
}
.video-card__chapters {
position: absolute; bottom: 8px; left: 8px;
background: rgba(0,0,0,.6); color: #fbbf24;
border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600;
}
.video-card__body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.video-card__title {
font-size: 14px; font-weight: 600; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.video-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.video-card__meta-item { display: flex; align-items: center; gap: 3px; }
.video-card__topics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.topic-tag {
background: var(--primary-light); color: var(--primary);
border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600;
}
.topic-tag--dark { background: var(--surface-dark); color: #a5b4fc; }
/* Skeleton */
.skeleton {
background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-card { height: 300px; }
/* ===== FILTER PANEL ===== */
.filters {
grid-area: filters;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 24px 20px;
overflow-y: auto;
display: flex; flex-direction: column; gap: 24px;
}
.filters__title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.filters__group { display: flex; flex-direction: column; gap: 10px; }
.filters__label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.filters__slider { width: 100%; accent-color: var(--primary); cursor: pointer; }
.filters__score-display {
display: flex; justify-content: space-between; font-size: 13px;
font-weight: 600; color: var(--primary);
}
.filters__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
border: 1.5px solid var(--border); border-radius: 999px;
padding: 5px 12px; font-size: 12px; font-weight: 500;
cursor: pointer; transition: var(--transition); background: var(--surface); color: var(--text-secondary);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip--active { background: var(--primary); border-color: var(--primary); color: white; }
.filters__days { display: flex; gap: 6px; }
.day-btn {
flex: 1; padding: 6px 0; border-radius: 8px; border: 1.5px solid var(--border);
font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition);
background: var(--surface); color: var(--text-secondary);
}
.day-btn:hover { border-color: var(--primary); color: var(--primary); }
.day-btn--active { background: var(--primary); border-color: var(--primary); color: white; }
.filters__reset {
border: 1.5px solid var(--border); border-radius: 8px; padding: 8px;
font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition);
background: transparent; color: var(--text-secondary); width: 100%;
}
.filters__reset:hover { border-color: var(--primary); color: var(--primary); }
/* Brand */
.filters__brand {
display: flex; align-items: center; gap: 10px;
font-size: 18px; font-weight: 700; color: var(--text);
padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.filters__brand-icon {
width: 36px; height: 36px; background: var(--primary);
border-radius: 10px; display: flex; align-items: center; justify-content: center;
color: white; font-size: 16px;
}
.filters__divider { height: 1px; background: var(--border); }
/* Query list */
.filters__queries { display: flex; flex-direction: column; gap: 6px; }
.query-item {
display: flex; align-items: center; justify-content: space-between;
background: var(--bg); border: 1px solid var(--border);
border-radius: 8px; padding: 6px 10px; gap: 8px;
}
.query-item__text { font-size: 12px; color: var(--text); flex: 1; word-break: break-word; }
.query-item__remove {
background: none; border: none; cursor: pointer; color: var(--text-muted);
font-size: 16px; font-weight: 600; line-height: 1; padding: 0 2px; flex-shrink: 0;
transition: var(--transition);
}
.query-item__remove:hover { color: var(--primary); }
/* Add query */
.filters__add-query { display: flex; gap: 6px; }
.filters__query-input {
flex: 1; border: 1.5px solid var(--border); border-radius: 8px;
padding: 7px 10px; font-size: 12px; outline: none;
background: var(--surface); color: var(--text); transition: var(--transition);
}
.filters__query-input:focus { border-color: var(--primary); }
.filters__add-btn {
width: 32px; height: 32px; border-radius: 8px; border: none;
background: var(--primary); color: white; font-size: 18px; font-weight: 600;
cursor: pointer; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: var(--transition);
}
.filters__add-btn:hover { background: var(--primary-dark); }
/* Launch button */
.filters__launch {
width: 100%; padding: 10px; border-radius: 8px; border: none;
background: var(--primary); color: white; font-size: 13px; font-weight: 700;
cursor: pointer; transition: var(--transition);
}
.filters__launch:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.filters__launch:disabled { opacity: .6; cursor: not-allowed; transform: none; }
/* Quota banner */
.main__quota-banner {
background: #fef3c7; color: #92400e;
border: 1px solid #f59e0b; border-radius: var(--radius);
padding: 12px 16px; font-size: 13px; font-weight: 600;
display: flex; align-items: flex-start; gap: 10px; line-height: 1.6;
}
.main__quota-banner span:last-child { font-weight: 400; }
.main__quota-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
html.dark .main__quota-banner {
background: rgba(245,158,11,.1); color: #fbbf24;
border-color: rgba(245,158,11,.3);
}
/* Launching banner */
.main__launching {
background: var(--primary-light); color: var(--primary);
border-radius: var(--radius); padding: 10px 16px;
font-size: 13px; font-weight: 600; text-align: center;
}
/* ===== PAGINATION ===== */
.pagination { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 8px 0; }
.page-btn {
border: 1.5px solid var(--border); border-radius: 8px; padding: 6px 14px;
font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition);
background: var(--surface); color: var(--text-secondary);
}
.page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-btn--active { background: var(--primary); border-color: var(--primary); color: white; }
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
.filters { display: none; }
}
frontend/app/layout.tsx
+16
View File
@@ -0,0 +1,16 @@
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "YTVeille — Veille automatique YouTube en français",
description:
"Veille automatique des meilleures vidéos YouTube en français sur n'importe quel domaine technique.",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="fr">
<body>{children}</body>
</html>
);
}
frontend/app/page.tsx
+255
View File
@@ -0,0 +1,255 @@
"use client";
import { useState, useEffect, useCallback, useRef } from "react";
import TopBar from "@/components/TopBar";
import VideoCard from "@/components/VideoCard";
import FilterPanel from "@/components/FilterPanel";
import { fetchVideos, fetchStatus, fetchConfig, triggerRefresh, type Video, type Filters } from "@/lib/api";
interface FilterState {
min_score: number;
days: number;
}
const DEFAULT_FILTERS: FilterState = { min_score: 0, days: 30 };
const PAGE_SIZE = 18;
export default function HomePage() {
const [videos, setVideos] = useState<Video[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const [filters, setFilters] = useState<FilterState>(DEFAULT_FILTERS);
const [search, setSearch] = useState("");
const [debouncedSearch, setDebouncedSearch] = useState("");
const [loading, setLoading] = useState(true);
const [initialQueries, setInitialQueries] = useState<string[]>([]);
const [launching, setLaunching] = useState(false);
const [activeQueryFilters, setActiveQueryFilters] = useState<string[]>([]);
const [dark, setDark] = useState(false);
// Lire la préférence stockée au montage
useEffect(() => {
const stored = localStorage.getItem("theme");
const isDark = stored === "dark" || (!stored && window.matchMedia("(prefers-color-scheme: dark)").matches);
setDark(isDark);
document.documentElement.classList.toggle("dark", isDark);
}, []);
const handleToggleDark = () => {
setDark((prev) => {
const next = !prev;
document.documentElement.classList.toggle("dark", next);
localStorage.setItem("theme", next ? "dark" : "light");
return next;
});
};
const [status, setStatus] = useState<{ video_count: number; last_updated: string | null; refresh_running: boolean; quota_exceeded: boolean; quota_exceeded_at: string | null }>({
video_count: 0,
last_updated: null,
refresh_running: false,
quota_exceeded: false,
quota_exceeded_at: null,
});
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
const loadVideos = useCallback(async (f: FilterState, p: number, q: string, sqFilters: string[]) => {
setLoading(true);
try {
const params: Filters = {
q: q || undefined,
min_score: f.min_score,
days: f.days,
page: p,
page_size: PAGE_SIZE,
source_queries: sqFilters.length > 0 ? sqFilters : undefined,
};
const result = await fetchVideos(params);
setVideos(result.items);
setTotal(result.total);
} catch {
setVideos([]);
} finally {
setLoading(false);
}
}, []);
// Charger config + statut au montage
useEffect(() => {
fetchConfig().then((c) => setInitialQueries(c.queries)).catch(() => {});
fetchStatus().then(setStatus).catch(() => {});
}, []);
// Debounce de la recherche texte (300 ms)
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedSearch(search);
setPage(1);
}, 300);
return () => clearTimeout(timer);
}, [search]);
// Charger vidéos à chaque changement de filtres / page / recherche / chips
useEffect(() => {
loadVideos(filters, page, debouncedSearch, activeQueryFilters);
}, [filters, page, debouncedSearch, activeQueryFilters, loadVideos]);
const handleFilterChange = (partial: Partial<FilterState>) => {
setFilters((prev) => ({ ...prev, ...partial }));
setPage(1);
};
const handleQueryFilterToggle = (q: string) => {
setActiveQueryFilters((prev) =>
prev.includes(q) ? prev.filter((x) => x !== q) : [...prev, q]
);
setPage(1);
};
const handleLaunch = async (queries: string[]) => {
setLaunching(true);
try {
await triggerRefresh(queries);
// Polling jusqu'à la fin du refresh
pollRef.current = setInterval(async () => {
try {
const s = await fetchStatus();
setStatus(s);
if (!s.refresh_running) {
clearInterval(pollRef.current!);
pollRef.current = null;
setLaunching(false);
setPage(1);
loadVideos(filters, 1, debouncedSearch, activeQueryFilters);
}
} catch {
clearInterval(pollRef.current!);
pollRef.current = null;
setLaunching(false);
}
}, 2000);
} catch {
setLaunching(false);
}
};
// Nettoyage du polling au démontage
useEffect(() => () => { if (pollRef.current) clearInterval(pollRef.current); }, []);
const totalPages = Math.ceil(total / PAGE_SIZE);
// Tous les filtres (texte + chips) sont gérés côté backend.
const displayedVideos = videos;
return (
<div className="app-shell">
<TopBar
lastUpdated={status.last_updated}
videoCount={status.video_count}
onSearch={setSearch}
dark={dark}
onToggleDark={handleToggleDark}
/>
<main className="main">
<div className="main__header">
<h1 className="main__title">▶ YTVeille</h1>
<span className="main__count">{total} vidéo{total > 1 ? "s" : ""}</span>
</div>
{launching && (
<div className="main__launching">
<span>⟳ Recherche YouTube en cours, veuillez patienter...</span>
</div>
)}
{status.quota_exceeded && !launching && (
<div className="main__quota-banner">
<span className="main__quota-icon">⚠️</span>
<div>
<strong>Quota YouTube API dépassé</strong>
{status.quota_exceeded_at && (
<> — depuis le {new Intl.DateTimeFormat("fr-FR", {
day: "numeric", month: "short",
hour: "2-digit", minute: "2-digit",
}).format(new Date(status.quota_exceeded_at))}</>
)}
<br />
<span>Le quota se renouvelle chaque jour à minuit (heure du Pacifique, ~8h–9h UTC). Réessayez demain.</span>
</div>
</div>
)}
{loading ? (
<div className="main__grid">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="skeleton skeleton-card" />
))}
</div>
) : displayedVideos.length === 0 ? (
<div className="main__empty">
<p style={{ fontSize: 40, marginBottom: 12 }}>▶</p>
<p>Aucune vidéo trouvée.</p>
<p style={{ marginTop: 8, fontSize: 13 }}>
Configurez vos requêtes et lancez la veille depuis le panneau gauche.
</p>
</div>
) : (
<div className="main__grid">
{displayedVideos.map((v) => (
<VideoCard key={v.id} video={v} />
))}
</div>
)}
{/* Pagination */}
{totalPages > 1 && (
<nav className="pagination" aria-label="Pagination">
<button
id="btn-prev-page"
className="page-btn"
disabled={page === 1}
onClick={() => setPage((p) => p - 1)}
>
← Précédent
</button>
{Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
const p = i + 1;
return (
<button
key={p}
id={`btn-page-${p}`}
className={`page-btn${page === p ? " page-btn--active" : ""}`}
onClick={() => setPage(p)}
>
{p}
</button>
);
})}
<button
id="btn-next-page"
className="page-btn"
disabled={page === totalPages}
onClick={() => setPage((p) => p + 1)}
>
Suivant →
</button>
</nav>
)}
</main>
<FilterPanel
filters={filters}
onChange={handleFilterChange}
total={total}
initialQueries={initialQueries}
onLaunch={handleLaunch}
launching={launching}
activeQueryFilters={activeQueryFilters}
onQueryFilterToggle={handleQueryFilterToggle}
/>
</div>
);
}
frontend/components/FilterPanel.tsx
+159
View File
@@ -0,0 +1,159 @@
"use client";
import { useState, useEffect } from "react";
interface FilterState {
min_score: number;
days: number;
}
interface Props {
filters: FilterState;
onChange: (f: Partial<FilterState>) => void;
total: number;
initialQueries: string[];
onLaunch: (queries: string[]) => void;
launching: boolean;
activeQueryFilters: string[];
onQueryFilterToggle: (q: string) => void;
}
const DAYS_OPTIONS = [7, 30, 90];
export default function FilterPanel({ filters, onChange, total, initialQueries, onLaunch, launching, activeQueryFilters, onQueryFilterToggle }: Props) {
const [queries, setQueries] = useState<string[]>(initialQueries);
const [inputValue, setInputValue] = useState("");
useEffect(() => {
setQueries(initialQueries);
}, [initialQueries]);
const addQuery = () => {
const q = inputValue.trim();
if (q && !queries.includes(q)) {
setQueries([...queries, q]);
setInputValue("");
}
};
const removeQuery = (i: number) => {
setQueries(queries.filter((_, idx) => idx !== i));
};
return (
<aside className="filters">
{/* Brand */}
<div className="filters__brand">
<div className="filters__brand-icon">▶</div>
<span>YTVeille</span>
</div>
{/* Requêtes de recherche */}
<div className="filters__group">
<p className="filters__label">Requêtes de recherche</p>
<div className="filters__queries">
{queries.map((q, i) => (
<div key={i} className="query-item">
<span className="query-item__text">{q}</span>
<button
className="query-item__remove"
onClick={() => removeQuery(i)}
title="Supprimer"
>
×
</button>
</div>
))}
</div>
<div className="filters__add-query">
<input
type="text"
placeholder='Ex: "Docker production français"'
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && addQuery()}
className="filters__query-input"
/>
<button className="filters__add-btn" onClick={addQuery} title="Ajouter">+</button>
</div>
<button
className="filters__launch"
onClick={() => onLaunch(queries)}
disabled={launching || queries.length === 0}
>
{launching ? "⟳ Recherche en cours..." : "▶ Lancer la veille"}
</button>
</div>
<div className="filters__divider" />
{/* Filtrer par requête */}
{queries.length > 0 && (
<div className="filters__group">
<p className="filters__label">Filtrer par requête</p>
<div className="filters__chips">
{queries.map((q, i) => (
<button
key={i}
className={`chip${activeQueryFilters.includes(q) ? " chip--active" : ""}`}
onClick={() => onQueryFilterToggle(q)}
>
{q}
</button>
))}
</div>
</div>
)}
{/* Score minimum */}
<div className="filters__group">
<label className="filters__label" htmlFor="slider-score">Score minimum</label>
<div className="filters__score-display">
<span>0</span>
<span style={{ color: "var(--primary)", fontWeight: 700 }}>{filters.min_score}</span>
<span>100</span>
</div>
<input
id="slider-score"
type="range"
min={0}
max={100}
step={5}
value={filters.min_score}
onChange={(e) => onChange({ min_score: Number(e.target.value) })}
className="filters__slider"
/>
</div>
{/* Période */}
<div className="filters__group">
<p className="filters__label">Période</p>
<div className="filters__days">
{DAYS_OPTIONS.map((d) => (
<button
key={d}
id={`days-${d}`}
className={`day-btn${filters.days === d ? " day-btn--active" : ""}`}
onClick={() => onChange({ days: d })}
>
{d}j
</button>
))}
</div>
</div>
{/* Reset filtres */}
<button
id="btn-reset-filters"
className="filters__reset"
onClick={() => onChange({ min_score: 0, days: 30 })}
>
↺ Réinitialiser les filtres
</button>
<p style={{ fontSize: 12, color: "var(--text-muted)", marginTop: "auto" }}>
{total} vidéo{total > 1 ? "s" : ""} trouvée{total > 1 ? "s" : ""}
</p>
</aside>
);
}
frontend/components/Sidebar.tsx
+45
View File
@@ -0,0 +1,45 @@
"use client";
export default function Sidebar() {
const navItems = [
{ icon: "▶", label: "Veille", id: "feed", badge: null, active: true },
{ icon: "🔍", label: "Explorer", id: "explore", badge: null, active: false },
{ icon: "⭐", label: "Favoris", id: "favorites", badge: null, active: false },
];
return (
<aside className="sidebar">
<div className="sidebar__logo">
<div className="sidebar__logo-icon">☸</div>
<span>K8s Veille</span>
</div>
<nav className="sidebar__nav">
{navItems.map((item) => (
<button
key={item.id}
id={`nav-${item.id}`}
className={`sidebar__nav-item${item.active ? " sidebar__nav-item--active" : ""}`}
>
<span>{item.icon}</span>
<span>{item.label}</span>
{item.badge && <span className="sidebar__badge">{item.badge}</span>}
</button>
))}
<p className="sidebar__section-title">Topics</p>
{["🔥 Incident", "🏗️ Architecture", "📊 Observabilité", "⚙️ CI/CD", "📈 Scaling"].map((t) => (
<button key={t} className="sidebar__nav-item" style={{ fontSize: "13px" }}>
{t}
</button>
))}
</nav>
<div className="sidebar__footer">
<button className="sidebar__nav-item" style={{ width: "100%", borderRadius: 8 }}>
⚙️ Paramètres
</button>
</div>
</aside>
);
}
frontend/components/TopBar.tsx
+75
View File
@@ -0,0 +1,75 @@
"use client";
import { useState } from "react";
import { triggerRefresh } from "@/lib/api";
interface Props {
lastUpdated: string | null;
videoCount: number;
onSearch: (q: string) => void;
dark: boolean;
onToggleDark: () => void;
}
export default function TopBar({ lastUpdated, videoCount, onSearch, dark, onToggleDark }: Props) {
const [refreshing, setRefreshing] = useState(false);
const [inputValue, setInputValue] = useState("");
const commitSearch = () => onSearch(inputValue);
const handleRefresh = async () => {
commitSearch();
setRefreshing(true);
try {
await triggerRefresh();
setTimeout(() => window.location.reload(), 3000);
} catch {
// silently fail
} finally {
setTimeout(() => setRefreshing(false), 3000);
}
};
return (
<header className="topbar">
<div className="topbar__search">
<span>🔍</span>
<input
id="search-input"
type="text"
placeholder="Rechercher dans les vidéos... (Entrée pour valider)"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && commitSearch()}
/>
</div>
{lastUpdated && (
<p className="topbar__status">
{videoCount} vidéos · mis à jour {new Intl.RelativeTimeFormat("fr", { numeric: "auto" }).format(
-Math.round((Date.now() - new Date(lastUpdated).getTime()) / 3600000),
"hours"
)}
</p>
)}
<button
className="topbar__theme-btn"
onClick={onToggleDark}
title={dark ? "Passer en mode clair" : "Passer en mode sombre"}
aria-label="Basculer le thème"
>
{dark ? "☀️" : "🌙"}
</button>
<button
id="btn-refresh"
className="topbar__btn"
onClick={handleRefresh}
disabled={refreshing}
>
{refreshing ? "⟳ Actualisation..." : "⟳ Actualiser"}
</button>
</header>
);
}
frontend/components/VideoCard.tsx
+78
View File
@@ -0,0 +1,78 @@
"use client";
import type { Video } from "@/lib/api";
import { formatDuration, formatDate, TOPICS } from "@/lib/api";
import Image from "next/image";
interface Props {
video: Video;
}
export default function VideoCard({ video }: Props) {
const scoreColor =
video.score >= 70 ? "var(--primary)" : video.score >= 40 ? "#f59e0b" : "#6b7280";
return (
<a
href={video.youtube_url}
target="_blank"
rel="noopener noreferrer"
className="video-card"
id={`video-${video.id}`}
aria-label={`Voir la vidéo : ${video.title}`}
>
{/* Thumbnail */}
<div className="video-card__thumb">
{video.thumbnail_url ? (
<Image
src={video.thumbnail_url}
alt={video.title}
fill
style={{ objectFit: "cover" }}
unoptimized
/>
) : (
<div style={{ background: "#e5e7eb", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 36 }}>☸</div>
)}
{/* Score badge */}
<span className="video-card__score" style={{ background: scoreColor }}>
{video.score.toFixed(0)}/100
</span>
{/* Duration */}
<span className="video-card__duration">{formatDuration(video.duration_seconds)}</span>
{/* Chapters indicator */}
{video.has_chapters && (
<span className="video-card__chapters">📑 Chapitres</span>
)}
</div>
{/* Body */}
<div className="video-card__body">
<h3 className="video-card__title">{video.title}</h3>
<div className="video-card__meta">
<span className="video-card__meta-item">📺 {video.channel}</span>
<span className="video-card__meta-item">📅 {formatDate(video.published_at)}</span>
<span className="video-card__meta-item">👁 {video.view_count.toLocaleString("fr-FR")}</span>
{video.like_count > 0 && (
<span className="video-card__meta-item">👍 {video.like_count.toLocaleString("fr-FR")}</span>
)}
</div>
{/* Topics */}
{video.topics.length > 0 && (
<div className="video-card__topics">
{video.topics.slice(0, 3).map((t) => (
<span key={t} className="topic-tag">
{TOPICS[t] ?? t}
</span>
))}
</div>
)}
</div>
</a>
);
}
frontend/lib/api.ts
+94
View File
@@ -0,0 +1,94 @@
const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
export interface Video {
id: string;
title: string;
channel: string;
published_at: string;
duration_seconds: number;
view_count: number;
like_count: number;
thumbnail_url: string;
youtube_url: string;
tags: string[];
has_chapters: boolean;
score: number;
topics: string[];
source_queries: string[];
}
export interface VideoList {
total: number;
page: number;
page_size: number;
items: Video[];
}
export interface Filters {
q?: string;
min_score?: number;
topic?: string;
source_queries?: string[];
days?: number;
page?: number;
page_size?: number;
}
export async function fetchVideos(filters: Filters = {}): Promise<VideoList> {
const params = new URLSearchParams();
if (filters.q) params.set("q", filters.q);
if (filters.min_score !== undefined) params.set("min_score", String(filters.min_score));
if (filters.topic) params.set("topic", filters.topic);
if (filters.source_queries?.length) filters.source_queries.forEach((sq) => params.append("source_query", sq));
if (filters.days) params.set("days", String(filters.days));
if (filters.page) params.set("page", String(filters.page));
if (filters.page_size) params.set("page_size", String(filters.page_size));
const res = await fetch(`${API_BASE}/api/videos?${params}`, { next: { revalidate: 300 } });
if (!res.ok) throw new Error("Erreur lors du chargement des vidéos");
return res.json();
}
export async function triggerRefresh(queries?: string[]): Promise<void> {
const body = queries ? JSON.stringify({ queries }) : undefined;
await fetch(`${API_BASE}/api/refresh`, {
method: "POST",
headers: body ? { "Content-Type": "application/json" } : {},
body,
});
}
export async function fetchConfig(): Promise<{ queries: string[] }> {
const res = await fetch(`${API_BASE}/api/config`, { cache: "no-store" });
if (!res.ok) throw new Error("Erreur config");
return res.json();
}
export async function fetchStatus(): Promise<{ video_count: number; last_updated: string | null; refresh_running: boolean; quota_exceeded: boolean; quota_exceeded_at: string | null }> {
const res = await fetch(`${API_BASE}/api/status`, { cache: "no-store" });
if (!res.ok) throw new Error("Erreur status");
return res.json();
}
export function formatDuration(seconds: number): string {
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;
if (h > 0) return `${h}h${String(m).padStart(2, "0")}`;
return `${m}:${String(s).padStart(2, "0")}`;
}
export function formatDate(iso: string): string {
return new Intl.DateTimeFormat("fr-FR", { day: "numeric", month: "short", year: "numeric" }).format(new Date(iso));
}
export const TOPICS: Record<string, string> = {
incident: "🔥 Incident",
architecture: "🏗️ Architecture",
"observabilité": "📊 Observabilité",
"sécurité": "🔒 Sécurité",
ci_cd: "⚙️ CI/CD",
scaling: "📈 Scaling",
migration: "🔄 Migration",
storage: "💾 Storage",
};
frontend/next-env.d.ts
Vendored
+5
View File
@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
frontend/next.config.js
+13
View File
@@ -0,0 +1,13 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "i.ytimg.com",
},
],
},
};
module.exports = nextConfig;
frontend/package-lock.json
Generated
+499
View File
@@ -0,0 +1,499 @@
{
"name": "k8s-veille-frontend",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "k8s-veille-frontend",
"version": "1.0.0",
"dependencies": {
"next": "14.2.3",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"typescript": "^5"
}
},
"node_modules/@next/env": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
"integrity": "sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==",
"license": "MIT"
},
"node_modules/@next/swc-darwin-arm64": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
"integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
"integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
"integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
"integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
"integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
"integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
"integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
"integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
"cpu": [
"ia32"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
"integrity": "sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@swc/counter": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
"integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
"license": "Apache-2.0"
},
"node_modules/@swc/helpers": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
"integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
"license": "Apache-2.0",
"dependencies": {
"@swc/counter": "^0.1.3",
"tslib": "^2.4.0"
}
},
"node_modules/@types/node": {
"version": "20.19.33",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz",
"integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==",
"dev": true,
"license": "MIT",
"dependencies": {
"undici-types": "~6.21.0"
}
},
"node_modules/@types/prop-types": {
"version": "15.7.15",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/react": {
"version": "18.3.28",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
"integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.2.2"
}
},
"node_modules/@types/react-dom": {
"version": "18.3.7",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
"integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"@types/react": "^18.0.0"
}
},
"node_modules/busboy": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
"integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
"dependencies": {
"streamsearch": "^1.1.0"
},
"engines": {
"node": ">=10.16.0"
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001774",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz",
"integrity": "sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "CC-BY-4.0"
},
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
"license": "MIT"
},
"node_modules/csstype": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
"dev": true,
"license": "MIT"
},
"node_modules/graceful-fs": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"license": "ISC"
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"license": "MIT"
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"license": "MIT",
"dependencies": {
"js-tokens": "^3.0.0 || ^4.0.0"
},
"bin": {
"loose-envify": "cli.js"
}
},
"node_modules/nanoid": {
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"bin": {
"nanoid": "bin/nanoid.cjs"
},
"engines": {
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/next": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/next/-/next-14.2.3.tgz",
"integrity": "sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==",
"deprecated": "This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.",
"license": "MIT",
"dependencies": {
"@next/env": "14.2.3",
"@swc/helpers": "0.5.5",
"busboy": "1.6.0",
"caniuse-lite": "^1.0.30001579",
"graceful-fs": "^4.2.11",
"postcss": "8.4.31",
"styled-jsx": "5.1.1"
},
"bin": {
"next": "dist/bin/next"
},
"engines": {
"node": ">=18.17.0"
},
"optionalDependencies": {
"@next/swc-darwin-arm64": "14.2.3",
"@next/swc-darwin-x64": "14.2.3",
"@next/swc-linux-arm64-gnu": "14.2.3",
"@next/swc-linux-arm64-musl": "14.2.3",
"@next/swc-linux-x64-gnu": "14.2.3",
"@next/swc-linux-x64-musl": "14.2.3",
"@next/swc-win32-arm64-msvc": "14.2.3",
"@next/swc-win32-ia32-msvc": "14.2.3",
"@next/swc-win32-x64-msvc": "14.2.3"
},
"peerDependencies": {
"@opentelemetry/api": "^1.1.0",
"@playwright/test": "^1.41.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.3.0"
},
"peerDependenciesMeta": {
"@opentelemetry/api": {
"optional": true
},
"@playwright/test": {
"optional": true
},
"sass": {
"optional": true
}
}
},
"node_modules/picocolors": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
"license": "ISC"
},
"node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/react": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.1.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.2"
},
"peerDependencies": {
"react": "^18.3.1"
}
},
"node_modules/scheduler": {
"version": "0.23.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.1.0"
}
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/streamsearch": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/styled-jsx": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
"integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
"license": "MIT",
"dependencies": {
"client-only": "0.0.1"
},
"engines": {
"node": ">= 12.0.0"
},
"peerDependencies": {
"react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
},
"peerDependenciesMeta": {
"@babel/core": {
"optional": true
},
"babel-plugin-macros": {
"optional": true
}
}
},
"node_modules/tslib": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD"
},
"node_modules/typescript": {
"version": "5.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true,
"license": "Apache-2.0",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/undici-types": {
"version": "6.21.0",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
"dev": true,
"license": "MIT"
}
}
}
frontend/package.json
+21
View File
@@ -0,0 +1,21 @@
{
"name": "ytveille-frontend",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "14.2.3",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"typescript": "^5"
}
}
frontend/tsconfig.json
+43
View File
@@ -0,0 +1,43 @@
{
"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": {
"@/*": [
"./*"
]
},
"types": [
"node"
]
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}