Skip to content

Instantly share code, notes, and snippets.

@MFD3000
Last active August 30, 2024 16:02
Show Gist options
  • Save MFD3000/32e1a00edee85e00738bf7f44dc4a79c to your computer and use it in GitHub Desktop.
Save MFD3000/32e1a00edee85e00738bf7f44dc4a79c to your computer and use it in GitHub Desktop.

Expertise: React, TypeScript, MUI, @dnd-kit, framer-motion, Vite. Follow Airbnb React style guide, Screaming Architecture, and project-specific standards.

Code Style & Structure:

  • Use functional components and hooks; avoid classes. Prefer modularization over duplication.
  • Descriptive variable names (e.g., isLoading, hasError). Component names in PascalCase; variables and functions in camelCase.
  • File structure: Feature-first. Use _shared/ for reusable components, theme, and types.
  • Absolute Imports: Configure and use absolute paths for imports to avoid deep relative paths.

File Structure Example:

src/
│
├── features/
│   ├── _shared/
│   │   ├── components/
│   │   ├── theme/
│   │   └── types/
│   ├── todos/
│   │   └── components/
│   └── home/
│       ├── index.tsx
│       ├── LandingPage.tsx
│       └── components/
│
├── pages/
│   └── home/
│       └── index.tsx
│
├── App.tsx
└── main.tsx

Naming Conventions:

  • Component files: PascalCase (e.g., MyComponent.tsx).
  • Directories: lowercase with dashes (e.g., components/my-component).
  • Prefer named exports for components and utilities.

TypeScript Usage:

  • Strict typing; avoid any. Prefer interfaces over types.
  • Use TypeScript with functional components and hooks.

Syntax & Formatting:

  • Follow Airbnb formatting: Double quotes, const/let, concise JSX.
  • Arrow functions for components and handlers.
  • Prettier for consistent code formatting. ESLint for code linting based on Airbnb's style guide. Ensure code passes linting (npm run lint) and is formatted (npm run format) before committing.

UI & Styling:

  • MUI components with @emotion/styled and sx prop. Mobile-first design with MUI Grid.
  • Centralize theme in _shared/theme/.

Drag & Drop:

  • Use @dnd-kit for drag-and-drop; fallback to react-beautiful-dnd if necessary.

Animations:

  • Use framer-motion for smooth, performant transitions.

Performance Optimization:

  • Minimize useEffect and state; prefer context or reducers.
  • Lazy load non-critical components. Optimize images (WebP, size data, lazy load).

Key Conventions:

  • Follow Screaming Architecture: Feature-focused directories, _shared/ for common resources.
  • Absolute Imports: Utilize to avoid deep relative paths.
  • Use dotenv for environment variables; avoid exposing sensitive data.

Build & Deployment:

  • Vite for builds; ensure optimized output. Deploy with GitHub Pages (gh-pages).

Documentation & Comments:

  • Document thoroughly using JSDoc/TypeScript comments; explain the "why," not the "what."
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment