How nayem567/photo-feed works
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: PhotoDetails.jsx Photo details · page.js Locale home · PhotoList.jsx Photo list · dictonaries.js Dictionary loader
Components 18
Routing & pages
Localized App Router pages, intercepting routes, and API handlers.
- Locale home · Entry page under the language-prefixed route segment.
app/[lang]/page.js - Photo detail · Direct navigable per-photo detail route.
app/[lang]/photos/[id]/page.js - Photo overlay · Intercepting route used to show photo detail as an overlay modal.
app/[lang]/(.)photos/[id]/page.js - Photos API · Server route handler exposing the photo list.
app/api/photos/route.js - Photo API · 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 · Top-level navigation and locale-aware chrome.
app/components/Navbar.jsx - Logo · Shared brand identity used in the navigation shell.
app/components/Logo.jsx - Photo list · Renders the browsable photo collection.
app/components/PhotoList.jsx - Photo card · Displays a single photo summary in list form.
app/components/PhotoCard.jsx - Photo details · Shows the expanded photo metadata and content.
app/components/PhotoDetails.jsx - Modal · Wraps detail content for the intercepting-route experience.
app/components/Modal.jsx
Content data
Dictionary resources and photo dataset lookup logic.
- Dictionary loader · Resolves language resources for the localized routes.
app/[lang]/dictonaries.js - English copy · English UI text resources.
app/[lang]/dictonaries/en.json - Bangla copy · Bangla UI text resources.
app/[lang]/dictonaries/bn.json - Image data · Canonical photo records and lookup logic used by the API.
lib/image-data.js
App shell
Global layout, middleware, and styling foundation.
- Middleware · Detects or normalizes language-aware requests.
middleware.js - Root layout · Shared application wrapper and document-level structure.
app/layout.js - Global styles · Base styling and app-wide visual rules.
app/globals.css
Connections 18
- 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.