๐ Ever found yourself panicking in the middle of a grocery run, wondering if you're overpaying for your weekly basket?
Built CartWise for the #FlowstepChallenge โ a smart AI-powered mobile app prototype designed to solve the real-world panic of grocery shopping!
What it does:
๐ฒ Smart Import: Simply paste the raw shopping list your partner texted you โ AI automatically parses it with 98% accuracy into product items.
๐ช Local Comparison: Instantly calculates your total basket cost across local chains (Lidl, SPAR, BILLA) to highlight the absolute cheapest option.
๐ Global Price Index: Compares your exact basket cost across Europe and worldwide.
Tech & Design Stack Behind the Build:
UI Engineering: @Flowstep (AI design engineer) with a fresh, Yuka-inspired visual style.
Prompt Engineering & Optimization: Leveraged Google Gemini and Claude to refine, split, and optimize complex UI/UX prompts for maximum design fidelity.
Product Overview & Demo: Used NotebookLM (https://notebook.google.com/) to analyze the concept and script a clear, compelling product presentation.
๐ Explore the public Flowstep prototype: https://app.flowstep.ai/file?activeFileId=ddbf4771-c01a-4888-983b-51c3daacd92d
#FlowstepChallenge #Flowstep #Gemini #Claude #NotebookLM #UIDesign #ProductDesign #Prototyping #AI
Project Description: Personal Website for Rafael Aleksandr โ Fitness Trainer (Austria)
Project Type: Personal branding website + service platform for a professional fitness trainer.
Project Overview
I designed and developed a powerful, modern, and masculine personal website for Rafael Aleksandr, an experienced fitness coach based in Austria. The goal was to create a strong personal brand that positions Rafael as a premium, results-oriented personal trainer who combines strength training, technique mastery, and individual approach.
The site reflects his philosophy: โYour One Stop For All Training Needsโ โ professional, motivational, and trustworthy.
Design Concept
Dark, Bold & Athletic Aesthetic: Deep black background with high-contrast white and electric blue accents โ creating a strong, masculine, and energetic feel.
Hero Section: Large, powerful black & white photography of Rafael in action (pull-up with chains) to immediately convey strength and professionalism.
Premium Minimalism: Clean typography, generous spacing, and focused content to keep user attention on the coach and his services.
Trust Signals: โ10+ Years Experienceโ, client benefits, and certificate highlights.
Key Sections Designed:
Hero with strong headline and CTA (โBook Nowโ)
โWhy Meโ / Benefits section
Services & Pricing
About Rafael
Testimonials
Contact & Booking
Technical Implementation
Frontend Stack:
CategoryTechnologyFrameworkNext.js 14 (App Router)LanguageTypeScriptStylingTailwind CSSAnimationsFramer MotionUI LibraryCustom components + Shadcn/uiFormsReact Hook Form + ZodIconsLucide React
Key Features Developed:
Fully responsive design (mobile-first)
Smooth scroll and micro-interactions
Online booking / consultation request form
Multilingual support (EN / RU) โ important for international clients
High-performance image optimization
SEO-optimized structure
Fast loading and excellent Lighthouse scores
Skills & Tools Used
Design:
Figma (full UI/UX + prototypes)
Strong personal brand identity
Athletic & luxury fitness web design
Development:
Next.js + TypeScript
Tailwind CSS
Framer Motion
Modern, clean, and maintainable code
Accessibility & performance best practices
Result:
A professional, conversion-oriented personal website that builds trust, showcases expertise, and makes it easy for potential clients to book training sessions. The design perfectly communicates strength, professionalism, and attention to detail โ exactly what a high-level fitness coach needs.