Project Overview

This project demonstrates how to fetch data from an external API when a React component loads. It uses the useEffect Hook to perform asynchronous operations and useState to manage application state.

Users can:

• View posts fetched from a REST API
• Search posts by title
• See a loading spinner while data is being fetched
• Receive an error message if the request fails
• Browse posts displayed in responsive cards

📌 Features

• Fetch posts from an external REST API
• React Functional Components
• React Hooks (useState, useEffect)
• Search posts by title
• Display the first 10 posts
• Animated loading spinner
• Error handling
• Reusable components
• Responsive layout
• Modern Glassmorphism UI
• Cleanup function using AbortController

📌 Technologies Used

• React.js
• JavaScript (ES6+)
• HTML5
• CSS3
• JSX
• React Hooks
• Fetch API
• Async/Await
• Vite

📌 React Concepts Practiced

• JSX
• Functional Components
• Component Reusability
• Props
• useState Hook
• useEffect Hook
• Fetch API
• Async/Await
• try...catch...finally
• Conditional Rendering
• Array.map()
• Array.filter()
• Cleanup Function
• AbortController
• Responsive UI Design

📌 How It Works

1. The application loads.
2. useEffect runs once when the component mounts.
3. Data is fetched from the JSONPlaceholder API.
4. A loading spinner is displayed while waiting for the response.
5. The JSON response is converted into JavaScript objects.
6. Posts are stored in React state.
7. The first 10 posts are displayed using reusable PostCard components.
8. Users can search posts by title.
9. If the API request fails, an error message is displayed.
10. If the component unmounts before the request completes, the fetch request is cancelled using AbortController.

📌 API Used

JSONPlaceholder

https://jsonplaceholder.typicode.com/posts

📌 Learning Objectives

This project was built to strengthen understanding of:

• React Hooks
• State Management
• Side Effects with useEffect
• Fetching API Data
• Asynchronous JavaScript
• Error Handling
• Conditional Rendering
• Component-Based Architecture

📌 Author

Fatima Nasir Awan

Software Engineering Graduate