# bysxx/fullstack-intern-test architecture

> Architecture diagram of the GitHub repository bysxx/fullstack-intern-test, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-21). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bysxx/fullstack-intern-test
- Repository: https://github.com/bysxx/fullstack-intern-test

## Overview

1. This repository is a Next.js 15 App Router template, not a feature-complete product. The architecture is centered on `src/app` for routing and composition, with shared client-side building blocks elsewhere in `src/`.

2. The top-level application boundary is `src/app/layout.tsx`, which likely wraps every route with global structure, metadata, styles, and the app provider layer. `src/app/template.tsx` is present as a route-level wrapper for per-navigation remounting behavior, which is a distinct App Router concept.

3. The only concrete route in the tree is `src/app/(main)/page.tsx`, meaning the current app has a main route group but no visible feature subdomains yet. The `(main)` segment is a route grouping boundary rather than a URL segment, used to organize pages without changing paths.

4. `src/app/provider.tsx` is the app-wide client-provider entry point. Based on the README, this is where React Query and other client-side context providers are expected to be mounted, separating framework-level server layout from browser-only state and caching concerns.

5. Error and fallback handling is explicit: `src/app/not-found.tsx` defines the 404 boundary, while UI loading states are represented by shared components such as `src/components/ui/loading.tsx`, `loading-spinner.tsx`, and `table/skeleton.tsx`. That suggests the app treats loading and missing routes as first-class UI states.

6. Shared presentational components live under `src/components/ui`. These are reusable, mostly framework-agnostic UI primitives and composite controls: accordion, action button, footer, icon, sub-header, notification toggle, and table skeletons. This layer is the main reusable view boundary for the app.

7. There is a client-only boundary in `src/components/client-only.tsx`, which indicates some UI or hooks are intended to run only in the browser. That is important in a Next.js app because it separates server-rendered content from components that rely on DOM APIs, browser storage, or client state.

8. Local interactive state is split between hooks and a store layer. `src/hooks/useCustomHook.ts` and `src/hooks/useNotification.ts` encapsulate reusable behavior, while `src/stores/useStore.ts` provides global client state via Zustand. This creates a clear separation between logic reuse and shared mutable state.

9. `src/utils/notification.ts` is a small utility boundary that likely supports notification-related UI or state transitions. Combined with `notification-toggle.tsx` and `useNotification.ts`, it suggests notification handling is a small internal subsystem, even though no backend or external notification service is present in the tree.

10. Shared typing lives in `src/types/auth.ts`, but there are no actual auth routes or auth actions in the checked-in file tree. That implies the template was prepared for future feature expansion, and types are already carved out for domain-specific contracts.

11. Styling is centralized in `src/styles/global.css`, with Tailwind configured through `tailwind.config.js` and `postcss.config.js`. The styling architecture is utility-first, with a global stylesheet for resets/base tokens and Tailwind for component-level styling.

12. The repo has no backend service, database client, or API layer in the current tree. So the current architecture is a frontend-only template with client-state, UI primitives, and App Router scaffolding, ready to be extended into a full-stack app later.

13. In diagram terms, the main flow is: browser request enters the Next.js App Router, `layout.tsx` and `provider.tsx` establish global shell and client contexts, route pages like `(main)/page.tsx` render content, and shared UI/hooks/store/utils provide the interactive behavior layer beneath the page surface.

14. The main architectural boundaries to draw are: routing/app shell, client-provider layer, shared UI components, reusable hooks, global store, utilities, and styling. The current repository is intentionally thin in domain logic, which makes these boundaries the primary structure rather than feature subsystems.

Main entry points: [`src/app/(main)/page.tsx`](https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/(main)/page.tsx) (Main page), [`src/app/layout.tsx`](https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/layout.tsx) (Root layout), [`src/components/ui/loading.tsx`](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/loading.tsx) (Loading state), [`src/app/provider.tsx`](https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/provider.tsx) (Providers)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App router"]
  node_layout["Root layout<br/>app shell<br/>[layout.tsx]"]
  node_template["Route template<br/>app wrapper<br/>[template.tsx]"]
  node_main_page["Main page<br/>route page<br/>[page.tsx]"]
  node_not_found["404 page<br/>fallback route<br/>[not-found.tsx]"]
end

subgraph group_client["Client layer"]
  node_provider["Providers<br/>client provider<br/>[provider.tsx]"]
  node_client_only["Client only<br/>browser boundary<br/>[client-only.tsx]"]
  node_use_notification["useNotification<br/>hook<br/>[useNotification.ts]"]
  node_custom_hook["Custom hook<br/>[useCustomHook.ts]"]
  node_store["App store<br/>zustand store<br/>[useStore.ts]"]
