# dannick10/yksync_frontend architecture

> Architecture diagram of the GitHub repository dannick10/yksync_frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-07-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dannick10/yksync_frontend
- Repository: https://github.com/dannick10/yksync_frontend

## Overview

#### 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.

Main entry points: [`src/app/(private)/layout.tsx`](https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/layout.tsx) (Private chrome), [`src/app/(private)/dashboard/page.tsx`](https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/dashboard/page.tsx) (Dashboard), [`src/app/(private)/projects/[id]/page.tsx`](https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/projects/%5Bid%5D/page.tsx) (Project lifecycle), [`src/redux/store.ts`](https://github.com/dannick10/yksync_frontend/blob/main/src/redux/store.ts) (Redux store)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["App Router"]
  node_app_shell["App shell<br/>Next.js root layout<br/>[layout.tsx]"]
  node_providers["Global providers<br/>Redux provider<br/>[provider.tsx]"]
  node_middleware{{"Route guard<br/>Next middleware<br/>[middleware.ts]"}}
  node_public_routes["Public &amp; auth routes<br/>route segment"]
  node_private_layout["Private chrome<br/>protected layout<br/>[layout.tsx]"]
  node_dashboard["Dashboard<br/>protected page<br/>[page.tsx]"]
  node_profile["Profile workflow<br/>protected pages<br/>[page.tsx]"]
  node_project_routes["Project lifecycle<br/>protected pages<br/>[page.tsx]"]
  node_project_schema["Project schema<br/>validation schema<br/>[ProjectSchema.ts]"]
end

subgraph group_state["State &amp; API"]
  node_redux_store[("Redux store<br/>Redux Toolkit store<br/>[store.ts]")]
  node_auth_domain["Auth domain<br/>slice + service<br/>[AuthSlices.ts]"]
  node_project_domain["Project domain<br/>slice + service<br/>[ProjectSlices.ts]"]
  node_task_domain["Task domain<br/>slice + service<br/>[TaskSlice.ts]"]
  node_stack_status_domains["Stack &amp; status domains<br/>slices + services<br/>[stackService.ts]"]
  node_api_client{{"API client<br/>REST client<br/>[useBaseApi.ts]"}}
end

subgraph group_ui["Product UI"]
  node_kanban["Kanban task board<br/>drag-and-drop UI"]
  node_calendar["Calendar &amp; deadlines<br/>calendar UI<br/>[MyFullCalendar.tsx]"]
  node_analytics["Analytics widgets<br/>dashboard UI<br/>[ChartComponent.tsx]"]
  node_product_navigation["Product navigation<br/>shared layout UI<br/>[LayoutDisplay.tsx]"]
end

node_backend[("Express / MongoDB backend<br/>external REST API")]

node_app_shell -->|"installs"| node_providers
node_app_shell -->|"renders"| node_public_routes
node_app_shell -->|"renders"| node_private_layout
node_middleware -->|"authorizes access"| node_private_layout
node_private_layout -->|"hosts"| node_dashboard
node_private_layout -->|"hosts"| node_profile
node_private_layout -->|"hosts"| node_project_routes
node_private_layout -->|"uses"| node_product_navigation
node_providers -->|"provides"| node_redux_store
node_public_routes -->|"sign-in/register"| node_auth_domain
node_profile -->|"reads and updates identity"| node_auth_domain
node_project_routes -->|"validates"| node_project_schema
node_project_routes -->|"loads and saves"| node_project_domain
node_project_routes -->|"renders"| node_kanban
node_project_routes -->|"renders"| node_calendar
node_dashboard -->|"renders"| node_analytics
node_dashboard -->|"reads projects"| node_project_domain
node_dashboard -->|"reads tasks"| node_task_domain
node_dashboard -->|"reads statistics data"| node_stack_status_domains
node_kanban -->|"updates task status"| node_task_domain
node_redux_store -->|"contains"| node_auth_domain
node_redux_store -->|"contains"| node_project_domain
node_redux_store -->|"contains"| node_task_domain
node_redux_store -->|"contains"| node_stack_status_domains
node_auth_domain -->|"requests"| node_api_client
node_project_domain -->|"requests"| node_api_client
node_task_domain -->|"requests"| node_api_client
node_stack_status_domains -->|"requests"| node_api_client
node_api_client -->|"REST"| node_backend

click node_app_shell "https://github.com/dannick10/yksync_frontend/blob/main/src/app/layout.tsx"
click node_providers "https://github.com/dannick10/yksync_frontend/blob/main/src/app/provider.tsx"
click node_middleware "https://github.com/dannick10/yksync_frontend/blob/main/src/middleware.ts"
click node_private_layout "https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/layout.tsx"
click node_dashboard "https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/dashboard/page.tsx"
click node_profile "https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/perfil/page.tsx"
click node_project_routes "https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/projects/%5Bid%5D/page.tsx"
click node_project_schema "https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/projects/schema/ProjectSchema.ts"
click node_redux_store "https://github.com/dannick10/yksync_frontend/blob/main/src/redux/store.ts"
click node_auth_domain "https://github.com/dannick10/yksync_frontend/blob/main/src/redux/slices/AuthSlices.ts"
click node_project_domain "https://github.com/dannick10/yksync_frontend/blob/main/src/redux/slices/ProjectSlices.ts"
click node_task_domain "https://github.com/dannick10/yksync_frontend/blob/main/src/redux/slices/TaskSlice.ts"
click node_stack_status_domains "https://github.com/dannick10/yksync_frontend/blob/main/src/redux/services/stackService.ts"
click node_api_client "https://github.com/dannick10/yksync_frontend/blob/main/src/utils/useBaseApi.ts"
click node_kanban "https://github.com/dannick10/yksync_frontend/blob/main/src/components/DraggableTaskItem.tsx"
click node_calendar "https://github.com/dannick10/yksync_frontend/blob/main/src/components/MyFullCalendar.tsx"
click node_analytics "https://github.com/dannick10/yksync_frontend/blob/main/src/components/ChartComponent.tsx"
click node_product_navigation "https://github.com/dannick10/yksync_frontend/blob/main/src/components/LayoutDisplay.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app_shell,node_providers,node_middleware,node_public_routes,node_private_layout,node_dashboard,node_profile,node_project_routes,node_project_schema toneBlue
class node_redux_store,node_auth_domain,node_project_domain,node_task_domain,node_stack_status_domains,node_api_client toneAmber
class node_kanban,node_calendar,node_analytics,node_product_navigation toneMint
class node_backend toneNeutral
```

## Components

### App Router

Public and protected route boundary.

- [App shell](https://github.com/dannick10/yksync_frontend/blob/main/src/app/layout.tsx): Next.js root layout · `src/app/layout.tsx`
- [Global providers](https://github.com/dannick10/yksync_frontend/blob/main/src/app/provider.tsx): Redux provider · `src/app/provider.tsx`
- [Route guard](https://github.com/dannick10/yksync_frontend/blob/main/src/middleware.ts): Next middleware · Enforces authentication for protected routes. · `src/middleware.ts`
- **Public & auth routes**: route segment · Marketing, sign-in, and registration screens.
- [Private chrome](https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/layout.tsx): protected layout · Shared layout for authenticated product routes. · `src/app/(private)/layout.tsx`
- [Dashboard](https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/dashboard/page.tsx): protected page · Productivity and project overview. · `src/app/(private)/dashboard/page.tsx`
- [Profile workflow](https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/perfil/page.tsx): protected pages · View and edit authenticated user identity. · `src/app/(private)/perfil/page.tsx`
- [Project lifecycle](https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/projects/%5Bid%5D/page.tsx): protected pages · Create, inspect, and edit projects. · `src/app/(private)/projects/[id]/page.tsx`
- [Project schema](https://github.com/dannick10/yksync_frontend/blob/main/src/app/(private)/projects/schema/ProjectSchema.ts): validation schema · `src/app/(private)/projects/schema/ProjectSchema.ts`

### State & API

Redux domains and REST integration.

- [Redux store](https://github.com/dannick10/yksync_frontend/blob/main/src/redux/store.ts): Redux Toolkit store · Central client-state composition. · `src/redux/store.ts`
- [Auth domain](https://github.com/dannick10/yksync_frontend/blob/main/src/redux/slices/AuthSlices.ts): slice + service · Identity state and authentication REST calls. · `src/redux/slices/AuthSlices.ts`
- [Project domain](https://github.com/dannick10/yksync_frontend/blob/main/src/redux/slices/ProjectSlices.ts): slice + service · Project state and persistence. · `src/redux/slices/ProjectSlices.ts`
- [Task domain](https://github.com/dannick10/yksync_frontend/blob/main/src/redux/slices/TaskSlice.ts): slice + service · Task state, status updates, and persistence. · `src/redux/slices/TaskSlice.ts`
- [Stack & status domains](https://github.com/dannick10/yksync_frontend/blob/main/src/redux/services/stackService.ts): slices + services · Technology and task-status reference data. · `src/redux/services/stackService.ts`
- [API client](https://github.com/dannick10/yksync_frontend/blob/main/src/utils/useBaseApi.ts): REST client · Shared external-backend request configuration. · `src/utils/useBaseApi.ts`

### Product UI

Shared interactive product components.

- [Kanban task board](https://github.com/dannick10/yksync_frontend/blob/main/src/components/DraggableTaskItem.tsx): drag-and-drop UI · Moves tasks between statuses. · `src/components/DraggableTaskItem.tsx`
- [Calendar & deadlines](https://github.com/dannick10/yksync_frontend/blob/main/src/components/MyFullCalendar.tsx): calendar UI · Visualizes task and project dates. · `src/components/MyFullCalendar.tsx`
- [Analytics widgets](https://github.com/dannick10/yksync_frontend/blob/main/src/components/ChartComponent.tsx): dashboard UI · Counts, charts, and stack statistics. · `src/components/ChartComponent.tsx`
- [Product navigation](https://github.com/dannick10/yksync_frontend/blob/main/src/components/LayoutDisplay.tsx): shared layout UI · `src/components/LayoutDisplay.tsx`

### Other components

- **Express / MongoDB backend**: external REST API · Owns JWTs, credentials, and persistent domain data.

## Connections

- App shell → Global providers: installs
- App shell → Public & auth routes: renders
- App shell → Private chrome: renders
- Route guard → Private chrome: authorizes access
- Private chrome → Dashboard: hosts
- Private chrome → Profile workflow: hosts
- Private chrome → Project lifecycle: hosts
- Private chrome → Product navigation: uses
- Global providers → Redux store: provides
- Public & auth routes → Auth domain: sign-in/register
- Profile workflow → Auth domain: reads and updates identity
- Project lifecycle → Project schema: validates
- Project lifecycle → Project domain: loads and saves
- Project lifecycle → Kanban task board: renders
- Project lifecycle → Calendar & deadlines: renders
- Dashboard → Analytics widgets: renders
- Dashboard → Project domain: reads projects
- Dashboard → Task domain: reads tasks
- Dashboard → Stack & status domains: reads statistics data
- Kanban task board → Task domain: updates task status
- Redux store → Auth domain: contains
- Redux store → Project domain: contains
- Redux store → Task domain: contains
- Redux store → Stack & status domains: contains
- Auth domain → API client: requests
- Project domain → API client: requests
- Task domain → API client: requests
- Stack & status domains → API client: requests
- API client → Express / MongoDB backend: REST