Aaron's Style Guide
  • Intro
    • Strong opinions, loosely held
  • at a glance
    • Preferred Tech Stack (Current)
  • Starting a new project
    • Setup
      • Editor / IDE setup
        • General
        • Snippets
        • Linting
          • ESLint (.eslintrc.json/.cjs)
        • Formatting
          • Prettier (.prettierrc)
        • TS Config (tsconfig.json)
        • Other Project Setup
          • React Compiler
      • Browser setup
        • React Developer Tools
      • Command Line setup
        • Aliasing (.zshrc)
    • Misc Tools
  • frontend
    • Overview
    • Basic Guidelines
      • JavaScript
      • React
      • TypeScript
    • Naming
      • Extensions
      • Folders/Directories
      • Filenames
      • Declarations
    • Our Systems
      • Overview
      • Pages
        • File-based routing
        • "Route" folder
      • Components
        • Overview
        • UI Libraries
          • MUI
        • StorybookJS
      • State Management
        • General State Strategy
        • Client Global State
        • Server Global State
      • Data Fetching & API
        • "api object"
        • "Router" folder
      • Forms
      • Charts
      • Tables
    • Additional
      • Styling
      • Helpful websites/tools
    • // TODO
      • Component Architecture
      • Component Structure
      • Creating a New Component
    • 🥳 Onboarding
    • 👩‍🏫 Learning Resources
      • JavaScript
      • React
        • General
        • Performance
        • Rule of Hooks
      • TypeScript
      • (Global) State Management
        • General
        • Zustand vs Jotai
        • Zustand vs RTK
      • Charting Libraries
      • StorybookJS
      • NextJS
        • TypeScript
      • Other
  • api
    • Overview
    • HTTP Methods
    • Endpoints
    • Query Params
    • Request & Response
    • Database Relationship Types
    • Additional Topics
      • Rate Limiting
    • 💻 Examples
    • 👩‍🏫 Learning Resources
  • backend
    • Rails
      • Topics
      • File Setups
        • Routes (routes.rb)
        • Schema (schema.rb)
        • Models (models/x.rb)
        • Controllers (x_controller.rb)
          • Controller Actions
            • :index
            • :show
            • :create
            • :update
            • :destroy
          • Controller Concerns
            • :index
              • QueryParamsProcessor
          • Other Information
            • Multi-table Data Retrieval via Single Frontend Request
      • Database Tables
        • Roles / Permissions
      • 👩‍🏫 Learning Resources
        • Ruby on Rails (Rails)
  • database
    • Overview
    • 👩‍🏫 Learning Resources
      • Other info
        • Side Project Databases
  • Dev ops
    • Overview
    • 👩‍🏫 Learning Resources
Powered by GitBook
On this page
  1. frontend
  2. // TODO

Component Architecture

Previous// TODONextComponent Structure

Last updated 10 months ago

// TODO

  • "Generic-first" approach ("database" components, local components, etc.)

  • NounAdjective

    • MuiName + Adjective

    • ...

  • ...

  • Utility/reusable components are named with NounAdjective format (or more directly, ComponentAdjective) (an Adjective does not need to be present; just Noun is ok)

    • Noun

      • Table.tsx

      • FormCRUD.tsx

    • ChartBase (NounAdjective)

      • Page-related: ChartProject, ChartProductionOverall, ...

    • ModalBase (NounAdjective)

      • Utility-related (building utility on top of utility): ModalCRUD

        (also exists in /src/components/)

    • Styled MUI components:

      • base: IconButtonCreate, IconButtonClose, ...

      • base: ButtonCancel, ButtonSubmit, ...

      • base: TypographyError, ...

IconButton
Button
Typography