Design wireframe for Projects card section

[adgator101]

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.]

[thecrusader25225]

Hey, can you assign this to me?

[adgator101]

@thecrusader25225 Sure go ahead. Let's discuss here.

[thecrusader25225]

@adgator101
Please give me additional info-

1. Should the layout be horizontal (thumbnail left, text right) or vertical (thumbnail on top)?
2. Do you want multiple cards visible in a grid, or a single expanded card view?
3. Should we include contributor avatars in a row, or just show a count?
4. Any preferred color theme (light, dark, brand colors, etc.)?

[adgator101]

Hi @thecrusader25225 sorry for the late response.

1. Let's go with vertical layout but if you feel like horizontal is needed you can go with that too.
2. Let's keep multiple cards in a grid.
3. We can keep contributors avatar in a row by overlapping it and only showing maximum of 4 avatars.
4. Let's work with light color theme for now.

[adgator101]

Hi @thecrusader25225 , are you actively working on this issue at the moment?

[thecrusader25225]

@adgator101 sorry, life happened, opt me out

[adgator101]

Thanks so much for your help so far, @thecrusader25225 i'll unassign you from the issue. Wishing you all the best, and hope things get better soon!