end

subgraph group_ui["Shared UI"]
  node_accordion["Accordion<br/>ui primitive<br/>[accordion.tsx]"]
  node_action_button["Action button<br/>ui control<br/>[action-button.tsx]"]
  node_footer["Footer<br/>ui layout<br/>[footer.tsx]"]
  node_icon["Icon<br/>ui primitive<br/>[icon.tsx]"]
  node_sub_header["Sub header<br/>ui layout<br/>[sub-header.tsx]"]
  node_notification_toggle["Notif toggle<br/>ui control"]
  node_loading_ui["Loading state<br/>ui feedback<br/>[loading.tsx]"]
  node_spinner(("Spinner<br/>ui feedback"))
  node_table_skeleton["Table skeleton<br/>ui feedback<br/>[skeleton.tsx]"]
end

subgraph group_base["Foundation"]
  node_notification_utils["Notification util<br/>[notification.ts]"]
  node_auth_types["Auth types<br/>domain types<br/>[auth.ts]"]
  node_global_css["Global CSS<br/>styles<br/>[global.css]"]
end

node_layout -->|"wraps"| node_provider
node_layout -->|"wraps"| node_template
node_layout -->|"renders"| node_main_page
node_layout -->|"frames"| node_not_found
node_provider -->|"supplies"| node_store
node_provider -->|"enables"| node_use_notification
node_main_page -->|"uses"| node_client_only
node_main_page -->|"composes"| node_sub_header
node_main_page -->|"composes"| node_footer
node_main_page -->|"composes"| node_action_button
node_main_page -->|"composes"| node_notification_toggle
node_main_page -->|"composes"| node_accordion
node_main_page -->|"shows"| node_loading_ui
node_loading_ui -->|"uses"| node_spinner
node_loading_ui -->|"uses"| node_table_skeleton
node_notification_toggle -->|"uses"| node_use_notification
node_use_notification -->|"uses"| node_notification_utils
node_custom_hook -->|"reads"| node_store
node_client_only -.->|"can wrap"| node_icon
node_not_found -.->|"shares"| node_loading_ui
node_layout -->|"imports"| node_global_css
node_layout -.->|"references"| node_auth_types

