# sivabhargav123/wylo-assigns architecture

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

- Interactive diagram: https://gitdiagram.com/sivabhargav123/wylo-assigns
- Repository: https://github.com/sivabhargav123/wylo-assigns

## Overview

Wylo is a React post-management app. Users enter a landing page, create posts or browse all posts, then edit or delete them; Redux holds post state and redux-persist saves it through browser storage. The README also advertises responsive carousel presentation and navigation, represented in the display and navigation components. The graph follows the sampled routes and dispatches; unsampled internals are not inferred beyond documented capabilities.

Main entry points: [`src/App.js`](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/App.js) (App Routes), [`src/pages/CreatePost.jsx`](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/pages/CreatePost.jsx) (Create/Edit Page), [`src/components/AllPosts.jsx`](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/components/AllPosts.jsx) (Post Listing), [`src/pages/NavBar.jsx`](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/pages/NavBar.jsx) (Navigation Bar)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["App Routes<br/>[App.js]"]
end

subgraph group_presentation["Post Experience"]
  node_display["Landing Carousel<br/>[PostsDisplay.jsx]"]
  node_navbar["Navigation Bar<br/>[NavBar.jsx]"]
  node_create["Create/Edit Page<br/>[CreatePost.jsx]"]
  node_form["Post Form<br/>[PostForm.jsx]"]
  node_allposts["Post Listing<br/>[AllPosts.jsx]"]
  node_item["Post Controls<br/>[PostItem.jsx]"]
end

subgraph group_state["Post State"]
  node_store["Redux Store<br/>[store.jsx]"]
  node_slice["Post Reducers<br/>[postsSlice.jsx]"]
end

node_user(("Visitor"))
node_storage[("Browser Storage")]

node_user -.->|"uses"| node_app
node_app -->|"provides state"| node_store
node_app -->|"routes to"| node_display
node_app -->|"routes to"| node_create
node_app -->|"routes to"| node_allposts
node_display -->|"navigates to"| node_create
node_display -->|"renders"| node_navbar
node_navbar -->|"navigates to"| node_allposts
node_create -->|"renders"| node_navbar
node_create -->|"renders"| node_form
node_allposts -->|"renders"| node_navbar
node_allposts -->|"renders"| node_item
node_form -->|"dispatches changes"| node_slice
node_item -->|"dispatches delete"| node_slice
node_store -->|"configures reducer"| node_slice
node_store -->|"persists state"| node_storage

click node_app "https://github.com/sivabhargav123/wylo-assigns/blob/main/src/App.js"
click node_display "https://github.com/sivabhargav123/wylo-assigns/blob/main/src/components/PostsDisplay.jsx"
click node_navbar "https://github.com/sivabhargav123/wylo-assigns/blob/main/src/pages/NavBar.jsx"
click node_create "https://github.com/sivabhargav123/wylo-assigns/blob/main/src/pages/CreatePost.jsx"
click node_form "https://github.com/sivabhargav123/wylo-assigns/blob/main/src/components/PostForm.jsx"
click node_allposts "https://github.com/sivabhargav123/wylo-assigns/blob/main/src/components/AllPosts.jsx"
click node_item "https://github.com/sivabhargav123/wylo-assigns/blob/main/src/components/PostItem.jsx"
click node_store "https://github.com/sivabhargav123/wylo-assigns/blob/main/src/redux/store.jsx"
click node_slice "https://github.com/sivabhargav123/wylo-assigns/blob/main/src/redux/postsSlice.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_app toneBlue
class node_display,node_navbar,node_create,node_form,node_allposts,node_item,node_storage toneAmber
class node_store,node_slice toneMint
class node_user toneIndigo
```

## Components

### Application

- [App Routes](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/App.js): `src/App.js`

### Post Experience

- [Landing Carousel](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/components/PostsDisplay.jsx): `src/components/PostsDisplay.jsx`
- [Navigation Bar](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/pages/NavBar.jsx): `src/pages/NavBar.jsx`
- [Create/Edit Page](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/pages/CreatePost.jsx): `src/pages/CreatePost.jsx`
- [Post Form](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/components/PostForm.jsx): `src/components/PostForm.jsx`
- [Post Listing](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/components/AllPosts.jsx): `src/components/AllPosts.jsx`
- [Post Controls](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/components/PostItem.jsx): `src/components/PostItem.jsx`

### Post State

- [Redux Store](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/redux/store.jsx): `src/redux/store.jsx`
- [Post Reducers](https://github.com/sivabhargav123/wylo-assigns/blob/main/src/redux/postsSlice.jsx): `src/redux/postsSlice.jsx`

### Other components

- **Visitor**
- **Browser Storage**

## Connections

- Visitor → App Routes: uses
- App Routes → Redux Store: provides state (evidence: `src/App.js`)
- App Routes → Landing Carousel: routes to (evidence: `src/App.js`)
- App Routes → Create/Edit Page: routes to (evidence: `src/App.js`)
- App Routes → Post Listing: routes to (evidence: `src/App.js`)
- Landing Carousel → Create/Edit Page: navigates to (evidence: `src/components/PostsDisplay.jsx`)
- Landing Carousel → Navigation Bar: renders (evidence: `src/components/PostsDisplay.jsx`)
- Navigation Bar → Post Listing: navigates to (evidence: `src/pages/NavBar.jsx`)
- Create/Edit Page → Navigation Bar: renders (evidence: `src/pages/CreatePost.jsx`)
- Create/Edit Page → Post Form: renders (evidence: `src/pages/CreatePost.jsx`)
- Post Listing → Navigation Bar: renders (evidence: `src/components/AllPosts.jsx`)
- Post Listing → Post Controls: renders (evidence: `src/components/AllPosts.jsx`)
- Post Form → Post Reducers: dispatches changes (evidence: `src/components/PostForm.jsx`)
- Post Controls → Post Reducers: dispatches delete (evidence: `src/components/PostItem.jsx`)
- Redux Store → Post Reducers: configures reducer (evidence: `src/redux/store.jsx`)
- Redux Store → Browser Storage: persists state (evidence: `src/redux/store.jsx`)