PPMK Interactive Calendar

Made with ChatAndBuild
User Registration Interface
Calendar User Interface
Admin Panel Interface
Event Details Interface
Option to view events throughout the year

Inspiration

We were inspired to build the interactive calendar website after realizing how often we missed events. Either because we weren’t aware of them or simply forgot. In many cases, event details were shared through email, which we tended to overlook or not read in time.

In addition to attending events, we also enjoy organizing small gatherings such as futsal practices, jogging sessions, jamming sessions and other casual meetups. These activities are a great way to make the most of our free time and connect with others who share similar interests.

With that in mind, we wanted to create a platform that not only helps people stay organized and informed about upcoming events but also encourages engagement and communication. One key feature we implemented is the ability for users to ask questions directly within the website, making it easier to clarify event details and connect with organizers.

Ultimately, the goal was to build an intuitive and interactive space that simplifies event management while fostering a stronger sense of community.

What it does

This interactive calendar allows all members of an organization to participate and contribute by adding their own events and keeping track of events hosted by others. From official events organized by the student organization PPMK to smaller student-hosted gatherings, all contributions are welcome. PPMK committee members can register as administrators to monitor the calendar. Administrators are responsible for approving or denying event requests and deleting events when necessary. Regular PPMK members (students) can register as users, who are able to request event additions to the calendar.

How we built it

The calendar was built using ChatAndBuild, an AI-powered platform that helps users create applications from scratch without requiring coding or design expertise. Through ChatAndBuild, we utilized Anthropic’s LLM, Claude Sonnet 4, to develop the application. The calendar was built with TypeScript, React, HTML, CSS, and SQL, and is integrated with a Supabase database via the ChatAndBuild platform.

Challenges we ran into

Our team members were unfamiliar with the programming languages used, such as TypeScript, React, and SQL. Additionally, none of us had previously implemented database integration in a project before. As a result, debugging certain errors was challenging. Nevertheless, with the help of ChatAndBuild and some AI-prompting magic, we successfully completed the project. We also faced issues with the website not responding properly and the AI occasionally failing to process prompts smoothly which were likely due to our own inexperience and unstable network conditions

Accomplishments that we're proud of

One of the things that we're proud of is we have successfully built a collaborative calendar where any student can easily view both official and casual events. This can help reduce the percentage of students missing out on an event simply because they didn't know it was happening. This leads to fewer students feeling left out and connections between students will be stronger than ever.

Next, inclusive event sharing. What we mean by this is allowing students to post not just major events such as KASUMA or Raya Celebration, but also small community activities like futsal or music gatherings. By doing so, we can make the most of our free time and connect with people with the same interest.

Last but not least, stronger student engagement. We created a tool that is simple to add, view and access event details. This encourages student participation in both big or small events and makes it easier to connect with others.

What we learned

Through this project, we learned much more than just building a website. We realized the importance of truly understanding students’ needs, which is why we made the platform inclusive for both official events and smaller activities.

On the technical side, we gained hands-on experience in app development with the help of ChatAndBuild, creating a functional application that handles event details while keeping the calendar easy to use.

More importantly, we learned the value of teamwork through coordination, sharing ideas, and combining them into a single product. Overall, this project demonstrated that even a simple tool can have a significant impact on communication and student life.

What's next for PPMK Collaborative Calendar

As PPMK Calendar continues to develop, we are focused on introducing new features that will make it more organized and beneficial for the community. Upcoming improvements include the addition of event categories and tags, allowing events to be grouped into areas such as academics, extracurriculars, exams, and holidays, with clear color-coding for better visuals. A search engine will also be introduced to make it easier for users to locate specific events by name, date, or category.

To enhance accessibility, we plan to include an export and sync option, enabling users to export events in .ics format or directly sync them with Google Calendar and Outlook for seamless integration. Beyond organization, PPMK Calendar will also become more engaging through an attendance feature, where students can mark their status for each event, and notifications, which will provide timely reminders and updates via email or SMS.

Lastly, we will be adding interactive polls, giving students a voice in shaping certain events by voting on preferred activities, themes, or timings.

These improvements aim to make PPMK Calendar not only a scheduling tool but also a collaborative and connected platform for the PPMK community.