dannick10/yksync_frontend

Purpose and runtime

YkSynck is a Next.js/TypeScript frontend for project management: projects, technology stacks, task Kanban boards, schedules, and productivity views. It runs as a browser-rendered Next application and consumes a separate Express/MongoDB REST backend. The app entry shell is src/app/layout.tsx; the public landing entry is src/app/(public)/page.tsx; authenticated work begins at src/app/(private)/dashboard/page.tsx.

Route and access boundary

The App Router divides marketing/authentication from protected product routes:

• Public pages and sign-in/register live under src/app/(public)/ and src/app/(public)/(auth)/.

• Protected dashboard, profile, and project workflows live under src/app/(private)/, with shared private chrome in src/app/(private)/layout.tsx.

• src/middleware.ts is the request-time authentication/route-guard boundary.

Application state and API integration

Redux Toolkit centralizes client state in src/redux/store.ts. Domain slices model authenticated identity and core entities: src/redux/slices/AuthSlices.ts, src/redux/slices/ProjectSlices.ts, and src/redux/slices/TaskSlice.ts. Corresponding service modules make REST calls to the external backend, including src/redux/services/AuthService.ts, src/redux/services/projectService.ts, and src/redux/services/TaskService.ts. src/utils/useBaseApi.ts is the likely shared API client/configuration boundary.

Authentication and identity

Sign-in and registration screens are src/app/(public)/(auth)/signin/page.tsx and src/app/(public)/(auth)/register/page.tsx. Frontend auth state is handled through the auth slice/service; the backend owns JWT issuance, password hashing with Bcrypt, and MongoDB persistence. Profile viewing/editing is isolated in src/app/(private)/perfil/page.tsx and src/app/(private)/perfil/edit/page.tsx.

Project lifecycle

Projects are created, listed, inspected, and edited through route-specific screens: src/app/(private)/projects/new/page.tsx, src/app/(private)/projects/[id]/page.tsx, and src/app/(private)/projects/edit/[id]/page.tsx. Validation/schema concerns are colocated in src/app/(private)/projects/schema/ProjectSchema.ts. Project records connect deadlines, links, stacks, statuses, and tasks; project state/API modules mediate persistence.

Task execution and planning

A project detail flow renders task management, including draggable Kanban behavior through src/components/DraggableTaskItem.tsx, src/components/Droppable.tsx, and src/components/TaskComponent.tsx. Task movement updates task/status state and persists through the task service. Calendar and deadline visualization are provided by src/components/MyFullCalendar.tsx; date normalization is separated in src/utils/configureTime.ts.

Analytics and technology modeling

Dashboard-oriented views compose project/task data into counts, charts, and stack statistics via src/components/ChartComponent.tsx, src/components/DisplayCountProject.tsx, and src/components/StackStatistics.tsx. Technologies and task statuses are independent API/state domains, represented by src/redux/services/stackService.ts, src/redux/services/statusService.ts, src/redux/slices/stackSlices.ts, and src/redux/slices/statusSlices.ts.

UI composition

Global providers and CSS are installed at src/app/provider.tsx and src/app/globals.css. Reusable navigation/layout components (src/components/Header.tsx, src/components/LayoutDisplay.tsx) serve product pages, while public marketing sections are intentionally isolated under src/app/(public)/components/. Tailwind CSS provides styling; Framer Motion, dnd-kit, Calendar.js, and Chart.js support the interactive presentation layer.