# nayem567/photo-feed architecture

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

- Interactive diagram: https://gitdiagram.com/nayem567/photo-feed
- Repository: https://github.com/nayem567/photo-feed

## Overview

1. This is a Next.js App Router application organized around a photo-gallery experience. The main domain seems to be “photos,” with both a browsable list and per-photo detail views.

2. Routing is split between localized pages and API endpoints. The `app/[lang]` segment indicates language-prefixed routes, while `app/api/photos` and `app/api/photos/[id]` expose photo data through server-side route handlers.

3. Internationalization is built into the route structure. `app/[lang]/dictonaries.js` and the `app/[lang]/dictonaries/*.json` files provide per-language text resources, with at least English and Bangla supported. `middleware.js` likely handles language detection or route normalization.

4. The photo UI is composed from reusable components under `app/components`. `PhotoList`, `PhotoCard`, `PhotoDetails`, `Modal`, `Navbar`, and `Logo` separate the gallery shell, item presentation, and modal/detail behavior from page-level routing.

5. The app appears to use an overlay detail pattern in addition to a dedicated detail page. The presence of both `app/[lang]/photos/[id]/page.js` and `app/[lang]/(.)photos/[id]/page.js` suggests an intercepting route/modal implementation, where a photo can open as a modal on top of the listing or as a full page when navigated directly.

6. Server/client data flow is centered on `lib/image-data.js` and the API routes. That library likely contains the canonical photo dataset or lookup logic, and the API endpoints expose that data to the UI by list and by id.

7. Page composition follows the App Router conventions. `app/layout.js` provides the shared shell, `app/[lang]/page.js` is the localized entry page, and `app/[lang]/photos/[id]/page.js` handles direct navigations to a photo detail route.

8. Styling and presentation are handled with a typical Next.js/Tailwind stack. `tailwind.config.js`, `postcss.config.mjs`, and `app/globals.css` define the global visual system, while `app/fonts` and the mention of `next/font` indicate optimized font loading.

9. This is a mostly front-end driven app with server-backed route handlers rather than a separate backend service. The API lives inside the same Next.js deployment, so UI, localization, and data endpoints share a single runtime boundary.

10. For an architecture diagram, the key flows are: locale-aware request enters via middleware, routes resolve under `app/[lang]`, pages render shared components, photo data is fetched from the internal `/api/photos` endpoints backed by `lib/image-data.js`, and photo details can be shown either as a modal overlay or as a dedicated detail page.

