Class Components React App with Error Boundary

A React + TypeScript project using class components only, showcasing local state management, API interaction, localStorage persistence, and an ErrorBoundary implementation.

---

📌 Task

React project setup. Class components. Error boundary

---

🚀 Deployment

🔗 Live Demo

📸 Screenshot:

---

📊 Tests & Coverage

• All logic is 100% covered by unit tests
• Tested with Vitest
• Mocked API requests via MSW
• Covered scenarios:
  • API success & error
  • Fallback message via ErrorBoundary
  • Search logic + localStorage integration

✅ Coverage Report:

---

🎯 Features

• Class components only (no hooks used)
• Search field with persistent input (saved in localStorage)
• Real-time data fetching from Rick and Morty API
• Initial API request runs on page load (with or without search term)
• Skeletons indicators shown during requests
• API error handling with user feedback
• Global error boundary for catching rendering errors
• Dedicated button to trigger an error and demonstrate fallback UI

---

🧱 Tech Stack

• React
• TypeScript
• Vite
• Tailwind CSS
• ESLint, Prettier, Husky
• Vitest for testing

---

📁 Project Structure

src/
├── api/Api.ts --> Fetch logic (with search + LS)
├── components/
│   ├── search/Search.tsx --> Controlled input + form handling
│   ├── cards/Cards.tsx --> Character card list
│   ├── buttonError/ButtonError.tsx --> Button that throws an error
│   └── errorBoundary/ErrorBoundary.tsx --> Catching rendering errors
├── interfaces/apiInterface.ts --> API response typing
├── pages/MainPage.tsx --> Stateful container (search, fetch, render)
├── App.tsx --> App wrapped in ErrorBoundary
└── main.tsx --> Entry point

---

🧪 How to Run & Check the Project Locally

To test and verify the application locally, follow these steps:

Clone the repository

git clone https://github.com/hapurzhonau/rs-react.git
cd rs-react
npm install
npm run dev

---

🛠 Available Scripts

Script	Description
npm run dev	Run dev server (Vite)
npm run lint	Run ESLint
npm run format:fix	Run Prettier formatter
npm run prepare	Prepares Husky hooks (only once after cloning)
npm run test	Run all tests using Vitest
npm run test:coverage	Run tests with coverage report

---

✅ Completed Requirements

Feature	Status
ESLint setup + no errors on lint run	✅
Prettier + format:fix command	✅
Husky pre-commit with lint	✅
Class components with Search + Results layout	✅
API fetch on mount	✅
Skeletons shown while fetching	✅
Search triggers fetch + saves to localStorage	✅
localStorage used on initial load	✅
ErrorBoundary catches render errors	✅
Test button throws an error and shows fallback UI	✅
Unit tests for API, search, errors, and fallback	✅
100% test coverage across components and logic	✅

---

⚠️ Limitations

• Only class components are used due to task constraints
• Pagination and full API edge cases are not covered
• UI styling is basic (focus on functionality over design)

---

📄 License

This project is created for educational purposes only as part of the RS School curriculum.