UI Design and Frontend Development @ open-telemetry/opentelemetry-demo

Directory Structure
Entrypoints
API
CLI
UI
Schemas
Build
Test
Security
Bookmarks

.github
- ISSUE_TEMPLATE
- workflows
- .mlc_config.json
- CODEOWNERS
- PULL_REQUEST_TEMPLATE.md
- component_owners.yml
- dependabot.yml
internal
- tools
  - go.mod
  - go.sum
  - sanitycheck.py
  - tools.go
kubernetes
- opentelemetry-demo.yaml
pb
- demo.proto
src
- accountingservice
  - kafka
    - consumer.go
    - trace_interceptor.go
  - Dockerfile
  - README.md
  - go.mod
  - go.sum
  - main.go
  - tools.go
- adservice
  - gradle
    - wrapper
      - gradle-wrapper.jar
      - gradle-wrapper.properties
  - src
    - main
      - java
        
        oteldemo
        
        problempattern
        
        CPULoad.java
        
        GarbageCollectionTrigger.java
        
        MemoryUtils.java
        
        AdService.java
      - resources
        
        log4j2.xml
  - .java-version
  - Dockerfile
  - README.md
  - build.gradle
  - gradlew
  - gradlew.bat
  - settings.gradle
- cartservice
  - src
  - tests
    - CartServiceTests.cs
    - cartservice.tests.csproj
  - NuGet.config
  - README.md
  - cartservice.sln
- checkoutservice
  - kafka
    - producer.go
  - money
    - money.go
    - money_test.go
  - Dockerfile
  - README.md
  - go.mod
  - go.sum
  - main.go
  - tools.go
- currencyservice
  - data
    - currency_conversion.json
  - proto
    - grpc
      - health
        
        v1
        
        health.proto
  - src
  - .dockerignore
  - CMakeLists.txt
  - Dockerfile
  - README.md
- emailservice
  - views
    - confirmation.erb
  - .dockerignore
  - .ruby-version
  - Dockerfile
  - Gemfile
  - Gemfile.lock
  - README.md
  - email_server.rb
- flagd
  - demo.flagd.json
- frauddetectionservice
  - gradle
    - wrapper
      - gradle-wrapper.jar
      - gradle-wrapper.properties
  - src
    - main
      - kotlin
        
        frauddetectionservice
        
        main.kt
      - resources
        
        log4j2.xml
  - .dockerignore
  - Dockerfile
  - README.md
  - build.gradle.kts
  - gradle.properties
  - gradlew
  - gradlew.bat
  - settings.gradle.kts
- frontend
  - components
    - Ad
      - Ad.styled.ts
      - Ad.tsx
      - index.ts
    - Banner
      - Banner.styled.ts
      - Banner.tsx
      - index.ts
    - Button
      - Button.tsx
      - index.ts
    - Cart
      - CartDetail.tsx
      - EmptyCart.tsx
    - CartDropdown
      - CartDropdown.styled.ts
      - CartDropdown.tsx
      - index.ts
    - CartIcon
      - CartIcon.styled.ts
      - CartIcon.tsx
      - index.ts
    - CartItems
      - CartItem.tsx
      - CartItems.styled.ts
      - CartItems.tsx
      - index.ts
    - CheckoutForm
      - CheckoutForm.styled.ts
      - CheckoutForm.tsx
      - index.ts
    - CheckoutItem
      - CheckoutItem.styled.ts
      - CheckoutItem.tsx
      - index.ts
    - CurrencySwitcher
      - CurrencySwitcher.styled.ts
      - CurrencySwitcher.tsx
      - index.ts
    - Footer
      - Footer.styled.ts
      - Footer.tsx
      - index.ts
    - Header
      - Header.styled.ts
      - Header.tsx
      - index.ts
    - Input
      - Input.styled.ts
      - Input.tsx
      - index.ts
    - Layout
      - Layout.tsx
      - index.ts
    - PlatformFlag
      - PlatformFlag.styled.ts
      - PlatformFlag.tsx
      - index.ts
    - ProductCard
      - ProductCard.styled.ts
      - ProductCard.tsx
      - index.ts
    - ProductList
      - ProductList.styled.ts
      - ProductList.tsx
      - index.ts
    - ProductPrice
      - ProductPrice.tsx
      - index.ts
    - Recommendations
      - Recommendations.styled.ts
      - Recommendations.tsx
      - index.ts
    - Select
      - Select.styled.ts
      - Select.tsx
      - index.ts
  - cypress
    - e2e
  - gateways
    - rpc
    - Api.gateway.ts
    - Session.gateway.ts
  - pages
    - api
      - products
        
        [productId]
        
        index.ts
        
        index.ts
      - cart.ts
      - checkout.ts
      - currency.ts
      - data.ts
      - recommendations.ts
      - shipping.ts
    - cart
      - checkout
        
        [orderId]
        
        index.tsx
      - index.tsx
    - product
      - [productId]
        
        index.tsx
    - _app.tsx
    - _document.tsx
    - index.tsx
  - providers
    - Ad.provider.tsx
    - Cart.provider.tsx
    - Currency.provider.tsx
  - public
    - icons
    - favicon.ico
  - services
    - ProductCatalog.service.ts
  - styles
    - Cart.styled.ts
    - Checkout.styled.ts
    - Home.styled.ts
    - ProductDetail.styled.ts
    - Theme.ts
    - globals.css
    - style.d.ts
  - types
    - Cart.ts
  - utils
    - enums
      - AttributeNames.ts
    - telemetry
    - Cypress.ts
    - Request.ts
  - .dockerignore
  - .eslintrc
  - .prettierignore
  - .prettierrc
  - Dockerfile
  - Dockerfile.cypress
  - README.md
  - cypress.config.ts
  - next.config.js
  - package-lock.json
  - package.json
  - tsconfig.json