Main entry points: [`app/components/PhotoDetails.jsx`](https://github.com/nayem567/photo-feed/blob/master/app/components/PhotoDetails.jsx) (Photo details), [`app/[lang]/page.js`](https://github.com/nayem567/photo-feed/blob/master/app/[lang]/page.js) (Locale home), [`app/components/PhotoList.jsx`](https://github.com/nayem567/photo-feed/blob/master/app/components/PhotoList.jsx) (Photo list), [`app/[lang]/dictonaries.js`](https://github.com/nayem567/photo-feed/blob/master/app/[lang]/dictonaries.js) (Dictionary loader)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing & pages"]
  node_lang_page["Locale home<br/>localized page<br/>[page.js]"]
  node_photo_page["Photo detail<br/>detail page<br/>[page.js]"]
  node_photo_modal_page["Photo overlay<br/>intercept route<br/>[page.js]"]
  node_photos_api["Photos API<br/>collection endpoint<br/>[route.js]"]
  node_photo_api["Photo API<br/>item endpoint<br/>[route.js]"]
end

subgraph group_ui["UI components"]
  node_navbar["Navbar<br/>navigation<br/>[Navbar.jsx]"]
  node_logo["Logo<br/>brand mark<br/>[Logo.jsx]"]
  node_photo_list["Photo list<br/>gallery list<br/>[PhotoList.jsx]"]
  node_photo_card["Photo card<br/>item card<br/>[PhotoCard.jsx]"]
  node_photo_details["Photo details<br/>detail view<br/>[PhotoDetails.jsx]"]
  node_modal["Modal<br/>overlay<br/>[Modal.jsx]"]
end

subgraph group_data["Content data"]
  node_dictonaries_js["Dictionary loader<br/>i18n loader<br/>[dictonaries.js]"]
  node_en_dict["English copy<br/>locale json<br/>[en.json]"]
  node_bn_dict["Bangla copy<br/>locale json<br/>[bn.json]"]
  node_image_data[("Image data<br/>dataset<br/>[image-data.js]")]
end

subgraph group_shell["App shell"]
  node_middleware["Middleware<br/>locale router<br/>[middleware.js]"]
  node_layout["Root layout<br/>app shell<br/>[layout.js]"]
  node_globals["Global styles<br/>stylesheet<br/>[globals.css]"]
end

node_middleware -->|"normalize locale"| node_lang_page
node_middleware -->|"normalize locale"| node_photo_page
node_layout -->|"compose shell"| node_navbar
node_layout -->|"load styles"| node_globals
node_lang_page -->|"load text"| node_dictonaries_js
node_dictonaries_js -->|"reads"| node_en_dict
node_dictonaries_js -->|"reads"| node_bn_dict
node_lang_page -->|"render gallery"| node_photo_list
node_photo_list -->|"uses"| node_photo_card
node_photo_card -->|"open detail"| node_photo_details
node_photo_details -->|"fetch item"| node_photo_api
node_photo_list -->|"fetch list"| node_photos_api
node_photos_api -->|"reads"| node_image_data
node_photo_api -->|"reads"| node_image_data
node_photo_modal_page -->|"wraps"| node_modal
node_photo_modal_page -->|"embed detail"| node_photo_details
node_photo_page -->|"render detail"| node_photo_details
node_navbar -->|"includes"| node_logo

click node_middleware "https://github.com/nayem567/photo-feed/blob/master/middleware.js"
click node_layout "https://github.com/nayem567/photo-feed/blob/master/app/layout.js"
click node_globals "https://github.com/nayem567/photo-feed/blob/master/app/globals.css"
click node_lang_page "https://github.com/nayem567/photo-feed/blob/master/app/[lang]/page.js"
click node_photo_page "https://github.com/nayem567/photo-feed/blob/master/app/[lang]/photos/[id]/page.js"
click node_photo_modal_page "https://github.com/nayem567/photo-feed/blob/master/app/[lang]/(.)photos/[id]/page.js"
click node_photos_api "https://github.com/nayem567/photo-feed/blob/master/app/api/photos/route.js"
click node_photo_api "https://github.com/nayem567/photo-feed/blob/master/app/api/photos/[id]/route.js"
click node_dictonaries_js "https://github.com/nayem567/photo-feed/blob/master/app/[lang]/dictonaries.js"
click node_en_dict "https://github.com/nayem567/photo-feed/blob/master/app/[lang]/dictonaries/en.json"
click node_bn_dict "https://github.com/nayem567/photo-feed/blob/master/app/[lang]/dictonaries/bn.json"
click node_image_data "https://github.com/nayem567/photo-feed/blob/master/lib/image-data.js"
click node_navbar "https://github.com/nayem567/photo-feed/blob/master/app/components/Navbar.jsx"
click node_logo "https://github.com/nayem567/photo-feed/blob/master/app/components/Logo.jsx"
click node_photo_list "https://github.com/nayem567/photo-feed/blob/master/app/components/PhotoList.jsx"
click node_photo_card "https://github.com/nayem567/photo-feed/blob/master/app/components/PhotoCard.jsx"
click node_photo_details "https://github.com/nayem567/photo-feed/blob/master/app/components/PhotoDetails.jsx"
click node_modal "https://github.com/nayem567/photo-feed/blob/master/app/components/Modal.jsx"

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_lang_page,node_photo_page,node_photo_modal_page,node_photos_api,node_photo_api toneBlue
class node_navbar,node_logo,node_photo_list,node_photo_card,node_photo_details,node_modal toneAmber
class node_dictonaries_js,node_en_dict,node_bn_dict,node_image_data toneMint
class node_middleware,node_layout,node_globals toneRose
```

## Components

### Routing & pages

Localized App Router pages, intercepting routes, and API handlers.

- [Locale home](https://github.com/nayem567/photo-feed/blob/master/app/[lang]/page.js): localized page · Entry page under the language-prefixed route segment. · `app/[lang]/page.js`
- [Photo detail](https://github.com/nayem567/photo-feed/blob/master/app/[lang]/photos/[id]/page.js): detail page · Direct navigable per-photo detail route. · `app/[lang]/photos/[id]/page.js`
- [Photo overlay](https://github.com/nayem567/photo-feed/blob/master/app/[lang]/(.)photos/[id]/page.js): intercept route · Intercepting route used to show photo detail as an overlay modal. · `app/[lang]/(.)photos/[id]/page.js`
- [Photos API](https://github.com/nayem567/photo-feed/blob/master/app/api/photos/route.js): collection endpoint · Server route handler exposing the photo list. · `app/api/photos/route.js`
- [Photo API](https://github.com/nayem567/photo-feed/blob/master/app/api/photos/[id]/route.js): item endpoint · Server route handler exposing a single photo by id. · `app/api/photos/[id]/route.js`

### UI components

Reusable gallery, navigation, and modal presentation pieces.

- [Navbar](https://github.com/nayem567/photo-feed/blob/master/app/components/Navbar.jsx): navigation · Top-level navigation and locale-aware chrome. · `app/components/Navbar.jsx`
- [Logo](https://github.com/nayem567/photo-feed/blob/master/app/components/Logo.jsx): brand mark · Shared brand identity used in the navigation shell. · `app/components/Logo.jsx`
- [Photo list](https://github.com/nayem567/photo-feed/blob/master/app/components/PhotoList.jsx): gallery list · Renders the browsable photo collection. · `app/components/PhotoList.jsx`
- [Photo card](https://github.com/nayem567/photo-feed/blob/master/app/components/PhotoCard.jsx): item card · Displays a single photo summary in list form. · `app/components/PhotoCard.jsx`
- [Photo details](https://github.com/nayem567/photo-feed/blob/master/app/components/PhotoDetails.jsx): detail view · Shows the expanded photo metadata and content. · `app/components/PhotoDetails.jsx`
- [Modal](https://github.com/nayem567/photo-feed/blob/master/app/components/Modal.jsx): overlay · Wraps detail content for the intercepting-route experience. · `app/components/Modal.jsx`

### Content data

Dictionary resources and photo dataset lookup logic.

- [Dictionary loader](https://github.com/nayem567/photo-feed/blob/master/app/[lang]/dictonaries.js): i18n loader · Resolves language resources for the localized routes. · `app/[lang]/dictonaries.js`
- [English copy](https://github.com/nayem567/photo-feed/blob/master/app/[lang]/dictonaries/en.json): locale json · English UI text resources. · `app/[lang]/dictonaries/en.json`
- [Bangla copy](https://github.com/nayem567/photo-feed/blob/master/app/[lang]/dictonaries/bn.json): locale json · Bangla UI text resources. · `app/[lang]/dictonaries/bn.json`
- [Image data](https://github.com/nayem567/photo-feed/blob/master/lib/image-data.js): dataset · Canonical photo records and lookup logic used by the API. · `lib/image-data.js`

### App shell

Global layout, middleware, and styling foundation.

- [Middleware](https://github.com/nayem567/photo-feed/blob/master/middleware.js): locale router · Detects or normalizes language-aware requests. · `middleware.js`
- [Root layout](https://github.com/nayem567/photo-feed/blob/master/app/layout.js): app shell · Shared application wrapper and document-level structure. · `app/layout.js`
- [Global styles](https://github.com/nayem567/photo-feed/blob/master/app/globals.css): stylesheet · Base styling and app-wide visual rules. · `app/globals.css`

## Connections

- Middleware → Locale home: normalize locale · Language-aware routing feeds the localized entry page.
- Middleware → Photo detail: normalize locale · Direct detail navigations are also locale-scoped.
- Root layout → Navbar: compose shell · The root layout assembles shared navigation chrome.
- Root layout → Global styles: load styles · Global stylesheet is applied from the application shell.
- Locale home → Dictionary loader: load text · Localized page content is driven by dictionary resolution.
- Dictionary loader → English copy: reads · English resource bundle.
- Dictionary loader → Bangla copy: reads · Bangla resource bundle.
- Locale home → Photo list: render gallery · Home page renders the browsable photo list.
- Photo list → Photo card: uses · The list is composed from repeated photo cards.
- Photo card → Photo details: open detail · Cards connect list items to expanded detail content.
- Photo details → Photo API: fetch item · Detail views can hydrate from the single-photo endpoint.
- Photo list → Photos API: fetch list · Gallery data is sourced from the collection endpoint.
- Photos API → Image data: reads · Collection responses are backed by the canonical dataset.
- Photo API → Image data: reads · Item responses look up a single record from the dataset.
- Photo overlay → Modal: wraps · Intercepted detail route renders inside a modal overlay.
- Photo overlay → Photo details: embed detail · Overlay view reuses the same photo details component.
- Photo detail → Photo details: render detail · Direct route renders the standalone detail experience.
- Navbar → Logo: includes · Navigation shell includes the shared brand mark.