AWS Logo
Menu
JingleCard

JingleCard

Music-AI-powered greeting cards for heartfelt connections

Published Jan 14, 2025

About this Project

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.
Note Game
Note Game

AI-Assisted Text Polishing

- Integrate with generation model for natural language processing.
- 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

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  


S3 (Simple Storage Service)

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:
  1. 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.
    1. Access Control: An IAM user with restricted access is created to handle this upload process.
    2. 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.
  2. Hosting React App Build Files: Our React app's build files are stored and served directly from an S3 bucket.
    1. 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

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 (Identity and 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

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.
  1. AI Email Content Generator: A Lambda function processes user input and generates personalized email content using AI models hosted on Bedrock.
  2. Email Sender Backend: Another Lambda function handles the actual email-sending process by integrating with Amazon SES (Simple Email Service).

CloudWatch

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

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

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)

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.

How Amazon Q Developer was used in building our app

  1. Project Overview: It allows us to view the entire project and helps refactor code to improve modularity.
  2. Debugging Powerhouse: It's a fantastic tool for debugging, especially for asynchronous code.When implementing a filter switch for changing planetary models, we initially faced an issue: switching to the right worked fine, but switching back to the left caused the model to disappear. Q cleverly identified the problem as related to the rendering order of models.
  3. Logging Suggestions: It provides highly useful logging recommendations to improve troubleshooting.
  4. Code Adaptation: It can modify code based on specific requirements effortlessly.
  5. Meaningful Comments: The generated code includes insightful and meaningful comments, making it easier to understand and maintain.
  6. Convenient Code Editing: By pressing Cmd + I, we can directly edit the code for instant improvements.
  7. Enhanced Front-End Design: It helped to transform the user submission form from a basic layout into a visually engaging interface resembling a real paper letter, complete with a folded corner, texture and seal, creating a more immersive and polished user experience.
  8. Loading Animation Design: It creates several visually appealing loading animation, enhancing user experience during backend processes such as refining the greeting letter content and sending the email, ensuring smooth and engaging interactions.
  9. Enhanced 3D Environment: It  upgrades the 3D scene by adding light beam meshes and particle effects, transforming the scene from a basic setup to a vivid and visually captivating space.

Our Best Team

Lena Du, Jialu Sun, Yijing Wu, Kristin Wu
 

Comments