your wrapped

Inspiration

Spotify Wrapped is a cultural phenomenon that helps users reflect on their year through music. I wanted to bring that same personalized, data-driven experience to life itself, allowing people to showcase their quirks, achievements, and moments in a fun and shareable way. The idea was to combine AI, creativity, and intuitive design to build something truly engaging.

What it does

Your Wrapped allows users to create personalized, Spotify Wrapped-style visualizations for their life. Users can:

Generate custom life stats based on their mood, achievements, and reflections.
Select predefined templates or AI-generated designs.
Share their "wrapped" via unique URLs or download them as images.
Experience real-time previews while editing their custom cards.
With shareable themes, layouts, and social-ready formats, Your Wrapped makes it easy to tell your story.

How I built it

I built this application using the following tools and technologies:

Next.js: For a performant and scalable frontend.
Google Gemini Pro: To generate AI-powered personalized stats and content.
Neon PostgreSQL: A serverless Postgres database for storing user data securely.
Vercel Blob: For handling seamless image storage.
Tailwind CSS: For responsive and modern styling.
TypeScript: To ensure type safety and robust development.
API routes were used for seamless integration of Gemini and Neon DB, while Vercel was leveraged for hosting and real-time previews.

Challenges I ran into

Integrating AI (Gemini Pro) to generate meaningful, personalized stats required careful API design and testing.
Setting up Neon PostgreSQL and optimizing it for real-time data access was initially challenging as this was my first time using serverless Postgres.
Implementing real-time previews and maintaining synchronization across the frontend and backend was complex but rewarding.

Accomplishments that I'm proud of

Successfully integrating AI-generated content to produce creative and meaningful life stats.
Building a highly customizable, user-friendly interface with real-time previews.
Implementing scalable backend solutions with Neon DB and Vercel Blob for secure and efficient data and image storage.
Creating a shareable, engaging platform that mirrors the cultural excitement of Spotify Wrapped.

What I learned

How to effectively integrate AI APIs (Gemini Pro) into a web application for personalized experiences.
The importance of user experience in making customization and sharing seamless.
Leveraging serverless solutions like Neon PostgreSQL and Vercel Blob for scalability and performance.
Advanced React and TypeScript patterns to streamline development and improve code quality.

What's next for Your Wrapped

Adding more AI-generated features like life predictions or "next year goals."
Expanding the template library to include more creative layouts and themes.
Introducing social gamification features, like comparing Wrapped stats with friends.
Exploring deeper analytics and data visualization options for user insights.
Refining mobile optimization to enhance accessibility and reach.