KTP Pledge

Inspiration

All pledge resources, tasks, and other information are spread across different platforms. This inspired us to create a website that provides easy access to all these resources which also aligns with KTP's core values and provides a way to manage tasks, track progress, and foster engagement among pledges while simplifying administrative work. The goal was to make pledges feel more connected and motivated while providing transparency on task requirements and completion.

What it does

KTP Pledge is a comprehensive platform that allows pledges to view their assigned tasks, track points, and submit proof of task completion. It includes features like a leaderboard for friendly competition, an events calendar to stay updated, and a detailed account page that highlights each pledge's status and accomplishments. The project also includes a chart to show the breakdown of points from different event categories, helping pledges visualize their progress.

How we built it

We built KTP Pledge using Next.js and React for the frontend and Tailwind CSS for styling. We integrated Chart.js to create a visual representation of points earned. We used React hooks for state management, making the UI responsive and interactive.

Challenges we ran into

We ran into many Github conflicts and most of our team members are new to hackathons so we learned a lot through trial and error. Additionally, balancing layout requirements, such as making everything fit visually within the account panel, required some troubleshooting.

Accomplishments that we're proud of

We’re proud of building a well-organized, visually appealing platform that serves both pledges and administrators in the fraternity. The interactive tasks feature, with proof submission, and the real-time leaderboard are accomplishments that enhance user engagement. The point distribution chart was another milestone, as it added a visual element to help pledges see where their efforts are concentrated.

What we learned

Throughout this project, we learned a lot about UI/UX design and creating responsive interfaces with Tailwind CSS. We improved our skills in integrating third-party libraries like Chart.js and managing data state with React. Working as a team also taught us the importance of collaboration, especially when resolving conflicts and merging code in Git.