Chatr Planr

Chatr Planr homepage
Chatr Planr in action

Inspiration

We were inspired by the scheduling difficulties that have undoubtedly become more prevalent during the pandemic as people are more reliant on digital communication and calendars. Specifically, we recently had classes and assessments moved around, but our instructors had difficulties scheduling the events in a way such that they would not interfere with others, resulting in many emails and scheduling conflicts. Whether it is scheduling a get together with friends or instructors scheduling tests and exams, it can be difficult to plan events that work with others’ schedules. This is only increased by the fact that the calendar apps we use to manage our lives are separate from the messenger apps we used to make plans – it can be inconvenient to switch softwares, we can forget to add events after the fact, and it is difficult to visualize how all of our plans will look when put together.

What it does

Chatr Planr integrates a chat app with a shared group calendar. When plans are discussed in the chat app, users can use the integrated $schedule command followed by the event’s name, start time, end time, and description in order to add it to the group’s calendar. This will show all the users the different events each day, making it easier for them to visualize them and avoid scheduling conflicts. This also removes the difficulty of switching softwares from chatting to scheduling, something many users put off until later, making it likely that they will forget.

How we built it

The front-end was created using React.js, and the back-end was created using Node.js and Express.js, both of which were helped by getstream.io and FullCalendar.io. We also used MongoDB as our database to store the different events and users and Git for version control.

Challenges we ran into

The biggest challenge we faced was that we originally wanted to use the Google Calendar API to implement the calendar component of the app. However, we had difficulties accessing the API and authentication because we used a local server to host the app and were having issues with the URI. As a result, we had to look for another way to implement a calendar, which is when we found FullCalendar. This showed our resourcefulness as we were able to find a suitable solution to the problem, and helped show us that it is not the end of the world if something does not go as planned.

Accomplishments that we're proud of

We are proud that we managed to integrate so many different technologies together in a way that works cohesively and satisfies our needs. While there is always documentation to teach you how to use a framework, library, etc., it is up to us to figure out how to connect them to other technologies that may seem completely unrelated. We are especially proud that we were able to do it in such a short amount of time; for many of these, some - if not all - of us had no experience with the technology, so we really had to learn as we hacked.

What we learned

We learned how to use the SDKs associated with getstream.io and FullCalendar.io, and saw how we could extend and connect the code to fit our ideas. This showed us how we can build upon existing libraries to make something that is our own and suits our needs, which will surely be useful in the future. Furthermore, it was some of our first times using React.js and MongoDB, and this presented a perfect opportunity to learn through problem solving, providing us with an even deeper understanding of these technologies.

What's next for Chatr Planr

One next step for us would be to integrate a way for users to export the shared calendar to their personal calendars, making it accessible in places other than the app, which could be done using the Google Calendar API (which we had trouble with earlier on). Another next step would be expanding into a mobile app because that is a very popular platform for messaging apps,and would again make the calendars more accessible for users.