Scrapbook

Inspiration
Login Page
Create Account Page
Home Screen with Search Bar
Figma Design

Inspiration

Each school or university has a plethora of student clubs and organizations, many of which host multiple events per week. In the digital age, it almost feels as if those events never happened if not properly documented and shared. Current photo-sharing platforms have no organization for photos, and users must comb through every single photo individually to find pictures within their organization that are relevant to them. Scrapbook provides an interface for students to share and find photos from all of their organization’s events in one place, revolutionizing the way students keep memories alive.

What it does

Scrapbook enables users to keep all pictures of themselves from their various club events in one centralized platform. Uploaded images are tagged, which allows them to be searched for within their respective clubs based on varying factors (person, location, items). This provides users quick access to only photos that they are interested in, cutting down time spent searching for and organizing photos individually.

How we built it

We used Figma to design the layout of our website. We developed the front end of Scrapbook using Next.js, TypeScript, Tailwind CSS, and HTML. Images were uploaded to Amazon S3, where we then automatically tag them with custom metadata generated by a lambda function (as well as index the image and its metadata in OpenSearch). That lambda function used Amazon Rekognition in order to add description labels of the image, as well as 'tag' faces using facial recognition. For querying and filtering the tags in our website, we used OpenSearch. OpenSearch allows us to process any search requests using natural language.

For data management and authentication, we used AWS RDS as well as AWS Cognito. AWS Cognito allowed us to streamline our authentication process.

As an easter egg, we added a 'personalized' yearbook feature that can provide you with fun collages of photos and AI-generated captions towards the end of the academic school year. For this, we use Amazon Bedrock's Claude 3 Sonnet to group images into discrete categories by analyzing the image tags. We then use Claude to generate a fun caption to encapsulate the common theme for each category. Using those categories, a collage can be made.

Challenges we ran into

We encountered several challenges while developing our website. First, we struggled to narrow down the scope of features for our project. Due to time constraints, we had to cut a few features we originally hoped to implement. Additionally, our initial design was too vague to guide implementation effectively, so we had to invest time in creating a clearer and more structured plan. Another challenge was with image uploads. Our website now supports PNG and JPEG formats, but getting that to work took additional effort to handle properly. We also faced technical hurdles with binary file handling and hashing, which involved significant debugging and research to resolve.

Accomplishments that we're proud of

We are incredibly proud of successfully implementing a wide range of AWS features on our website! Despite having limited prior experience with many of the services AWS provides, we were able to integrate tools like S3, OpenSearch, and Lambda effectively. We’re also proud of the frontend development, which was built using tools like Next.js and Tailwind CSS—both of which were new to Kayla, Sienna, Elizabeth, and Rosalie. Overcoming these learning curves while delivering a cohesive and polished platform is a significant accomplishment for our team.

What we learned

Throughout the development process, we gained valuable experience in working with AWS services like S3, Lambda, and OpenSearch, deepening our understanding of how these tools can be integrated to build scalable and efficient web applications. We also improved our frontend development skills, particularly with Next.js and Tailwind CSS, as we learned to design and implement user-friendly interfaces. Additionally, we discovered the importance of clear planning and effective communication when tackling a complex project, especially when incorporating unfamiliar technologies. This experience taught us not only technical skills but also how to adapt and problem-solve under tight deadlines.

What's next for Scrapbook

We have many future aspirations for Scrapbook. First, we would like to implement an app in addition to the website, providing a more user-friendly interface. Additionally, our implementation only accepts JPEG and PNG photo types, so being able to submit HEIC as well would be a great addition. Finally, we would like to implement a security feature for the clubs, where a club admin could control who lets in members to view their club’s photos.