Modified Frontend of Events Page

[satyansh911]

---

Modified Frontend of Events Page

About: Made Changes to /events route
Title: "feat(events): Redesign Events page with modern card-based UI"
labels: "frontend,hacktoberfest"
assignees: @harshitap1305 , @sakshi1755

Related Issue

• Closes [HACKTOBERFEST] style: Redesign Events Page #123

---

Changes Introduced

• Added: A new EventCard component to display event details in a structured, modern layout.
• Fixed: New UI elements like status badges, icon-based detail lists, and styled action buttons.
• Updated: The main EventList page has been completely refactored to use a responsive CSS grid that displays the new EventCard components.
• Removed: The old layout and associated styles for the previous Events page design.

---

Why This Change?

• Problem: The previous Events page had an outdated and less intuitive user interface. Information was not presented in a scannable or visually engaging way.
• Solution: This PR implements a complete visual overhaul of the Events page, replacing the old list with a modern, responsive grid of event cards as specified in the design mockup. Each card neatly organizes key information, improving clarity and aesthetics.
• Impact: This change significantly enhances the user experience. The new design is more engaging, makes event information easier to digest at a glance, and aligns the page with modern UI standards.

---

Screenshots / Video (if applicable)

Before

After

---

Testing

• Ran unit tests and all passed (npm test in the relevant directory).
• Manually tested the following scenarios:
  • Test Case 1: Viewed the Events page as a standard user.
    Expected Result: The new card grid displays correctly, with only user-facing action buttons visible.
  • Test Case 2: Viewed the Events page as an authorized role (e.g., Club Coordinator).
    Expected Result: The card grid displays correctly, and administrative buttons (Edit, Delete) are visible on the appropriate cards.
  • Test Case 3: Resized the browser window to test responsiveness.
    Expected Result: The grid layout adjusts gracefully from desktop to mobile viewports.
• Tested on different browsers (Chrome, Firefox) for UI changes.
• Verified there are no new console warnings or errors.

---

Documentation Updates

• Updated the README.md with new instructions.
• Added clear code comments where logic is complex.
• N/A

---

Checklist

• I have created a new branch for this PR (git checkout -b feat/event-cards).
• I have starred the repository.
• My code follows the project's coding style and conventions.
• My commit messages are clear and follow the project's guidelines.
• I have performed a self-review of my own code.
• I have added tests that prove my fix is effective or that my feature works.
• All new and existing tests passed locally with my changes.
• This PR introduces no breaking changes.

---

Deployment Notes

• Requires a database migration/schema update.
• Requires new environment variables to be set.
• N/A

---

💬 Additional Notes

• This is a frontend-only UI/UX enhancement. All existing backend logic for fetching events and role-based permissions remains unchanged.

[vercel]

@satyansh911 is attempting to deploy a commit to the harshitapatidar257-1230's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
student-database-cosa	Ready	Preview	Comment	Oct 11, 2025 5:59am

[satyansh911]

Hey @harshitap1305 , please review my PR and let me know if any changes are required.

[satyansh911]

Hey @harshitap1305 , is there anything I could help you with regarding this issue?

[harshitap1305]

@satyansh911 PR Merged🎉
Thank you for contributing to Student Database CoSA!