click node_layout "https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/layout.tsx"
click node_provider "https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/provider.tsx"
click node_template "https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/template.tsx"
click node_main_page "https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/(main)/page.tsx"
click node_not_found "https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/not-found.tsx"
click node_client_only "https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/client-only.tsx"
click node_accordion "https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/accordion.tsx"
click node_action_button "https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/action-button.tsx"
click node_footer "https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/footer.tsx"
click node_icon "https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/icon.tsx"
click node_sub_header "https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/sub-header.tsx"
click node_notification_toggle "https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/notification-toggle.tsx"
click node_loading_ui "https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/loading.tsx"
click node_spinner "https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/loading-spinner.tsx"
click node_table_skeleton "https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/table/skeleton.tsx"
click node_use_notification "https://github.com/bysxx/fullstack-intern-test/blob/main/src/hooks/useNotification.ts"
click node_custom_hook "https://github.com/bysxx/fullstack-intern-test/blob/main/src/hooks/useCustomHook.ts"
click node_store "https://github.com/bysxx/fullstack-intern-test/blob/main/src/stores/useStore.ts"
click node_notification_utils "https://github.com/bysxx/fullstack-intern-test/blob/main/src/utils/notification.ts"
click node_auth_types "https://github.com/bysxx/fullstack-intern-test/blob/main/src/types/auth.ts"
click node_global_css "https://github.com/bysxx/fullstack-intern-test/blob/main/src/styles/global.css"

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_layout,node_template,node_main_page,node_not_found toneBlue
class node_provider,node_client_only,node_use_notification,node_custom_hook,node_store toneAmber
class node_accordion,node_action_button,node_footer,node_icon,node_sub_header,node_notification_toggle,node_loading_ui,node_spinner,node_table_skeleton toneMint
class node_notification_utils,node_auth_types,node_global_css toneRose
```

## Components

### App router

Next.js App Router shell, routing, and route boundaries.

- [Root layout](https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/layout.tsx): app shell · Global app wrapper for routes, metadata, and structure. · `src/app/layout.tsx`
- [Route template](https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/template.tsx): app wrapper · Per-navigation remount wrapper used by the App Router. · `src/app/template.tsx`
- [Main page](https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/(main)/page.tsx): route page · The only concrete route in the app tree. · `src/app/(main)/page.tsx`
- [404 page](https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/not-found.tsx): fallback route · Route boundary for missing pages. · `src/app/not-found.tsx`

### Client layer

Browser-only providers, hooks, and shared state.

- [Providers](https://github.com/bysxx/fullstack-intern-test/blob/main/src/app/provider.tsx): client provider · App-wide client context entry for browser state and caching. · `src/app/provider.tsx`
- [Client only](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/client-only.tsx): browser boundary · Wrapper for components that must render on the client. · `src/components/client-only.tsx`
- [useNotification](https://github.com/bysxx/fullstack-intern-test/blob/main/src/hooks/useNotification.ts): hook · Reusable notification behavior hook. · `src/hooks/useNotification.ts`
- [Custom hook](https://github.com/bysxx/fullstack-intern-test/blob/main/src/hooks/useCustomHook.ts): hook · Shared reusable hook placeholder. · `src/hooks/useCustomHook.ts`
- [App store](https://github.com/bysxx/fullstack-intern-test/blob/main/src/stores/useStore.ts): zustand store · Global client state container. · `src/stores/useStore.ts`

### Shared UI

Reusable presentation components and loading states.

- [Accordion](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/accordion.tsx): ui primitive · Reusable interactive disclosure component. · `src/components/ui/accordion.tsx`
- [Action button](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/action-button.tsx): ui control · Primary interactive button component. · `src/components/ui/action-button.tsx`
- [Footer](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/footer.tsx): ui layout · Shared bottom-of-page presentation component. · `src/components/ui/footer.tsx`
- [Icon](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/icon.tsx): ui primitive · Shared icon rendering component. · `src/components/ui/icon.tsx`
- [Sub header](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/sub-header.tsx): ui layout · Shared section header component. · `src/components/ui/sub-header.tsx`
- [Notif toggle](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/notification-toggle.tsx): ui control · UI control for notification state. · `src/components/ui/notification-toggle.tsx`
- [Loading state](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/loading.tsx): ui feedback · Shared loading placeholder component. · `src/components/ui/loading.tsx`
- [Spinner](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/loading-spinner.tsx): ui feedback · Reusable loading indicator. · `src/components/ui/loading-spinner.tsx`
- [Table skeleton](https://github.com/bysxx/fullstack-intern-test/blob/main/src/components/ui/table/skeleton.tsx): ui feedback · Skeleton placeholder for table-like loading states. · `src/components/ui/table/skeleton.tsx`

### Foundation

Global styles and reusable domain types/utilities.

- [Notification util](https://github.com/bysxx/fullstack-intern-test/blob/main/src/utils/notification.ts): utility · Notification-related helper functions. · `src/utils/notification.ts`
- [Auth types](https://github.com/bysxx/fullstack-intern-test/blob/main/src/types/auth.ts): domain types · Shared type definitions for future auth contracts. · `src/types/auth.ts`
- [Global CSS](https://github.com/bysxx/fullstack-intern-test/blob/main/src/styles/global.css): styles · App-wide stylesheet and base styling layer. · `src/styles/global.css`

## Connections

- Root layout → Providers: wraps · Root layout mounts app-wide client providers.
- Root layout → Route template: wraps · Root layout participates in App Router composition.
- Root layout → Main page: renders · Layout frames the main route content.
- Root layout → 404 page: frames · Layout surrounds the 404 boundary.
- Providers → App store: supplies · Providers make global client state available.
- Providers → useNotification: enables · Provider layer supports notification-related client behavior.
- Main page → Client only: uses · Page can isolate browser-only content behind a client boundary.
- Main page → Sub header: composes · Page uses shared UI building blocks.
- Main page → Footer: composes · Page uses shared UI building blocks.
- Main page → Action button: composes · Page uses shared UI building blocks.
- Main page → Notif toggle: composes · Page uses shared UI building blocks.
- Main page → Accordion: composes · Page uses shared UI building blocks.
- Main page → Loading state: shows · Page can surface loading states.
- Loading state → Spinner: uses · Loading component can include the spinner indicator.
- Loading state → Table skeleton: uses · Loading component can include table skeleton states.
- Notif toggle → useNotification: uses · UI toggle is backed by reusable hook behavior.
- useNotification → Notification util: uses · Hook delegates shared notification helpers.
- Custom hook → App store: reads · Reusable logic can connect to shared state.
- Client only → Icon: can wrap · Browser-only boundary can guard interactive primitives.
- 404 page → Loading state: shares · Fallback states share the same feedback vocabulary.
- Root layout → Global CSS: imports · Root shell loads global styling.
- Root layout → Auth types: references · App-level composition may rely on shared domain types.