Luxury Beauty E-Commerce Platform
Crystal Oil
2024
Frontend Developer
6 months
Premium Arabic-localized e-commerce platform for natural oils and luxury soaps with RTL support and culturally-appropriate design.
Project Name: Crystal Oil Type: E-Commerce Website Industry: Beauty & Cosmetics Market: Arabic-speaking regions (Morocco) Technology Stack: React, TypeScript, Vite, TailwindCSS, shadcn/ui Launch Date: 2024
Crystal Oil is a modern e-commerce platform specializing in natural oils and crystal-infused luxury soaps. The website delivers an elegant shopping experience tailored for Arabic-speaking customers, featuring premium pheromone oils, rose oils, and exclusive product bundles.
The client needed a sophisticated e-commerce presence to showcase their premium natural beauty products to an Arabic-speaking audience. The challenges included:
crystal-modern-makeover/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── Benefits.tsx # Benefits showcase section
│ │ ├── Categories.tsx # Product categories
│ │ ├── FAQ.tsx # Frequently asked questions
│ │ ├── Footer.tsx # Site footer
│ │ ├── Guarantee.tsx # Money-back guarantee
│ │ ├── Header.tsx # Navigation header
│ │ ├── Hero.tsx # Landing hero section
│ │ ├── HowToUse.tsx # Product usage guide
│ │ ├── OrderForm.tsx # Product order form
│ │ ├── Products.tsx # Product grid display
│ │ ├── Testimonials.tsx # Customer reviews
│ │ └── WhyChooseUs.tsx # USP section
│ ├── pages/ # Page components
│ │ ├── Index.tsx # Homepage
│ │ ├── Products.tsx # Products listing
│ │ ├── ProductDetail.tsx # Single product view
│ │ ├── About.tsx # About page
│ │ ├── Contact.tsx # Contact page
│ │ └── NotFound.tsx # 404 page
│ ├── data/
│ │ └── products.ts # Product catalog data
│ ├── hooks/ # Custom React hooks
│ ├── lib/
│ │ └── utils.ts # Utility functions
│ ├── App.tsx # Root application component
│ └── main.tsx # Application entry point
├── public/ # Static assets
│ ├── CRYSTAL OIL LOGO.png
│ ├── favicon.ico
│ └── reviews/ # Customer review screenshots
└── Configuration files
├── tailwind.config.ts # Tailwind customization
├── tsconfig.json # TypeScript config
└── vite.config.ts # Vite configuration
interface Product {
id: string;
name: string;
image: string;
price: string;
oldPrice?: string;
discount?: string;
description: string;
longDescription?: string;
featured?: boolean;
options?: {
label: string;
price: string;
highlighted?: boolean;
}[];
}
RTL Layout Complexity
Product Image Optimization
Form Validation UX
Mobile Performance
The Crystal Oil e-commerce platform successfully delivers a premium, localized shopping experience for Arabic-speaking customers. By combining modern web technologies with culturally-appropriate design, the project establishes a strong digital presence for a luxury beauty brand.
The modular architecture and type-safe codebase ensure the platform can scale with business growth, while the focus on performance and user experience positions Crystal Oil competitively in the beauty e-commerce market.
Tech Stack Summary: React + TypeScript + Vite + TailwindCSS + shadcn/ui + React Router + TanStack Query
Lines of Code: ~2,500 (excluding node_modules) Components: 50+ reusable components Pages: 6 main routes Build Time: < 10 seconds Bundle Size: Optimized for production
Repository: Private Deployment: Vercel Analytics: Vercel Analytics
Let's discuss how we can build something amazing together.
We developed a high-performance, visually stunning single-page application (SPA) with React and modern web technologies. The solution focuses on:
Bilingual Support
Product Showcase
User Engagement
Conversion Optimization
Educational Content