Overview
As part of Hacktoberfest, we are looking for contributors to help design the Projects card section for our application.
What to do
- Do not write code for the feature yet.
- Create a wireframe (sketch, Figma, or online wireframe tool) for how project cards should look and feel.
- Consider the information structure, layout, and visual hierarchy. You can refer to the backend projects API response below for the expected data fields.
- Post your wireframe (as an image or link) in this issue thread and discuss your design decisions.
- Collaborate and discuss with others. Feedback and improvements are welcome!
Reference: Projects API Response Structure
The projects card should display information based on the following structure from the backend:
{
"id": "1",
"name": "Devsphere",
"githubLink": "https://github.com/BIC-DevSphere/devsphere-backend",
"demoLink": "https://demo.com/demo123",
"thumbnailUrl": "https://image.com/image123",
"tech_stack": ["JavaScript", "React"],
"tags": [
{
"id": "1",
"name": "Web"
}
],
"contributors": [
{
"id": "1",
"name": "Test",
"avatarUrl": "https://avatars.githubusercontent.com/contributor-1",
"githubUsername": "contributor1"
}
],
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies condimentum nunc, vel tempor elit faucibus id. Duis mauris felis, ultrices sit amet convallis eget, pretium id neque. Vestibulum auctor ante lectus, at feugiat urna auctor sagittis. Pellentesque augue turpis, consequat at condimentum pharetra, viverra vitae purus.",
"createdAt": "2025-09-21T18:14:35.091Z",
"updatedAt": "2025-09-21T18:16:11.461Z"
}Consider how each of these fields could be displayed in your design.
If you need help or want feedback, comment below!
Resources
- [Wireframe tools you can use: Figma, Balsamiq, Whimsical, Excalidraw, etc.]
Overview
As part of Hacktoberfest, we are looking for contributors to help design the Projects card section for our application.
What to do
Reference: Projects API Response Structure
The projects card should display information based on the following structure from the backend:
{ "id": "1", "name": "Devsphere", "githubLink": "https://github.com/BIC-DevSphere/devsphere-backend", "demoLink": "https://demo.com/demo123", "thumbnailUrl": "https://image.com/image123", "tech_stack": ["JavaScript", "React"], "tags": [ { "id": "1", "name": "Web" } ], "contributors": [ { "id": "1", "name": "Test", "avatarUrl": "https://avatars.githubusercontent.com/contributor-1", "githubUsername": "contributor1" } ], "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies condimentum nunc, vel tempor elit faucibus id. Duis mauris felis, ultrices sit amet convallis eget, pretium id neque. Vestibulum auctor ante lectus, at feugiat urna auctor sagittis. Pellentesque augue turpis, consequat at condimentum pharetra, viverra vitae purus.", "createdAt": "2025-09-21T18:14:35.091Z", "updatedAt": "2025-09-21T18:16:11.461Z" }Consider how each of these fields could be displayed in your design.
If you need help or want feedback, comment below!
Resources