Design wireframe for Events card section

[adgator101]

Overview

As part of Hacktoberfest, we are looking for contributors to help design the Events 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 event cards should look and feel.
• Consider the information structure, layout, and visual hierarchy. You can refer to the backend events 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: Events API Response Structure

The events card should display information based on the following structure from the backend:

{
  "id": "4786f250-3fda-48a5-80ea-de84fdf9076f",
  "name": "ABCD",
  "description": "ALPHABET",
  "status": "UPCOMING",
  "eventSchedule": [ // This can be excluded in the card
    {
      "id": "fcbe5081-3f6e-4696-bb2b-19f7758a6425",
      "startDate": "2025-09-15T10:00:00.000Z",
      "endDate": "2025-09-15T12:00:00.000Z",
      "description": "TODAY IS FIRST DAY",
      "eventId": "4786f250-3fda-48a5-80ea-de84fdf9076f"
    }
  ]
}

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