React + TypeScript + Vite

🐾 Cat Fact Daily:

A vibrant, type-safe React application that delivers random cat facts using the CatFact Ninja API. Built with a focus on clean UI/UX and modern React patterns.

📸 Preview

Home Screen	Active Fact

✨ Features:

• Real-time Fetching: Pulls random facts from the catfact.ninja API.
• Copy to Clipboard: One-click functionality to share your favorite facts.
• Interactive UI: Smooth transitions, loading states, and a custom "Restart" feature.
• Toast Notifications: Built-in feedback using react-hot-toast for actions like copying and error handling.
• Responsive Design**: A "Neo-Brutalist" aesthetic with a vibrant color palette (Teal, Terracotta, and Sand).

🛠️ Tech Stack:

• Framework: React (Vite)
• Language: TypeScript (for type safety and better DX)
• Styling: Pure CSS3 with Custom Variables
• Library: react-hot-toast for notifications
• Testing: Vitest & React Testing Library

🚀 Getting Started:

• Prerequisites:

• Node.js (v18 or higher recommended)
• npm or yarn

• Installation:

1. Clone the repository:

   git clone [https://github.com/Anuska86/cat-fact.git](https://github.com/Anuska86/cat-fact.git)

2. Navigate to the project folder:

   cd cat-fact

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

5. View in browser: Open http://localhost:5173 to see the app.

   🧪 Testing:

The project uses Vitest and React Testing Library to ensure UI stability and reliable data fetching.

• Unit Testing: Verifying component rendering and initial state.

• Integration Testing: Simulating user interactions like button clicks.

• API Mocking: Using Vitest vi.stubGlobal to mock network responses, ensuring the test suite remains fast and deterministic.

To run the tests in your terminal:

Bash: npm test

🧠 Key Concepts Implemented:

• Asynchronous Logic: Using async/await with try/catch/finally blocks to handle API lifecycles.
• State Management: Utilizing useState to track data, loading status, and user interactions.
• Conditional Rendering: Dynamically showing/hiding UI elements (like the Copy and Clear buttons) based on the application state.
• Component Architecture: Clean separation of types, styles, and logic.

Developed by Ana Sappia Rey: