# priyanshugupta28/picfiesta architecture

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

- Interactive diagram: https://gitdiagram.com/priyanshugupta28/picfiesta
- Repository: https://github.com/priyanshugupta28/picfiesta

## Overview

Picfiesta is a React image-browsing site: visitors navigate image collections, search or filter Pixabay results, open an image, and download it. The route table exposes collection, search, theme, editor-pick, trending, detail, informational, and account pages. Sampled code confirms direct Pixabay search and image downloads; the source index shows additional collection pages and shared gallery components. Several page implementations were not sampled, so their internal behavior and connections beyond the documented routes are not asserted.

Main entry points: [`src/Components/AllRoutes/AllRoutes.js`](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/AllRoutes/AllRoutes.js) (Route dispatcher), [`src/Components/SingleImage/SingleImage.js`](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/SingleImage/SingleImage.js) (Image preview), [`src/Components/ReactMasonry/ReactMasonry.js`](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/ReactMasonry/ReactMasonry.js) (Masonry gallery), [`src/App.js`](https://github.com/priyanshugupta28/picfiesta/blob/main/src/App.js) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_app["App shell<br/>[App.js]"]
  node_routes["Route dispatcher<br/>[AllRoutes.js]"]
  node_navbar["Navigation bar<br/>[Navbar.js]"]
  node_navlinks["Collection links<br/>[NavLinks.js]"]
  node_footer["Footer<br/>[Footer.js]"]
end

subgraph group_discovery["Image discovery"]
  node_home["Home collection<br/>[Home.js]"]
  node_photos["Photo collection<br/>[Photos.js]"]
  node_illustrations["Illustration collection<br/>[Illustrations.js]"]
  node_vectors["Vector collection<br/>[Vectors.js]"]
  node_search["Image search<br/>[SearchPage.js]"]
  node_themes["Theme exploration<br/>[ExploreByTheme.js]"]
  node_editors["Editor picks<br/>[EditorPics.js]"]
  node_trending["Weekly trending"]
end

subgraph group_presentation["Image presentation"]
  node_masonry["Masonry gallery<br/>[ReactMasonry.js]"]
  node_image["Image preview<br/>[SingleImage.js]"]
  node_detail["Image detail<br/>[SinglePage.js]"]
end

subgraph group_content["Site content"]
  node_about["About page<br/>[AboutUs.js]"]
  node_contact["Contact page<br/>[Contactus.js]"]
  node_accounts["Login and signup<br/>[Login.js]"]
  node_notfound["Not found<br/>[PageNotFound.js]"]
end

subgraph group_state["Shared state"]
  node_axioshook["Axios data hook<br/>[useAxios.js]"]
  node_utils["API key utility<br/>[utilsFunctions.js]"]
  node_redux["Redux reducers<br/>[reducer.js]"]
end

node_visitor(("Visitor"))
node_pixabay{{"Pixabay API"}}

node_visitor -->|"uses"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_routes
node_app -->|"renders"| node_footer
node_routes -->|"routes to"| node_home
node_routes -->|"routes to"| node_photos
node_routes -->|"routes to"| node_illustrations
node_routes -->|"routes to"| node_vectors
node_routes -->|"routes to"| node_search
node_routes -->|"routes to"| node_themes
node_routes -->|"routes to"| node_editors
node_routes -->|"routes to"| node_trending
node_routes -->|"routes to"| node_detail
node_routes -->|"routes to"| node_about
node_routes -->|"routes to"| node_contact
node_routes -->|"routes to"| node_accounts
node_routes -->|"routes to"| node_notfound
node_home -->|"renders"| node_masonry
node_photos -->|"renders"| node_masonry
node_illustrations -->|"renders"| node_masonry
node_vectors -->|"renders"| node_masonry
node_masonry -->|"renders"| node_image
node_search -->|"requests results"| node_pixabay
node_themes -->|"requests results"| node_pixabay
node_search -->|"reads API key"| node_utils
node_themes -->|"reads API key"| node_utils
node_search -->|"renders results"| node_image
node_themes -->|"renders results"| node_image
node_image -->|"navigates to"| node_detail
node_image -->|"downloads image"| node_pixabay
node_home -->|"fetches data"| node_axioshook
node_illustrations -->|"fetches data"| node_axioshook
node_photos -->|"fetches data"| node_axioshook
node_vectors -->|"fetches data"| node_axioshook
node_navbar -->|"uses"| node_navlinks

click node_app "https://github.com/priyanshugupta28/picfiesta/blob/main/src/App.js"
click node_routes "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/AllRoutes/AllRoutes.js"
click node_navbar "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/Navbar/Navbar.js"
click node_navlinks "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/NavLinks/NavLinks.js"
click node_footer "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/Footer/Footer.js"
click node_home "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Home/Home.js"
click node_photos "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Photos/Photos.js"
click node_illustrations "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Illustrations/Illustrations.js"
click node_vectors "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Vectors/Vectors.js"
click node_search "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/SearchPage/SearchPage.js"
click node_themes "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/ExploreByTheme/ExploreByTheme.js"
click node_editors "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/EditorPics/EditorPics.js"
click node_trending "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/TrendingThisWeek/TrendingThisWeek.js"
click node_masonry "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/ReactMasonry/ReactMasonry.js"
click node_image "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/SingleImage/SingleImage.js"
click node_detail "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/SinglePage/SinglePage.js"
click node_about "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/AboutUs/AboutUs.js"
click node_contact "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Contactus/Contactus.js"
click node_accounts "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Login/Login.js"
click node_notfound "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/PageNotFound/PageNotFound.js"
click node_axioshook "https://github.com/priyanshugupta28/picfiesta/blob/main/src/CustomHooks/useAxios.js"
click node_utils "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Utility/Utils/utilsFunctions.js"
click node_redux "https://github.com/priyanshugupta28/picfiesta/blob/main/src/Redux/reducer.js"

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,node_routes,node_navbar,node_navlinks,node_footer toneBlue
class node_home,node_photos,node_illustrations,node_vectors,node_search,node_themes,node_editors,node_trending toneAmber
class node_masonry,node_image,node_detail,node_pixabay toneMint
class node_about,node_contact,node_accounts,node_notfound toneRose
class node_axioshook,node_utils,node_redux,node_visitor toneIndigo
```

## Components

### Application shell

- [App shell](https://github.com/priyanshugupta28/picfiesta/blob/main/src/App.js): `src/App.js`
- [Route dispatcher](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/AllRoutes/AllRoutes.js): `src/Components/AllRoutes/AllRoutes.js`
- [Navigation bar](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/Navbar/Navbar.js): `src/Components/Navbar/Navbar.js`
- [Collection links](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/NavLinks/NavLinks.js): `src/Components/NavLinks/NavLinks.js`
- [Footer](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/Footer/Footer.js): `src/Components/Footer/Footer.js`

### Image discovery

- [Home collection](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Home/Home.js): `src/Pages/Home/Home.js`
- [Photo collection](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Photos/Photos.js): `src/Pages/Photos/Photos.js`
- [Illustration collection](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Illustrations/Illustrations.js): `src/Pages/Illustrations/Illustrations.js`
- [Vector collection](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Vectors/Vectors.js): `src/Pages/Vectors/Vectors.js`
- [Image search](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/SearchPage/SearchPage.js): `src/Pages/SearchPage/SearchPage.js`
- [Theme exploration](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/ExploreByTheme/ExploreByTheme.js): `src/Pages/ExploreByTheme/ExploreByTheme.js`
- [Editor picks](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/EditorPics/EditorPics.js): `src/Pages/EditorPics/EditorPics.js`
- [Weekly trending](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/TrendingThisWeek/TrendingThisWeek.js): `src/Pages/TrendingThisWeek/TrendingThisWeek.js`

### Image presentation

- [Masonry gallery](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/ReactMasonry/ReactMasonry.js): `src/Components/ReactMasonry/ReactMasonry.js`
- [Image preview](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Components/SingleImage/SingleImage.js): `src/Components/SingleImage/SingleImage.js`
- [Image detail](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/SinglePage/SinglePage.js): `src/Pages/SinglePage/SinglePage.js`

### Site content

- [About page](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/AboutUs/AboutUs.js): `src/Pages/AboutUs/AboutUs.js`
- [Contact page](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Contactus/Contactus.js): `src/Pages/Contactus/Contactus.js`
- [Login and signup](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/Login/Login.js): `src/Pages/Login/Login.js`
- [Not found](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Pages/PageNotFound/PageNotFound.js): `src/Pages/PageNotFound/PageNotFound.js`

### Shared state

- [Axios data hook](https://github.com/priyanshugupta28/picfiesta/blob/main/src/CustomHooks/useAxios.js): `src/CustomHooks/useAxios.js`
- [API key utility](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Utility/Utils/utilsFunctions.js): `src/Utility/Utils/utilsFunctions.js`
- [Redux reducers](https://github.com/priyanshugupta28/picfiesta/blob/main/src/Redux/reducer.js): `src/Redux/reducer.js`

### Other components

- **Visitor**
- **Pixabay API**

## Connections

- Visitor → App shell: uses (evidence: `src/App.js`)
- App shell → Navigation bar: renders (evidence: `src/App.js`)
- App shell → Route dispatcher: renders (evidence: `src/App.js`)
- App shell → Footer: renders (evidence: `src/App.js`)
- Route dispatcher → Home collection: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Photo collection: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Illustration collection: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Vector collection: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Image search: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Theme exploration: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Editor picks: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Weekly trending: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Image detail: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → About page: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Contact page: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Login and signup: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Route dispatcher → Not found: routes to (evidence: `src/Components/AllRoutes/AllRoutes.js`)
- Home collection → Masonry gallery: renders (evidence: `src/Pages/Home/Home.js`)
- Photo collection → Masonry gallery: renders (evidence: `src/Pages/Photos/Photos.js`)
- Illustration collection → Masonry gallery: renders (evidence: `src/Pages/Illustrations/Illustrations.js`)
- Vector collection → Masonry gallery: renders (evidence: `src/Pages/Vectors/Vectors.js`)
- Masonry gallery → Image preview: renders (evidence: `src/Components/ReactMasonry/ReactMasonry.js`)
- Image search → Pixabay API: requests results (evidence: `src/Pages/SearchPage/SearchPage.js`)
- Theme exploration → Pixabay API: requests results (evidence: `src/Pages/ExploreByTheme/ExploreByTheme.js`)
- Image search → API key utility: reads API key (evidence: `src/Pages/SearchPage/SearchPage.js`)
- Theme exploration → API key utility: reads API key (evidence: `src/Pages/ExploreByTheme/ExploreByTheme.js`)
- Image search → Image preview: renders results (evidence: `src/Pages/SearchPage/SearchPage.js`)
- Theme exploration → Image preview: renders results (evidence: `src/Pages/ExploreByTheme/ExploreByTheme.js`)
- Image preview → Image detail: navigates to (evidence: `src/Components/SingleImage/SingleImage.js`)
- Image preview → Pixabay API: downloads image (evidence: `src/Components/SingleImage/SingleImage.js`)
- Home collection → Axios data hook: fetches data (evidence: `src/Pages/Home/Home.js`)
- Illustration collection → Axios data hook: fetches data (evidence: `src/Pages/Illustrations/Illustrations.js`)
- Photo collection → Axios data hook: fetches data (evidence: `src/Pages/Photos/Photos.js`)
- Vector collection → Axios data hook: fetches data (evidence: `src/Pages/Vectors/Vectors.js`)
- Navigation bar → Collection links: uses (evidence: `src/Components/Navbar/Navbar.js`)