Refactor OurProjects Component for Improved Data Fetching and UI Rendering

[Alina-Khmilevska]

The OurProjects component is currently handling both the fetching of project data and the rendering of UI components. To enhance maintainability, code readability, and separation of concerns, a refactor is necessary. This refactor should focus on creating a more modular structure, where data fetching and UI rendering are more decoupled, and UI components are more reusable and easier to manage.

Goals:

1. Data Fetching Enhancement:

• Abstract the data fetching mechanism to allow for more flexible data handling, error management, and potentially to facilitate easier unit testing.
• Implement better loading state visuals to improve user experience during data retrieval.

2. UI Component Refactoring:

• Further develop the ProjectCard component to handle various states such as loading, error, and data presentation in a more encapsulated way.
• Introduce a ProjectCardLoader component to render the loading state, improving the perceived performance and keeping the user informed of the process.

3. Improve Accessibility and Interactivity:

• Ensure that the UI components follow accessibility best practices, including keyboard navigation and screen reader support.
• Add meaningful hover effects and transitions to interactive elements to enhance user experience.

4. Responsive Design:

• Refactor the CSS to ensure that the layout is fully responsive and provides a consistent experience across various device sizes.
• Employ a mobile-first approach to improve performance on mobile devices.

5. Styling Enhancements:

• Standardize the button design with appropriate theming, size adjustments, and interactive elements such as hover animations on icons.
• Refine text alignment, font styles, and other typographic elements to match design specifications.

Technical Tasks:

• Refactor data fetching logic into a custom hook or a higher-order component to isolate data management.
• Implement Skeleton components that match the ProjectCard structure for a smoother loading experience.
• Ensure ProjectCard components receive all necessary props and handle their own display logic.
• Optimize error handling with a centralized error display component that can be reused across different data fetching scenarios.
• Adjust the "View All Projects" button styling for consistent typography and interactive effects, ensuring compliance with the design system.

Expected Outcome: Upon completion of this refactor, the OurProjects component will be more maintainable, with a clear separation between logic and presentation. The UI will be smoother and more engaging for users, with an improved loading experience and interactive elements.

[Alina-Khmilevska]

I'm pleased to report significant progress on the issue concerning the refactoring of the OurProjects component. Here’s a breakdown of what has been accomplished:

Data Fetching Enhancement:

We've created a custom hook that encapsulates the data-fetching logic. This has led to cleaner component code and has made it easier to manage state and side effects related to the API calls.

UI Component Refactoring:

• The ProjectCard has been improved to manage different states internally, which has made the component more reusable and easier to maintain.
• We introduced a ProjectCardLoader as a placeholder to enhance the user experience during data loading. The skeleton screens are visually consistent with the ProjectCard layout, providing a seamless transition from loading to displaying data.

Accessibility and Interactivity:

• The components now meet the WCAG 2.1 accessibility guidelines. This includes proper ARIA attributes, keyboard navigation, and support for screen readers.
• We've added subtle hover effects and smooth transitions to interactive elements to provide visual feedback and improve the overall user experience.