- frontendproxy
  - Dockerfile
  - README.md
  - envoy.tmpl.yaml
- grafana
  - provisioning
    - dashboards
      - demo
        
        demo-dashboard.json
        
        opentelemetry-collector-data-flow.json
        
        opentelemetry-collector.json
        
        spanmetrics-dashboard.json
      - demo.yaml
    - datasources
  - grafana.ini
- imageprovider
  - static
  - Dockerfile
  - nginx.conf.template
- kafka
  - Dockerfile
  - README.md
- loadgenerator
  - Dockerfile
  - README.md
  - locustfile.py
  - people.json
  - requirements.txt
- otelcollector
  - otelcol-config-extras.yml
  - otelcol-config.yml
- paymentservice
  - .dockerignore
  - Dockerfile
  - README.md
  - charge.js
  - index.js
  - logger.js
  - opentelemetry.js
  - package-lock.json
  - package.json
- productcatalogservice
  - products
    - products.json
  - Dockerfile
  - README.md
  - go.mod
  - go.sum
  - main.go
  - tools.go
- prometheus
  - prometheus-config.yaml
- quoteservice
  - app
  - public
    - index.php
  - src
    - Application
      - Settings
        
        Settings.php
        
        SettingsInterface.php
  - .dockerignore
  - .gitignore
  - Dockerfile
  - README.md
  - composer.json
- recommendationservice
  - Dockerfile
  - README.md
  - logger.py
  - metrics.py
  - recommendation_server.py
  - requirements.txt
- shippingservice
  - src
  - .dockerignore
  - Cargo.lock
  - Cargo.toml
  - Dockerfile
  - README.md
  - build.rs
test
- tracetesting
- README.md
.dockerignore
.env
.gitattributes
.gitignore
.licenserc.json
.markdownlint.yaml
.yamlignore
.yamllint
CHANGELOG.md
CONTRIBUTING.md
LICENSE
Makefile
README.md
docker-compose.minimal.yml
docker-compose.yml
ide-gen-proto.sh
package-lock.json
package.json
renovate.json5

UI Design and Frontend Development for OpenTelemetry Demo

This documentation page provides an overview of the UI Design and Frontend Development principles and techniques used in the OpenTelemetry Demo project (https://github.com/open-telemetry/opentelemetry-demo/).

What is UI Design and Frontend Development?

UI Design and Frontend Development refer to the processes of creating the user interface (UI) and user experience (UX) of a web application using various frontend technologies. In the context of the OpenTelemetry Demo, the frontend is built using React, CSS, and other related technologies.

React

React is a popular JavaScript library for building user interfaces. It allows developers to create reusable components and efficiently render dynamic content. The OpenTelemetry Demo uses React for building the main application components, such as the dashboard and the trace viewer.

Learn more about React

CSS

Cascading Style Sheets (CSS) is a styling language used for describing the look and formatting of a document written in HTML or XML. The OpenTelemetry Demo uses CSS for styling the UI components and ensuring consistent visual design across the application.

Learn more about CSS

Why is UI Design and Frontend Development important?

UI Design and Frontend Development are essential components of building a successful web application. A well-designed UI can improve user engagement, reduce cognitive load, and make the application more accessible to a wider audience.

Usability

Usability refers to how easy and efficient it is for users to use a system. Good UI Design and Frontend Development practices can help improve usability by making the application more intuitive, consistent, and easy to navigate.

Learn more about Usability

Accessibility

Accessibility refers to designing and developing web applications that can be used by people with disabilities, including those using assistive technologies. Good UI Design and Frontend Development practices can help improve accessibility by ensuring that the application can be used by everyone, regardless of their abilities.

Learn more about Web Accessibility

By focusing on usability and accessibility, the OpenTelemetry Demo aims to provide a positive user experience for all users.

UI Design and Frontend Development for OpenTelemetry Demo

What is UI Design and Frontend Development?

React

CSS

Why is UI Design and Frontend Development important?

Usability

Accessibility

Explanation

Graph

Symbols

We couldn't identify any entrypoints. If you believe this to be incorrect then please contact support.