The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Concept :Diet Master ā The Future of Smart Diet Tracking (Rapid MVP Demo)
š Overview (Name is not finalized it is a imaginary name based on meaning not; branding Diet Master)
Itis a modern, AI-powered nutrition and diet tracking application designed to take the friction out of healthy eating. Built under a strict 5-hour rapid prototyping challenge, this project demonstrates the ability to quickly conceptualize, design, and deploy a sleek, premium-feeling mobile web experience using Bubble.io.
š” The Challenge
The goal was to design a beautiful, modern alternative to clunky legacy diet apps in record time. For this challenge, I focused entirely on delivering a high-fidelity, interactive frontend demo. The objective was to flawlessly showcase the user journey, the core UI/UX interactions, and the app's ultimate value proposition without getting bogged down by immediate backend complexities.
āØ Key Features Showcased:
š Smart Dashboard: A beautifully clean daily summary featuring a visual calorie ring, macro-nutrient progress bars (Protein, Fat, Carbs), and quick-action logging buttons.
šø AI Food Scanner Experience: A cutting-edge camera interface demonstrating how users can seamlessly log food using computer vision and intuitive UI elements.
š„ Personalized Meal Planner: Horizontal scrollable diet categories (Keto, Balanced, Vegan) combined with rich, high-quality recipe cards and prep times.
š Recipe Discovery: A clean, 2-column grid layout designed for users to easily explore meals based on their dietary goals and available ingredients.
š ļø Tech Stack & Tools:
Platform: Bubble.io (Mobile-responsive web app)
Design: Custom UI/UX focusing on modern "Card" layouts, soft drop shadows, and a fresh, healthy color palette (mint greens and crisp whites).
Workflow: AI-assisted layout generation paired with intense manual UI refinement, spacing, and styling.
šÆ My Role:
Lead Developer & UI/UX Designer. I handled the end-to-end conceptualization, rapid frontend development in Bubble, typography hierarchy, and the interactive workflow logic to bring the demo to life.
project link;https://smart-app-66219.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=START
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
App name mini app
Branch vision id: version test https://mini-app-41642.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=Home
Category: lifestyle
The idea behind of this app is to help people and families manage their meals as theyāre busy or working
Meal planning for busy families is such a practical and underserved problem space! The clean weekly view looks really intuitive, and building this on Bubble's native mobile editor is impressive. This could easily fit into a daily routine ā especially with spring being a great...
Tomorrow Iāll finally be sharing a new case study for a large award-winning influencer marketing agency based in the US š
Definitely one of those projects where I managed to combine a strong visual direction with a very user-oriented experience without sacrificing either side.
I worked on the project as a design lead ā building the overall design concept, shaping the final visual direction, and designing both the desktop and mobile experience from start to finish.
A lot of cool details, interactions, and decisions went into this one, and honestly the clientās reaction to the final design result made the whole process even more satisfying.
Full case study drops tomorrow :)
Amazing work
PROJECT NAME
AION PYR ā The Aitherioi
CONCEPT / PROJECT DESCRIPTION
AION PYR is a one-minute instrumental progressive-rock film by The Aitherioi, a fictional trio of pale pre-terrestrial beings older than Earth.
They were here when the planet was born from heat, basalt, and lava, and they remain calm as that world dissolves into stardust. The film follows them performing inside a collapsing volcanic cathedral while lava, steam, lightning, and stone slowly give way to void.
The music is built only from guitar, bass, and drums: slow, heavy, repetitive, bass-led, and cathartic.
PROCESS
I started by defining The Aitherioi: a fictional pre-terrestrial trio with a shared visual identity, pale ethereal bodies, severe faces, long dark hair, and calm expressions.
Then I built the visual system around contrast: fossil-dark basalt, living lava, white steam, lightning, and their stillness inside collapse.
I created character assets, face studies, wardrobe references, instrument references, environment plates, keyframes, and individual video scenes.
The music was built first as a strict one-minute instrumental progressive-rock track using only guitar, bass, and drums. The video was then structured to follow the track: bass opening, wide trio, basalt corridor, guitar catharsis, drummer pulse, matter dissolution, and final void.
Finally, I stitched the scenes together with clean cuts so the film follows the music without extra transitions or title cards.
FEEDBACK ON BUILDING WITH MELIUS
Melius worked best as a production canvas rather than a single-prompt generator.
The node-based workflow made it possible to build the project in layers: character identity, environments, audio, keyframes, video clips, and final assembly. That helped keep the concept coherent while still allowing corrections when individual shots needed refinement.
The biggest challenge was visual continuity, especially keeping The Aitherioi consistent across scenes. The most useful approach was creating strict reference assets first, then using them as anchors for keyframes and video generation.
This is raw power, like it so much!
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid.Ā Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. Whatās yours right now?