Pavewise - Style Guide & More
  • At a Glance
    • Tech Stack
  • Frontend
    • Overview
    • Config & Tooling
      • Editor / IDE setup
        • General
        • Snippets
        • Formatting
          • "Format on save"
          • Prettier (.prettierrc)
        • Linting
          • ESLint (.eslintrc.json)
        • TS Config (tsconfig.json)
      • Browser setup
      • Command Line setup
        • Aliasing (.zshrc, etc.)
    • Workflow
    • Basic Guidelines
      • JavaScript
      • React
      • TypeScript
    • Naming
      • Extensions
      • Folders/Directories
      • Filenames
      • Declarations
    • Our Systems
      • Overview
      • Pages
        • File-based routing
        • "Route" folder
      • Components
        • Overview
        • MUI
          • General
          • Styling choices
          • Choosing Components
        • StorybookJS
      • State Management
        • General State Strategy
        • Client Global State
        • Server Global State
        • URL state
      • Data Fetching & APIs
        • "api" object
        • "Router" folder
      • Forms
      • Charts
      • Tables
    • Additional
      • Styling
      • Helpful websites/tools
    • // TODO
      • Component Architecture
      • Component Structure
      • Creating a New Component...
    • 🥳 Onboarding
    • 👩‍🏫 Learning Resources
      • ReactJS
        • Function Declarations vs Function Expressions
      • TypeScript
      • (Global) State Management
      • Charting Libraries (JS)
      • (Not Implemented)
        • StorybookJS
        • NextJS
  • API
    • Overview
    • Introduction
    • Versioning
    • Authentication
    • HTTP Methods
    • Endpoints
    • Query Params
    • Request & Response Format
    • Error Handling
    • Status Codes
    • Database Relationship Types
    • Additional Topics
      • Rate Limiting
    • 💻 Examples
    • 👩‍🏫 Learning Resources
  • Backend
    • Overview
    • Workflow
    • Topics
    • File Setups
      • Routes (routes.rb)
      • Schema (schema.rb)
      • Models (models/x.rb)
      • Controllers (x_controller.rb)
        • Database Relationships
        • Controller Actions
          • :index
          • :show
          • :create
          • :update
          • :destroy
        • Controller Concerns
          • :index
            • QueryParamsProcessor
          • :show (none)
          • :create (none)
          • :update (none)
          • :destroy (none)
        • Controller [X]
          • :index (none)
          • :show (none)
          • :create (none)
          • :update (none)
          • :destroy (none)
        • Controller [Y]
          • :index (none)
          • :show (none)
          • :create (none)
          • :update (none)
          • :destroy (none)
        • Other Information
          • Multi-table Data Retrieval via Single Frontend Request
    • Database Tables
      • Roles / Permissions
    • Ruby gems
    • AI
    • 👩‍🏫 Learning Resources
      • Ruby on Rails (Rails)
  • Database
    • Overview
    • 👩‍🏫 Learning Resources
  • Dev Ops
    • Overview
    • 👩‍🏫 Learning Resources
Powered by GitBook
On this page
  1. Frontend

Overview

A mostly reasonable approach to React, TypeScript, and JSX

PreviousTech StackNextConfig & Tooling

Last updated 10 months ago

Purpose: to provide a foundation for consistency and expectation within the codebase, allowing for efficient and effective code readability, understandability, and maintainability.

This style guide is mostly based on the standards that are currently prevalent in React and JavaScript, although some conventions may still be included or prohibited on a case-by-case basis. Influences from:

  • ...

Table of Contents

  1. (things to improve DX, make you more efficient, etc.)

  2. (creating a new PR, rebasing a PR, etc.)

  3. (high level JS, React, TypeScript rules/guidelines)

  4. (file extensions, folders, filenames, declarations)

  5. (pages, components, state management, etc.)

  6. (helpful videos for FE/React-related concepts)

AirBnB Style Guide
StackOverflow Thread
Config/Tooling
Workflow
Naming
Our Systems
👩‍🏫 Learning Resources
Basic Guidelines