Co-Cal — Collaborative Study Calendar

A web service for sharing study logs, managing groups, and finding overlapping availability through a timetable heatmap

Overview

Co-Cal is a collaborative calendar built specifically for study groups. It brings personal learning logs, shared group calendars, member management, and meeting-time coordination into one workspace, replacing the repeated back-and-forth of arranging study sessions through a messenger.

The service was developed by a three-person team from November to December 2025. We designed it to make individual progress visible to the group while preserving a clear distinction between records that a user can edit and other members’ records that are shared read-only.

A single dashboard combines study groups, availability coordination, a shared calendar, and daily learning logs.

Key Features

  • Calendar-based learning logs: Users can create, view, edit, and delete multiple study records for a selected date. Colored markers distinguish their own activity from records shared by other group members.
  • Group calendar sharing: Users can switch between their own records and a read-only view of all activity in the selected study group.
  • Study group workflow: Members can create or search for groups, request to join, or invite an existing user by email. Group leaders review join requests and can approve, reject, or remove members.
  • Availability heatmap: Each member paints available one-hour blocks on a weekly timetable. The server aggregates the selections by day and time, and darker cells indicate a larger overlap among members.
  • Holiday-aware planning: Calendarific national-holiday data is localized and displayed directly on the monthly calendar.
  • Account and lifecycle management: The service supports sign-up, login, password changes, account deletion, group withdrawal, and leader-only group deletion with related records cleaned up through the relational schema.

Architecture

Co-Cal follows a three-tier architecture: a responsive browser client built with Vanilla JavaScript and Tailwind CSS, a Node.js/Express REST API, and a MySQL database hosted on Railway. The client uses the Fetch API to call separate routers for accounts, schedules, groups, timetables, and holidays.

The relational model connects users and study groups through a many-to-many membership table. Separate tables store join requests, group-scoped learning records, and each member’s availability blocks. Parameterized SQL queries handle CRUD operations, while foreign keys and cascading deletes keep dependent group data consistent. The timetable API either returns one member’s selected blocks or aggregates the full group with COUNT(*), which the client converts into heatmap intensity.

My Contributions

I focused on the learning-record and study-group collaboration flows across the frontend, REST API, and database:

  • Implemented calendar-based learning-record CRUD and group/member calendar views.
  • Developed group search and the join request, approval, and rejection workflow.
  • Built member listing and email invitation features, plus leader permissions for member removal and group deletion.
  • Added group withdrawal and the cleanup of the member’s schedules and timetable data.
  • Designed the initial MySQL schema and automated database-table initialization.
  • Integrated these flows into the single-page interface and refined interaction messages and state transitions.

Tech Stack

HTML5 · CSS3 · JavaScript · Tailwind CSS · Node.js · Express · MySQL · Railway · Calendarific API

Source Code