# doodle-iot/doodle-iot-studio architecture

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

- Interactive diagram: https://gitdiagram.com/doodle-iot/doodle-iot-studio
- Repository: https://github.com/doodle-iot/doodle-iot-studio

## Overview

This is a React single-page marketing site for Doodle IoT Studio, a web, mobile, and IoT development agency. Visitors explore the studio’s services and portfolio, can calculate an indicative quote, and can carry a service selection or estimate into the project-contact form. The graph follows the app’s explicit component wiring; unsampled sections are shown as product capabilities, but their internal behavior is not inferred.

Main entry points: [`src/App.tsx`](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/App.tsx) (Page composition), [`src/components/PortfolioSection.tsx`](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/PortfolioSection.tsx) (Portfolio showcase), [`src/components/Hero.tsx`](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/Hero.tsx) (Studio introduction), [`src/components/ServicesSection.tsx`](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/ServicesSection.tsx) (Service catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Studio presentation"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["Page composition<br/>[App.tsx]"]
  node_navigation["Navigation<br/>[Navbar.tsx]"]
  node_hero["Studio introduction<br/>[Hero.tsx]"]
end

subgraph group_discovery["Services and proof"]
  node_services["Service catalog"]
  node_portfolio["Portfolio showcase"]
  node_companydata["Studio content data<br/>[companyData.ts]"]
end

subgraph group_inquiry["Project inquiry"]
  node_estimator["Quote estimator<br/>[QuoteEstimator.tsx]"]
  node_contact["Contact form<br/>[ContactSection.tsx]"]
end

subgraph group_content["Studio information"]
  node_process["Project process<br/>[ProcessSection.tsx]"]
  node_testimonials["Testimonials"]
  node_about["About studio<br/>[AboutSection.tsx]"]
  node_faq["FAQs<br/>[FAQSection.tsx]"]
  node_footer["Footer and newsletter<br/>[Footer.tsx]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_services
node_app -->|"renders"| node_portfolio
node_app -->|"renders"| node_estimator
node_app -->|"renders"| node_process
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_about
node_app -->|"renders"| node_faq
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_hero -->|"reads stats"| node_companydata
node_portfolio -->|"reads projects"| node_companydata
node_navigation -->|"requests navigation"| node_app
node_hero -->|"requests quote or contact"| node_app
node_services -->|"selects service"| node_app
node_portfolio -->|"selects project"| node_app
node_estimator -->|"passes estimate"| node_app
node_app -->|"passes inquiry details"| node_contact
node_visitor -->|"explores offerings"| node_services
node_visitor -->|"explores work"| node_portfolio
node_visitor -->|"configures estimate"| node_estimator
node_visitor -->|"submits brief"| node_contact

click node_entry "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/main.tsx"
click node_app "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/App.tsx"
click node_navigation "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/Hero.tsx"
click node_services "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/ServicesSection.tsx"
click node_portfolio "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/PortfolioSection.tsx"
click node_companydata "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/data/companyData.ts"
click node_estimator "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/QuoteEstimator.tsx"
click node_contact "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/ContactSection.tsx"
click node_process "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/ProcessSection.tsx"
click node_testimonials "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/TestimonialsSection.tsx"
click node_about "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/AboutSection.tsx"
click node_faq "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/FAQSection.tsx"
click node_footer "https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/Footer.tsx"

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_entry,node_app,node_navigation,node_hero toneBlue
class node_services,node_portfolio,node_companydata toneAmber
class node_estimator,node_contact toneMint
class node_process,node_testimonials,node_about,node_faq,node_footer toneRose
class node_visitor toneIndigo
```

## Components

### Studio presentation

- [React entry](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/main.tsx): `src/main.tsx`
- [Page composition](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Studio introduction](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`

### Services and proof

- [Service catalog](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/ServicesSection.tsx): `src/components/ServicesSection.tsx`
- [Portfolio showcase](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/PortfolioSection.tsx): `src/components/PortfolioSection.tsx`
- [Studio content data](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/data/companyData.ts): `src/data/companyData.ts`

### Project inquiry

- [Quote estimator](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/QuoteEstimator.tsx): `src/components/QuoteEstimator.tsx`
- [Contact form](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/ContactSection.tsx): `src/components/ContactSection.tsx`

### Studio information

- [Project process](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/ProcessSection.tsx): `src/components/ProcessSection.tsx`
- [Testimonials](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/TestimonialsSection.tsx): `src/components/TestimonialsSection.tsx`
- [About studio](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/AboutSection.tsx): `src/components/AboutSection.tsx`
- [FAQs](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/FAQSection.tsx): `src/components/FAQSection.tsx`
- [Footer and newsletter](https://github.com/doodle-iot/doodle-iot-studio/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Other components

- **Site visitor**

## Connections

- Site visitor → React entry: opens site
- React entry → Page composition: renders
- Page composition → Navigation: renders
- Page composition → Studio introduction: renders
- Page composition → Service catalog: renders
- Page composition → Portfolio showcase: renders
- Page composition → Quote estimator: renders
- Page composition → Project process: renders
- Page composition → Testimonials: renders
- Page composition → About studio: renders
- Page composition → FAQs: renders
- Page composition → Contact form: renders
- Page composition → Footer and newsletter: renders
- Studio introduction → Studio content data: reads stats
- Portfolio showcase → Studio content data: reads projects
- Navigation → Page composition: requests navigation
- Studio introduction → Page composition: requests quote or contact
- Service catalog → Page composition: selects service
- Portfolio showcase → Page composition: selects project
- Quote estimator → Page composition: passes estimate
- Page composition → Contact form: passes inquiry details
- Site visitor → Service catalog: explores offerings
- Site visitor → Portfolio showcase: explores work
- Site visitor → Quote estimator: configures estimate
- Site visitor → Contact form: submits brief