Inspiration
I'll be honest. As a designer, I dread making my portfolio. Even worse, I'm one of those designers who insist on making my portfolio unique. If I'm going to make a permanent home for the Apps I build, I might as well build the whole Store, right?
Also I'm a big fan of Jakob's Law
What it does
It's literally a 1:1 replica of the App Store, filled with the apps you made. In the new age where we have vibe coded more apps than we know what to do with, an App Store Portfolio helps to showcase your apps in a stunning yet familiar manner. Take it as my final love letter to iOS18 :')
How we built it
Figma to map pixel-perfect 1:1 screens → Figma Make to make individual components, used Aura to tweak pixel perfection → Exported Code into Bolt, assemble pieces together using prompting → re-factor and re-evaluate specific parts using Cursor → export back code into Bolt → Figma to re-calculate accuracy of screens. Repeat.
I used 3 separate bolt projects for this.
Challenges we ran into
The Card animation on the Today page. Card expanding was manageable. But dragging to dismiss was a pain. Prompting micro-interactions without knowledge of coding motion was like being trapped in Prompt Hell.
Creating everything from scratch vs just using the easy way out. E.g. in my first Bolt file, I created the entire iphone bezel using code. This was because I wanted to make a super duper long responsive iphone frame with bigger screens. And also, it was to challenge myself. 7 million tokens later I had to pivot to just using a simple image of the iphone bezel, as the coded bezel was causing more trouble down the line.
Accomplishments that we're proud of
- Managing to recreate the iOS18 App Store with 98% accuracy.
- Just the fact that you can load it up on Safari on mobile is cool.
- Not giving up on prompting all the micro interactions to perfection.
What we learned
- As a solo designer on this project, I sincerely learned so much about vibe coding; trial by fire.
- I learned the best workflow to vibe code components and pages atomically, lest it would more likely blow up in later prompts. I now have a "process" for vibe designing.
- I learned it's totally possible to create a f*cking App Store on web, by sheer will of vibe coding.
What's next for App Store Portfolio
- Dark mode (groans)
Built With
- aura
- cursor
- figma
- github
Log in or sign up for Devpost to join the conversation.