Refactor 'Our Projects' Component to be Data-Driven #625
Description
Labels: enhancement, refactor, good first issue
Description
The ourProjects component, located at (ourProjects.tsx), is a vital part of our homepage for showcasing community and internal projects. Currently, the project data is hardcoded directly within the component's JSX. This approach makes it difficult to update, manage, and scale the list of projects as our community grows.
To improve maintainability and scalability, we should refactor this component to fetch project data from a dedicated JSON file.
Current Implementation (ourProjects.tsx)
// ... existing code ...
<div className={styles.ourProjectsContainer}>
// ...
<div className={styles.projectCard}>
<img src="/img/project1.png" alt="Project 1" />
<h3>Project Title 1</h3>
<p>A short description of the project...</p>
<a href="#">View Project</a>
</div>
<div className={styles.projectCard}>
<img src="/img/project2.png" alt="Project 2" />
<h3>Project Title 2</h3>
<p>A short description of the project...</p>
<a href="#">View Project</a>
</div>
// ... more hardcoded projects
</div>
// ... existing code ...
Proposed Solution
-
Create a Data File: Create a new file at src/data/projects.json. This file will contain an array of project objects.
-
Define Data Structure: Each project object in projects.json should have a consistent structure:
[
{
"id": 1,
"title": "RecodeHive Website",
"description": "The official open-source website for the RecodeHive community, built with Docusaurus and React.",
"imageUrl": "/img/recodehive-logo.png",
"projectUrl": "https://github.com/smirk-dev/recode-website",
"tags": ["docusaurus", "react", "community"]
},
{
"id": 2,
"title": "Git Coding Agent",
"description": "An intelligent agent to automate coding tasks and streamline your development workflow.",
"imageUrl": "/img/git-agent-logo.png",
"projectUrl": "/blog/git-coding-agent",
"tags": ["ai", "automation", "git"]
}
]
- Refactor the Component: Modify ourProjects.tsx to:
-
Import the data from src/data/projects.json.
-
Use the .map() function to iterate over the projects array and render a projectCard for each item dynamically.
-
Pass the data from each project object as props to the card elements.
Acceptance Criteria
A new file src/data/projects.json is created and populated with at least two project examples.
The ourProjects.tsx component is refactored to dynamically render projects from the JSON file.
All hardcoded project data is removed from ourProjects.tsx.
The UI and styling of the "Our Projects" section must look identical to the current implementation.
The component must remain fully responsive on all screen sizes.
Project links, images, and text are correctly populated from the JSON data
Metadata
Metadata
Assignees
Type
Projects
Status