Essam Al-Hamali
Full-Stack Engineer | Mobile, Web & SaaS Products
New to Contra
Essam is ready for their next project!
š NIKE ā High-Impact Footwear E-Commerce Experience
A modern footwear e-commerce interface designed around bold product presentation, clean interactions, and a frictionless shopping journey.
This project is a responsive footwear e-commerce experience built to combine strong visual hierarchy with practical shopping interactions.
The interface focuses on making products the center of attention ā using bold typography, structured sections, product-focused cards, promotional moments, and responsive layouts to create a polished modern shopping experience.
šÆ My Role
Frontend Developer & UI Engineer
I designed and developed the frontend experience with a focus on:
ā¦ Product-focused UI
ā¦ Responsive web design
ā¦ Reusable React components
ā¦ E-commerce interaction patterns
ā¦ Visual hierarchy & composition
ā¦ Clean, maintainable frontend architecture
āØ The Experience
š Product-First Shopping
Products are presented as the primary visual focus, with dedicated product cards and structured sections designed to make browsing fast and intuitive.
š§ Clear Navigation
The experience uses a focused navigation structure to help users move naturally between the hero, products, services, offers, and supporting content.
š„ Promotional Sections
Special offers and featured content are given dedicated visual treatment to create stronger moments of attention without disrupting the shopping flow.
ā Social Proof
Customer reviews are integrated directly into the experience to reinforce trust and provide additional context around the products.
š± Responsive by Design
The interface adapts across desktop and mobile layouts while maintaining the same visual hierarchy and core shopping experience.
š§© Frontend Architecture
The project is structured around reusable React components and modular page sections, making the interface easier to maintain and extend.
The codebase separates reusable UI elements such as:
Buttons Ā· Navigation Ā· Product Cards Ā· Review Cards Ā· Service Cards
from larger page sections such as:
Hero Ā· Popular Products Ā· Services Ā· Special Offers Ā· Customer Reviews Ā· Newsletter Ā· Footer
This keeps the presentation layer organized while allowing individual pieces of the experience to evolve independently.
š ļø Built With
āļø React
ā” Vite
šØ Tailwind CSS
š§© Component-based architecture
š± Responsive design
š” The Result
The result is a clean, energetic footwear storefront that balances visual impact with usability.
Rather than relying on excessive complexity, the interface focuses on a few fundamentals:
Strong Products + Clear Hierarchy + Reusable Components + Responsive UX
š What This Project Represents
This project reflects my approach to frontend development: combining interface design, component architecture, and product thinking to create experiences that are visually strong while remaining practical and maintainable.
š Live Experience
Explore the live project ā (https://shoes-store-lemon.vercel.app/)
š» Source Code
View on GitHub ā (https://github.com/EssamCSE/shoes-store)
0
72
Check it out (https://contra.com/p/6ZZkmQk2-my-smart-accounts-a-privacy-first-personal-finance-app)
3
2
200
š NAFHA ā Luxury Fragrance, Reimagined
A cinematic e-commerce experience designed to make perfume feel as immersive online as it does in a premium boutique.
NAFHA is a luxury fragrance experience that combines storytelling, interaction, personalization, and e-commerce into a single cinematic digital journey.
Rather than treating perfume as a traditional product listing, the experience is designed around emotion, discovery, and sensory storytelling ā transforming the process of choosing a fragrance into something memorable.
šÆ My Role
Creative Technologist & Full-Stack Developer
I designed and developed the frontend experience from the ground up, focusing on the intersection of:
ā¦ Luxury digital branding
ā¦ Interactive product experiences
ā¦ Motion & micro-interactions
ā¦ Responsive frontend engineering
ā¦ E-commerce UX
The goal was simple:
Make the digital experience feel as premium as the product itself.
āØ The Experience
NAFHA is built around the idea that luxury fragrance should be experienced, not simply browsed.
š¤ Cinematic Luxury Interface
A visually rich interface inspired by high-end fragrance campaigns, combining elegant typography, dramatic composition, whitespace, and carefully choreographed transitions.
š® Interactive Fragrance Discovery
Instead of presenting users with a conventional product grid, the experience encourages exploration and discovery through interactive fragrance storytelling.
āļø Personalized Bottle Engraving
Users can personalize their fragrance bottle with a custom engraving, turning a digital product configuration into a more personal and meaningful experience.
š Sillage & Longevity Visualization
Fragrance characteristics are translated into visual information, helping users understand attributes such as:
Sillage Ā· Longevity Ā· Intensity Ā· Character
without overwhelming them with technical terminology.
ā” Motion-Driven Experience
Animations and transitions are used intentionally to create continuity between sections, products, and interactions ā making the interface feel alive rather than static.
š§ Design Philosophy
The experience follows three principles:
01 ā Emotion Before Information
Luxury products are emotional purchases.
The interface therefore prioritizes atmosphere, storytelling, and visual hierarchy before overwhelming the user with specifications.
02 ā Interaction With Purpose
Motion is not decoration.
Every interaction is designed to reinforce the product, guide attention, or create a stronger sense of connection.
03 ā Technology Should Disappear
The best experiences make complex frontend engineering feel effortless.
The user should never think about the technology behind the interaction ā they should simply feel that the experience is smooth.
š ļø What I Built
Frontend
āļø React
š§© Component-driven architecture
š± Responsive layouts
šØ Custom UI system
āØ Interactive animations
š±ļø Micro-interactions
š Dynamic product interactions
Experience
š§“ Product exploration
āļø Bottle personalization
š Fragrance attribute visualization
šļø E-commerce interaction patterns
š¬ Cinematic transitions
š± Mobile-responsive experience
Deployment
ā² Vercel
ā” Performance-focused frontend delivery
š” The Result
NAFHA demonstrates how a product website can move beyond the traditional "catalog + checkout" model.
Instead, the product becomes the protagonist.
The result is a digital experience that combines:
Luxury Branding + Motion + Interaction + Product UX + Engineering
into a single cohesive experience.
š What This Project Represents
This project reflects the kind of work I enjoy building at the intersection of technology, design, and product thinking.
I'm particularly interested in creating digital products where engineering is not just about making interfaces functional ā but about using technology to create better experiences, stronger brands, and more memorable products.
š Live Experience
Explore NAFHA ā (https://nafah-luxury-perfume.vercel.app/)
A digital fragrance experience built to feel less like shopping ā and more like entering a world.
1
92
My Smart Accounts ā A privacy-first personal finance app
1
2