JingleCard

Music-AI-powered greeting cards for heartfelt connections.

Comment

Inspiration

This game is designed to help players express love and gratitude through music and words on holidays and special occasions. It encourages meaningful connections by turning collected musical notes into personalized melodies that convey heartfelt emotions.
Our team of four members, who were once classmates, created this game to bridge the physical distance between us after graduation as we now live across the globe. Despite being separated by oceans, music, and warm words have kept us close.
The game reflects our shared humanistic values and showcases the charm of combining creativity with technology, inspiring players to connect with their loved ones in an innovative and emotional way.
As we step into 2025 new year, we hope everyone remembers to reconnect with old friends and cherish the bonds that have shaped our lives.

What it does

The game allows players to engage in a fun and interactive music experience, where they collect musical notes through gameplay. These notes are then used to automatically generate personalized music that reflects the player’s emotions, which can be shared as part of a custom greeting card. The game also features AI to help players polish and tailor their messages, ensuring they are thoughtful and perfect for the occasion. These cards, blending music and heartfelt words, can then be sent to loved ones via email, offering a meaningful way to express gratitude and love.

Music Note Collection Game

  • Players collect musical notes while playing a fun and interactive game.
  • The collected notes are automatically composed into unique music based on the player’s progress and input.
  • Players can customize the music by selecting its key and tonality, adding a creative and personal touch to the experience.
  • The game incorporates interactive 3D objects on the webpage, allowing players to engage with a visually dynamic environment. Players can interact with 3D elements such as instruments, note icons, or other creative objects, enhancing the overall immersive experience.

AI-Assisted Text Polishing

  • Integrate with generation model to generate personalized content.
  • Quickly and effectively polish user input to produce high-quality, refined text.
  • AI helps refine greeting messages, improving grammar, tone, and style with juicy Emojis.
  • AI assists in generating email text in various languages!

Automated html based Email Generation and Sending

  • Players can generate emails automatically based on specific commands or templates provided during gameplay or other interactions.
  • Once the email content is finalized, the system ensures it is sent to the desired recipients seamlessly, saving time and effort.

How we built it

To build this game, we combined creative ideas with the right technologies and tools to deliver a fun and engaging experience. Here’s what we used: Frontend Development: We built the frontend using React, creating a dynamic and responsive user interface. To make the experience more immersive and interactive, we added 3D models using Three.js, giving the game a unique and playful flavor. Music Generation The game incorporates music theory, using music scales to generate melodies in different styles, perfectly matching the theme and emotion of each greeting card. We relied heavily on powerful AWS tools:

  • Amazon S3 for scalable storage of game assets
    We use Amazon S3 to handle all our storage needs for the application and delivering static assets and user-generated content. Specifically, it serves two key purposes: Storing Music Files: After users customize their music, the final generated .wav files are uploaded to S3. We configured a dedicated S3 bucket to store these files, and public access permissions are carefully set to allow recipients to download the files securely. a.Access Control: An IAM user with restricted access is created to handle this upload process. b.Process Flow: Once the music is generated, the application programmatically uploads the file to S3 using AWS SDK for Javascript. A URL is generated to provide secure temporary access to the music file. Hosting React App Build Files: Our React app's build files are stored and served directly from an S3 bucket. Deployment Process: We use GitHub Actions for Continuous Deployment, automating the process of updating these files in S3 whenever there’s a change in the application code.

  • CloudFront for fast content delivery and low latency. To enhance performance and deliver content globally with minimal latency, we integrate Amazon CloudFront as a Content Delivery Network (CDN). CloudFront is connected to the S3 bucket hosting the React app build files and music files. These files are cached at CloudFront edge locations, enabling quick access.

  • IAM for secure access management.
    We employ AWS IAM to ensure secure operations throughout the app. For example, a specific IAM user is configured with limited permissions to upload .wav files to S3. Lambda functions are assigned IAM roles that allow access to only the necessary resources, such as S3, SES, and Bedrock, without exposing sensitive credentials.

  • Lambda for serverless computing. AWS Lambda is at the heart of our backend operations, providing a serverless architecture to execute key workflows. Each Lambda function is written in Python and can be triggered through a POST request through Amazon API Gateway. AI Email Content Generator: A Lambda function processes user input and generates personalized email content using AI models hosted on Bedrock. Email Sender Backend: Another Lambda function handles the actual email-sending process by integrating with Amazon SES (Simple Email Service).

  • CloudWatch for monitoring, logging, and troubleshooting. Amazon CloudWatch is our primary monitoring and logging tool for our backend services. We use it to collect and store logs from Lambda functions, API Gateway, and other AWS services, which helps us debug issues efficiently.

  • API Gateway to connect and manage APIs. Amazon API Gateway serves as the entry point for our backend services. It handles RESTful API requests for triggering Lambda functions, ensuring smooth communication between the front-end and back-end.

  • Bedrock for leveraging generative AI capabilities. We use Amazon Bedrock to access and integrate generative AI models into our application. By accessing state-of-the-art models like Claude 3 Haiku through Bedrock, we generate creative and personalized email content. This removes the complexity of managing AI infrastructure or training models, allowing us to focus on user experience.

  • SES (Simple Email Service) for sending personalized emails with the generated music cards. Amazon SES is utilized for all email-related functionality. SES is integrated with our backend (via Lambda) to send personalized emails to users efficiently. Once a user finalizes the email content, a Lambda function integrates with SES to send the email to the recipient. We also use it to track delivery success, ensuring users have a smooth and reliable experience.

  • CI/CD Pipeline We used GitHub Actions to automate deployments and ensure smooth updates. By combining these technologies, we created a game that’s not only functional and scalable but also creative, fun, and easy to use.

Challenges we ran into

Some of the biggest challenges we faced involved integrating multiple Amazon AWS services seamlessly, especially ensuring smooth data flow between the game, generative AI, and the email delivery system. Debugging unexpected behavior across the pipeline also required significant effort and teamwork.

Accomplishments that we're proud of

We are proud of creating a game that helps people reconnect and express their emotions in a thoughtful way. Our biggest accomplishment is enabling players to easily share their feelings of love and gratitude with friends and family at the start of a new year, fostering deeper connections despite physical distances.

What we learned

Throughout this journey, we gained extensive knowledge about Amazon AWS Services and how to use them effectively in building scalable and interactive applications. From learning how to manage secure APIs to leveraging generative AI for creating personalized content, this project has been a tremendous learning experience.

What's next for Untitled

Moving forward, we plan to expand the features of the game, including:

  • Adding multiplayer modes for collaborative music creation,
  • Introducing more dynamic music styles and instruments for greater personalization,
  • Enhancing the AI to better capture and reflect player emotions,
  • Supporting additional platforms and devices to make the game accessible to a broader audience.

Our ultimate goal is to create a global community of players who use music as a bridge to connect with the people they care about, no matter where they are.

Built With

  • api-gateway
  • bedrock
  • cloudfront
  • cloudwatch
  • iam-(identity-and-access-management)
  • lambda
  • react
  • s3
  • ses
  • three.js
Share this project:

Updates