Your Wrapped

About the Project

Your Wrapped is a web application I developed that allows users to create personalized "wrapped" cards summarizing their year 2024. Inspired by Spotify's annual wrapped feature, this project gives users the ability to create their own custom wrapped cards and share them on social media.

Project Impact

Your Wrapped achieved significant traction during the December holiday season:

• 2,000+ unique visitors from around the world

• 882 total wrapped cards generated by users

• Trended on Twitter with many users sharing their cards

• Successfully launched on Product Hunt, marking my first release on the platform

Technical Implementation

Frontend: Built with Next.js and TypeScript, the application features a clean, intuitive interface that guides users through creating their wrapped card. The design is responsive and optimized for sharing on social media.

Backend: Leveraged Next.js API routes for serverless functions and NeonDB (PostgreSQL) for data storage. This combination provided a scalable solution that handled the traffic spike during the holiday season.

Image Generation: Utilized HTML2Canvas to convert user-created designs into shareable images. This approach allowed for dynamic content generation without requiring server-side rendering of images.

Deployment: Hosted on Vercel for seamless deployment and excellent performance. The serverless architecture ensured that the application could scale during peak usage periods.

Challenges

Image Generation: Creating consistent, high-quality images across different browsers and devices was challenging. I had to implement several optimizations to ensure that the generated cards looked good regardless of the user's device.

Database Scaling: As traffic increased, I needed to optimize database queries and implement caching strategies to maintain performance while keeping costs reasonable.

Social Sharing: Ensuring that cards looked good when shared on various social media platforms required careful consideration of Open Graph tags and image dimensions.

Learnings

Serverless Architecture: This project reinforced the benefits of serverless architecture for seasonal applications with variable traffic patterns.

User Experience: I learned the importance of creating a simple, intuitive flow that minimizes friction, especially for viral content.

Community Engagement: Launching on Product Hunt provided valuable feedback and exposure, highlighting the importance of community platforms for independent projects.

Analytics Implementation: The importance of setting up proper analytics from day one to track user behavior and optimize the application based on real usage data.

Future Plans

Enhanced Customization: Add more templates, themes, and customization options for users to create truly unique wrapped cards.

Integration with APIs: Allow users to connect their social media accounts to automatically generate content based on their activity.

Year-Round Usage: Expand the concept beyond the end-of-year format to allow for quarterly or monthly "wrapped" summaries.

Mobile App: Develop a companion mobile application to reach more users and provide a native experience.