Developing an E-Commerce Experience
Frontend Development
Role
Project Context
Frontend Developer
Personal project
Tool & Technologies
-
HTML5, React.js for component-based development.
-
CSS3 with custom design tokens for global styling.
-
Visual Studio for coding.
-
GitHub for version control & deployment
Key Features
Consistent Design System
-
Unified typography, spacing, and visual feedback across:
-
Navbar, Search, Product cards
-
Buttons, Cart, and Checkout flow
Responsive Product Pages
-
Product image with black-framed container, quantity control, “Add to Cart” interaction with feedback message.
Animated Visual Feedback
-
When items are added to cart, a success message appears briefly.
Interactive Shopping Cart
-
Quantity adjusters (+/-)
-
Live subtotal update
-
Delete, Save, Share functions
Order Summary Page
-
Visually clean and responsive with clear call to action.
Design Decisions
Grid Layouts:
Product pages use responsive grids with consistent card sizes to reduce visual noise.
Typography:
Harmonized font sizes between Cart and Summary pages to ensure a clean look.
Button Feedback:
All CTA buttons include hover/active transitions for better interactivity.
Color Palette:
Neutral backgrounds with vibrant accents (e.g. #0077FF, #FF6B35) to guide attention.