This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
Hi, I’m Fatiya Labibah, an Informatics Engineering student who believes that portfolios shouldn’t be boring static pages. They should be an experience.
I love music and I love code. So, I asked myself: “What if recruiters could ‘play’ my projects like they play their favorite songs?”
The result is a fully interactive, full-stack Spotify-Themed Portfolio that blurs the line between a music app and a professional resume.
Portfolio
Live Demo on Google Cloud Run:
https://my-spotify-portfolio-891617309900.asia-southeast1.run.app
(Recommended: Click the Play Music button to hear my favorite song!)
How I Built It:The AI-First Workflow
1. Brainstorming with Gemini 3 Pro
I used Gemini 3 Pro as my Lead Architect. I fed it the concept: “Create a Spotify clone, but for a developer resume.”
Gemini helped me map out the complex data schemas for MongoDB—defining how Projects, Certificates, and Experience should relate to each other, ensuring the data structure was scalable from day one.
2. “Antigravity” Development
I adopted an AI-First Development Environment (Antigravity approach). Instead of writing boilerplate code manually, I utilized AI to generate the intricate UI components, such as the responsive Sidebar logic and the Player Bar controls.
Challenge: Making the sidebar remember its state (collapsed/expanded) across refreshes while being responsive on mobile.
AI Solution: Gemini suggested a custom hook using localStorage and resize event listeners that perfectly mimicked the native app feel.
3. Deployment with Gemini CLI & Cloud Run
The most daunting part was deployment. How do you deploy a MERN stack (Frontend + Backend) efficiently?
I used AI assistance to craft a Multi-Stage Dockerfile. It builds the React frontend, optimizes the Node.js backend, and bundles them into a single lightweight container.
This container was then pushed to Google Artifact Registry and deployed to Google Cloud Run using gcloud commands generated with AI assistance, ensuring a serverless, scalable, and cost-effective deployment.
The Tech Stack
- Frontend: React (Vite), Tailwind CSS, Framer Motion (for those buttery smooth transitions).
- Backend: Node.js, Express.js.
- Database: MongoDB Atlas (Mongoose).
- Media Engine: Cloudinary (Auto-optimizing images to prevent database bloat).
- Infrastructure: Docker & Google Cloud Run.
What I’m Most Proud Of
1. The “Player Bar” Navigation
- Instead of standard pagination, I built a Player Bar.
- Play/Pause: Actually toggles the project demo mode.
- Next/Prev: Skips through my project list.
- Share: Generates a Deep Link (e.g., /?id=campgear) so you can share a specific “track” (project) with others.
2. A Real, Hidden Admin CMS
- This isn’t just a hardcoded JSON file. I built a fully functional Admin Dashboard protected by authentication.
- I can Create, Read, Update, and Delete (CRUD) projects, skills, and certificates directly from the UI.
- Image Upload System: I built a custom uploader that converts images to Base64, sends them to the backend, uploads to Cloudinary, and saves the optimized URL to MongoDB—all in one click.
3. “Pixel-Perfect” Responsiveness
- Replicating Spotify’s complex grid layout on mobile was tough.
- Desktop: Collapsible sidebar and expandable “Now Playing” details.
- Mobile: The sidebar transforms into a bottom sheet, and the grid adapts to touch interactions.
Final Thoughts
This portfolio represents my new year and new direction:
- More intentional design
- Stronger engineering fundamentals
- Real cloud deployments
- Smarter use of AI
If there’s one thing I want judges to take away, it’s this:
I don’t just build projects.
I build systems — and I ship them.
Thank you for this challenge 🚀
It pushed me beyond “just frontend” and into real-world cloud engineering.
Tags
#devchallenge #googleaichallenge #portfolio #gemini #cloudrun