Bare Essence
A full e-commerce experience for a natural skincare brand, built entirely from scratch with HTML, CSS & JavaScript
A full e-commerce experience for a natural skincare brand, built entirely from scratch with HTML, CSS & JavaScript
Bare Essence is a demo e-commerce website for a natural skincare brand, created entirely from scratch using pure HTML, CSS, and JavaScript — no page builders, no frameworks, no templates. The project was built to demonstrate full end-to-end web development skills: from visual design and UI layout to functional shopping cart logic and a complete payment flow powered by Paystack. It is hosted on Netlify as a live portfolio showcase.
Building a believable, production-quality e-commerce experience with zero page builders or frameworks meant solving several problems from scratch:
I designed and built the entire website from the ground up, both visually and functionally:
From brand concept to a fully functional storefront
1. Brand Identity & Visual Direction: Designed a warm, natural aesthetic — earthy creams, terracottas, and soft greens to reflect the brand's philosophy of clean, plant-based skincare. Typography was chosen to feel premium yet approachable.
2. Page Structure & Layout: Planned the full homepage layout: hero, feature highlights, featured products carousel, shop by category, bestsellers carousel, brand philosophy section, newsletter CTA, and footer. Each section was designed to guide the visitor naturally toward a product purchase.
3. Interactive Components: Built product carousels with left/right navigation, a slide-in cart drawer with live item count, and a product detail modal with an image gallery, size selector, and quantity controls — all in vanilla JavaScript.
4. Checkout Flow: Designed a multi-step checkout experience: cart review → contact information → shipping address → order summary → payment. The Paystack modal was integrated to simulate a real payment experience, complete with a success confirmation screen.
5. Deployment: Connected the project to Netlify via drag-and-drop deployment. The live site is accessible at bareessence.netlify.app and serves as a live, interactive portfolio piece demonstrating full-stack front-end capability.
Featured Products and Bestsellers sections both use custom-built carousel components with navigation buttons, no third-party libraries required.
A slide-in cart drawer dynamically updates item count and subtotal as products are added. Users can adjust quantities or remove items in real time.
Clicking any product opens a modal with an image gallery, detailed description, size selector, and quantity picker before adding to cart.
Full checkout flow ends with a real Paystack payment modal, simulating a complete purchase experience from product selection to payment confirmation.
Warm earthy tones, clean whitespace, and a curated product grid communicate a high-quality, trustworthy skincare brand from the first scroll.
The layout adapts seamlessly across desktop, tablet, and mobile devices, built with a mobile-first CSS approach and fluid grid structures.
Bare Essence demonstrates that a polished, fully functional e-commerce experience can be built without WordPress, Shopify, or any framework — just clean, well-structured code. The project proves capability across the entire front-end spectrum: branding, visual design, UI engineering, and payment integration.
The live Paystack integration is a standout feature — it allows clients and recruiters to interact with a real checkout flow, experiencing exactly what their customers would. This makes it a highly effective portfolio piece for pitching web development services to e-commerce businesses.
Building everything from scratch also sharpened core JavaScript skills, particularly around DOM manipulation, event-driven state management for the cart, and asynchronous payment handling. These are skills that transfer directly to React, Vue, or any modern framework.
Experience the full shopping flow, from product discovery to Paystack checkout