CalJam

• 

  Home page

• 

  How it works, about

• 

  Dashboard

• 

  Activity

• 

  Assignments

Inspiration

CalJam was inspired by the idea of integrating productivity and music into a single seamless experience. Many people use music to focus or enhance their mood during daily activities, but there was no simple tool to combine a daily activity tracker with personalized music recommendations. We wanted to create a platform that allows users to manage their tasks while automatically matching their activities with the right music, improving focus, motivation, and enjoyment.

What it does

CalJam is a web application that combines a daily activity tracker with Spotify playlists. Users can: -Add and manage daily activities and assignments. -Automatically generate Spotify playlists based on the type of activity (e.g., Study, Workout, Yoga, Commute). -View their assignments and activities in an organized dashboard. -Play Spotify music directly from the dashboard to match the current activity. -This creates a seamless integration between productivity and music, helping users stay engaged and motivated throughout the day.

How we built it

CalJam was built using React.js and TypeScript for the frontend, with React Router for navigation. The backend uses a simple in-memory activity management system. For music playback, we integrated the Spotify Embed Player, and CSS was used to create responsive, clean layouts. The app is structured with a landing page to introduce the concept, and a dashboard where users can manage tasks and music. The dashboard allows adding activities or assignments, viewing upcoming tasks, and playing music playlists automatically matched to activity types.

Challenges we ran into

Integrating Spotify playlists was straightforward, but handling dynamic playlist selection for different activity types required careful mapping. Managing the current activity, selected playlist, and player visibility in React required proper state handling to prevent unnecessary re-renders. Additionally, designing the time management interface for activities and assignments took several iterations to ensure clarity and responsiveness.

Accomplishments that we're proud of

We successfully integrated Spotify playlists to automatically match activities and created a responsive, interactive dashboard that displays assignments, activities, and the embedded music player. We designed a simple but functional workflow for adding tasks and activities, and built a prototype entirely in React and TypeScript that can be extended further. Our UI looks better than we anticipated for first time participants.

What we learned

We learned best practices in React state management for dynamic interfaces and how to design user-friendly dashboards with clear workflows. Additionally, we improved our understanding of structuring a small web app with TypeScript for maintainability and scalability.

What's next for CalJam

We did not get enough time to work on the assignments. We asked for difficulty levels so that we can integrate that into the type of playlist given for study sessions based on the difficulty. We want to integrate spotify api that will take the genre for the type of activities and then display the customized spotify playlists for you based on beats per seconds and other things. Other future plans include adding user authentication so that users can save their activities and playlists, integrating with the Spotify API to generate dynamic playlists, and adding notifications or reminders for tasks and assignments. We also plan to improve mobile responsiveness and user experience, and allow users to customize playlist preferences for each activity type.

Built With

• css
• git
• github
• json
• node.js
• react.js
• typescript
• vscode