Class components

[DenHelloWorld]

Pull Request Description

1. Task: React project setup. Class components. Error boundary

2. Screenshot:

3. Deployment: N/A

4. Done 28.04.2026 / deadline 05.05.2026

5. Score: ? / 100

Functional Requirements (100 / 100)

• Feature 1: Application Layout Structure (5/5)
  • Page is organized into two distinct sections: search top-bar and results area.
• Feature 2: Search Functionality with Local Storage (15/15)
  • Application checks local storage on load and populates the input field if a term exists.
• Feature 3: Search Results Display (10/10)
  • Each result item displays a name and description in a clear format.
• Feature 4: Initial Data Load (10/10)
  • Fetches data automatically on mount based on the current search term or retrieves all items.
• Feature 5: Search Execution (20/20)
  • Trims input, prevents redundant requests for the same term, and updates results on button click.
• Feature 6: Search Term Persistence (5/5)
  • Updated search terms are correctly saved to local storage.
• Feature 7: Loading State Indication (10/10)
  • A loading indicator is visible while fetching data and hidden once completed.
• Feature 8: Error Handling (10/10)
  • Meaningful error messages are displayed for 4xx/5xx API responses without console clutter.
• Feature 9: Application Error Boundary (15/15)
  • Error Boundary implemented with a fallback UI and a dedicated button to simulate an app crash.

Technical Requirements Check

• Vite + React-TS: Project setup follows the required template.
• No Hooks: State and lifecycle methods are handled exclusively via Class Components.
• TypeScript: No any or @ts-ignore used.
• No State Managers: Redux or similar libraries are not used.
• No UI Kits: Component libraries (MUI, AntD, etc.) are not used.
• Branching: Work is located in the class-components branch.

---

Implementation Details

• API used: [Public API The Art Institute of Chicago]
• Styling approach: [Tailwind]

[Elena-lucky]

Perfect work! There are some suggestions for improvements, but most of them are minor. Keep it up!

[Elena-lucky]

Your config is modern (flat config + TypeScript + React), which is great)
But it is too lightweight and misses many important rules that are standard in real production projects.

Below is a list of what should be added and why it matters.

1. Import rules (project structure & maintainability)

You are missing eslint-plugin-import, which is critical.

Add:

import/order
import/no-cycle
import/prefer-default-export (optional)
disable import/extensions

Why:

Prevents circular dependencies
Keeps imports clean and predictable
Enforces consistent module structure
2. Strict TypeScript rules (code safety)

Add:

@typescript-eslint/consistent-type-imports
@typescript-eslint/consistent-type-exports
@typescript-eslint/explicit-function-return-type
@typescript-eslint/no-explicit-any
@typescript-eslint/no-non-null-assertion
@typescript-eslint/no-inferrable-types

Why:

Enforces strong typing discipline
Prevents hidden runtime errors
Makes code easier to refactor and scale
3. Unused variables handling (real-world standard)

Add:

@typescript-eslint/no-unused-vars with _ ignore pattern

Why:

Avoids noise from unused variables
Keeps flexibility for intentionally unused params (e.g. _event)
4. Safety rules (production readiness)

Add:

no-console (allow only warn and error)
no-debugger
curly
no-param-reassign
prefer-const

Why:

Prevents accidental debug code in production
Avoids subtle bugs
Encourages predictable code behavior

5. Architectural constraints (very important)

Add:

max-lines-per-function

Why:

Prevents overly large components/functions
Encourages better separation of concerns
6. Type-aware linting (critical missing piece)

Update your config:

ecmaVersion: 'latest'
add parserOptions.project: './tsconfig.json'

Why:

Enables full TypeScript type-aware rules
Without this, many rules don’t work correctly

7. Ignore patterns

Add:

node_modules

Why:

Avoid unnecessary linting of dependencies

These are strict (even "hardcore") rules, especially for a learning project.

You may feel that:

they slow you down
they are too restrictive

That’s normal.

But:

Learning to work with strict rules early = much faster growth as a developer.

[Elena-lucky]

componentDidCatch should include errorInfo
Please, fix
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { console.error(error, errorInfo.componentStack); }
errorInfo.componentStack is extremely useful for debugging
This is the standard React API usage

[Elena-lucky]

Missing explicit return type
Missing error argument

Suggested change

	static getDerivedStateFromError() {
	return { isError: true };
	}
	static getDerivedStateFromError(_error: Error): ErrorBoundaryState) {
	return { isError: true };
	}

[Elena-lucky]

onKeyDown is attached to a div. Should be React.KeyboardEvent.

[Elena-lucky]

Minor improvement. May be, it's better to name hasError. It matches React docs convention.