# pavankumarkr2000/instagram-stories architecture > Architecture diagram of the GitHub repository pavankumarkr2000/instagram-stories, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-24). It is an AI-made overview: check details against the source. - Interactive diagram: https://gitdiagram.com/pavankumarkr2000/instagram-stories - Repository: https://github.com/pavankumarkr2000/instagram-stories ## Overview 1. **Repository shape** This is a small **Next.js + TypeScript** frontend focused on an **Instagram Stories-style viewer**. The app is split into a page shell under `app/`, reusable UI pieces in `components/`, and static story content in `data/`. 2. **App Router shell** The `app/` directory defines the Next.js App Router entry points: - `app/layout.tsx` provides the global HTML/app shell. - `app/page.tsx` is the main screen that assembles the stories experience. - `app/globals.css` and Tailwind-based styling establish the visual system. 3. **Static content source** Story content appears to be **local and compile-time defined** in `data/stories.ts`. This means the app is not architected around a backend API or CMS; the main data flow is: **static story dataset → list UI → modal viewer**. 4. **Main UI composition** The UI is decomposed into three core components: - `components/StoriesList.tsx` for browsing available stories - `components/StoriesModal.tsx` for the full-screen story viewer - `components/Progressbar.tsx` for per-story progress feedback 5. **List-to-modal interaction** `StoriesList` is the entry point for user selection. The likely interaction boundary is: - user selects a story from the list - selected story state is lifted to the page or modal controller - `StoriesModal` opens with the chosen story and handles navigation within the sequence 6. **Story playback model** The README describes the viewer behavior clearly: stories **auto-advance every 5 seconds**, while also supporting **manual previous/next navigation** and **close/dismiss**. That implies the modal owns a timed playback state plus index-based navigation over the story array. 7. **Progress indication subsystem** `Progressbar.tsx` is a dedicated presentation component for the story timer/progress UI. It likely reflects: - current story index - elapsed time within the active story - completion state across the sequence This is a separate visual concern from navigation, which helps keep the modal logic and rendering distinct. 8. **Modal and animation boundary** `react-modal` is used for the overlay/dialog layer, making the story viewer a distinct interaction boundary from the rest of the page. GSAP is used for animation, likely to animate transitions between stories and/or modal entrance/exit, rather than relying only on CSS transitions. 9. **Styling stack** Tailwind CSS is the primary styling approach, with `app/globals.css` providing shared global rules. This suggests the UI is mostly utility-driven and component-scoped, with minimal custom styling infrastructure beyond the global stylesheet. 10. **Runtime and build tooling** The stack is standard modern frontend tooling: - **Next.js** for routing, rendering, and app structure - **TypeScript** for typed component/data contracts - **Bun** lockfile (`bun.lock`) indicating Bun is used as the package manager/runtime in the development workflow - `package.json`, `next.config.ts`, and `postcss.config.mjs` support the app build pipeline 11. **Data/control boundaries** The key architectural boundary is between: - **data**: story metadata/content from `data/stories.ts` - **presentation**: list/progress/modal components - **interaction/state**: selected story, current index, timer, open/close state There is no visible persistence layer, server API, or external data dependency. 12. **What to draw in an architecture diagram** A good diagram would show: - the **Next.js page shell** as the top-level container - `stories.ts` as the static source feeding the page - `StoriesList` as the selection entry point - `StoriesModal` as the central interaction hub - `Progressbar` as a child of the modal viewer - `react-modal` and GSAP as supporting libraries around the modal layer - Tailwind/global CSS as the styling layer underneath the UI components Main entry points: [`app/page.tsx`](https://github.com/pavankumarkr2000/instagram-stories/blob/main/app/page.tsx) (Home page), [`components/StoriesModal.tsx`](https://github.com/pavankumarkr2000/instagram-stories/blob/main/components/StoriesModal.tsx) (Stories modal), [`components/StoriesList.tsx`](https://github.com/pavankumarkr2000/instagram-stories/blob/main/components/StoriesList.tsx) (Stories list), [`data/stories.ts`](https://github.com/pavankumarkr2000/instagram-stories/blob/main/data/stories.ts) (Stories data) ## Diagram (Mermaid) ```mermaid flowchart TD subgraph group_group_app["App Shell"] node_node_layout["Layout
next app shell
[layout.tsx]"] node_node_page["Home page
page composition
[page.tsx]"] node_node_constants["Constants
app config
[constants.ts]"] end subgraph group_group_ui["Story UI"] node_node_stories_list["Stories list
selector UI
[StoriesList.tsx]"] node_node_stories_modal["Stories modal
viewer UI
[StoriesModal.tsx]"] node_node_progressbar["Progress bar
viewer indicator
[Progressbar.tsx]"] end subgraph group_group_data["Content"] node_node_stories_data["Stories data
static dataset
[stories.ts]"] end subgraph group_group_style["Styling"] node_node_globals_css["Global CSS
shared stylesheet
[globals.css]"] node_node_tailwind{{"Tailwind
utility styling
[postcss.config.mjs]"}} end subgraph group_group_tooling["Tooling"] node_node_modal_lib{{"react-modal
overlay library"}} node_node_gsap{{"GSAP
animation library"}} node_node_next_config["Next config
framework config
[next.config.ts]"] node_node_package["Package json
deps config
[package.json]"] node_node_bun_lock["Bun lock
lockfile
[bun.lock]"] end node_node_stories_data -->|"feeds"| node_node_page node_node_page -->|"renders"| node_node_stories_list node_node_page -->|"controls"| node_node_stories_modal node_node_stories_list -->|"selects"| node_node_page node_node_stories_modal -->|"contains"| node_node_progressbar node_node_stories_modal -->|"uses"| node_node_modal_lib node_node_stories_modal -->|"animates"| node_node_gsap node_node_page -->|"wrapped by"| node_node_layout node_node_layout -->|"loads"| node_node_globals_css node_node_page -->|"styled by"| node_node_tailwind node_node_stories_list -->|"reads"| node_node_stories_data node_node_stories_modal -->|"plays"| node_node_stories_data node_node_constants -.->|"shared by"| node_node_page node_node_package -.->|"drives"| node_node_next_config node_node_package -.->|"pins"| node_node_bun_lock click node_node_layout "https://github.com/pavankumarkr2000/instagram-stories/blob/main/app/layout.tsx" click node_node_page "https://github.com/pavankumarkr2000/instagram-stories/blob/main/app/page.tsx" click node_node_constants "https://github.com/pavankumarkr2000/instagram-stories/blob/main/app/constants.ts" click node_node_stories_data "https://github.com/pavankumarkr2000/instagram-stories/blob/main/data/stories.ts" click node_node_stories_list "https://github.com/pavankumarkr2000/instagram-stories/blob/main/components/StoriesList.tsx" click node_node_stories_modal "https://github.com/pavankumarkr2000/instagram-stories/blob/main/components/StoriesModal.tsx" click node_node_progressbar "https://github.com/pavankumarkr2000/instagram-stories/blob/main/components/Progressbar.tsx" click node_node_globals_css "https://github.com/pavankumarkr2000/instagram-stories/blob/main/app/globals.css" click node_node_tailwind "https://github.com/pavankumarkr2000/instagram-stories/blob/main/postcss.config.mjs" click node_node_next_config "https://github.com/pavankumarkr2000/instagram-stories/blob/main/next.config.ts" click node_node_package "https://github.com/pavankumarkr2000/instagram-stories/blob/main/package.json" click node_node_bun_lock "https://github.com/pavankumarkr2000/instagram-stories/blob/main/bun.lock" 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_node_layout,node_node_page,node_node_constants toneBlue class node_node_stories_list,node_node_stories_modal,node_node_progressbar toneAmber class node_node_stories_data toneMint class node_node_globals_css,node_node_tailwind toneRose class node_node_modal_lib,node_node_gsap,node_node_next_config,node_node_package,node_node_bun_lock toneIndigo ``` ## Components ### App Shell Next.js App Router entry points and page composition. - [Layout](https://github.com/pavankumarkr2000/instagram-stories/blob/main/app/layout.tsx): next app shell · Global HTML and app wrapper. · `app/layout.tsx` - [Home page](https://github.com/pavankumarkr2000/instagram-stories/blob/main/app/page.tsx): page composition · Main screen that assembles the stories experience. · `app/page.tsx` - [Constants](https://github.com/pavankumarkr2000/instagram-stories/blob/main/app/constants.ts): app config · Shared app-level constants. · `app/constants.ts` ### Story UI Interactive list, modal viewer, and progress display. - [Stories list](https://github.com/pavankumarkr2000/instagram-stories/blob/main/components/StoriesList.tsx): selector UI · Browse and select a story. · `components/StoriesList.tsx` - [Stories modal](https://github.com/pavankumarkr2000/instagram-stories/blob/main/components/StoriesModal.tsx): viewer UI · Full-screen story playback and navigation. · `components/StoriesModal.tsx` - [Progress bar](https://github.com/pavankumarkr2000/instagram-stories/blob/main/components/Progressbar.tsx): viewer indicator · Shows per-story playback progress. · `components/Progressbar.tsx` ### Content Static story dataset used at compile time. - [Stories data](https://github.com/pavankumarkr2000/instagram-stories/blob/main/data/stories.ts): static dataset · Compile-time story content source. · `data/stories.ts` ### Styling Global styles and component styling system. - [Global CSS](https://github.com/pavankumarkr2000/instagram-stories/blob/main/app/globals.css): shared stylesheet · Base styles and app-wide rules. · `app/globals.css` - [Tailwind](https://github.com/pavankumarkr2000/instagram-stories/blob/main/postcss.config.mjs): utility styling · Primary component styling system. · `postcss.config.mjs` ### Tooling Build and runtime configuration. - **react-modal**: overlay library · Accessible modal overlay boundary for the viewer. - **GSAP**: animation library · Animation layer for story and modal transitions. - [Next config](https://github.com/pavankumarkr2000/instagram-stories/blob/main/next.config.ts): framework config · Next.js build/runtime configuration. · `next.config.ts` - [Package json](https://github.com/pavankumarkr2000/instagram-stories/blob/main/package.json): deps config · Dependencies, scripts, and project metadata. · `package.json` - [Bun lock](https://github.com/pavankumarkr2000/instagram-stories/blob/main/bun.lock): lockfile · Pinned dependency resolution for Bun. · `bun.lock` ## Connections - Stories data → Home page: feeds · Static story content is consumed by the page. - Home page → Stories list: renders · The page mounts the story browser. - Home page → Stories modal: controls · Selected story state opens the viewer. - Stories list → Home page: selects · User selection lifts the active story to the page. - Stories modal → Progress bar: contains · Viewer includes playback progress UI. - Stories modal → react-modal: uses · Modal overlay is implemented with react-modal. - Stories modal → GSAP: animates · Story and modal transitions use GSAP. - Home page → Layout: wrapped by · The page sits inside the global app shell. - Layout → Global CSS: loads · Global stylesheet is applied from the layout. - Home page → Tailwind: styled by · UI components rely on Tailwind utilities. - Stories list → Stories data: reads · The list renders available story items. - Stories modal → Stories data: plays · The modal advances through the story sequence. - Constants → Home page: shared by · App-level constants support page composition. - Package json → Next config: drives · Project scripts and dependencies support Next.js build flow. - Package json → Bun lock: pins · Dependency resolution is locked for Bun.