
Premium Moroccan Beauty E-Commerce Platform - Backend-less Architecture
Lemora Cosmetics - Moroccan Natural Beauty
2024
Full-Stack Developer
8 months
Built a sophisticated backend-less e-commerce platform using React 18 and TypeScript with creative integrations. Products are managed through CSV files with PapaParse, orders submit directly to Google Sheets API, customer communication flows through WhatsApp Business integration, and the entire experience is powered by TanStack Query for state management. The platform features 60+ custom components, comprehensive bilingual support with type-safe i18n, and advanced animations using Framer Motion - all without a single backend server.
Lemora demonstrates expertise in building sophisticated e-commerce platforms with creative architecture, eliminating backend costs while maintaining luxury user experience. Let's build something innovative together!
Zero traditional backend infrastructure. Products managed through CSV files, orders submitted to Google Sheets, and customer communication via WhatsApp. Eliminates server costs, database maintenance, and infrastructure complexity while maintaining full e-commerce functionality.
Dynamic product catalog loaded from CSV files with PapaParse. Automatic category detection, type-safe data pipeline with Zod validation, parallel loading with React Query caching, and easy non-technical updates through spreadsheet editing.
Direct order submissions to Google Sheets API with no database required. Real-time order tracking for business owners, automatic timestamp and order ID generation, familiar spreadsheet interface, and easy export for analysis.
Floating WhatsApp widget with custom branding and notification badge. Pre-filled messages for easy ordering, direct customer communication channel, and fallback ordering method. Provides personal touch perfect for luxury brand and Moroccan market.
1. CSV as Content Management System
2. Google Sheets as Database
Order Flow:
User Input → React Hook Form → Zod Validation →
Google Sheets API → Success/Error Handling →
WhatsApp Fallback Option
Benefits:
E-commerce functionality without backend infrastructure or database
Creative integration of Google Sheets API for order storage and CSV files with PapaParse for product catalog. Orders submit directly to spreadsheet, products load from versioned CSV files, and WhatsApp provides communication channel
// CSV Product Loading Pipeline
import { useQuery } from '@tanstack/react-query'
import Papa from 'papaparse'
const loadProductsFromCSV = async () => {
const response = await fetch('/data/products.csv')
const csvText = await response.text()
return new Promise((resolve) => {
Papa.parse(csvText, {
header: true,
complete: (results) => {
// Type validation with Zod
const validated = ProductSchema.array().parse(results.data)
// Category detection and deduplication
const products = validated.map(product => ({
...product,
category: detectCategory(product.name)
}))
resolve(products)
}
})
})
}
// React Query caching
const { data: products } = useQuery({
queryKey: ['products'],
queryFn: loadProductsFromCSV,
staleTime: Infinity // Products rarely change
})
// Google Sheets Order Submission
const submitOrder = async (orderData) => {
const formData = new FormData()
formData.append('timestamp', new Date().toISOString())
formData.append('orderId', generateOrderId())
Object.entries(orderData).forEach(([key, value]) => {
formData.append(key, value)
})
await fetch(GOOGLE_SHEETS_URL, {
method: 'POST',
mode: 'no-cors',
body: formData
})
}TypeScript code with full type safety
Custom React components
Complete e-commerce experience
English and French with type-safe i18n
Comprehensive English and French translations with type-safe i18n. Compile-time translation key validation, interpolation support for dynamic values, nested key structure, and persistent language preferences. Prevents missing translation bugs with IDE autocomplete.
Sophisticated animations using Framer Motion with scroll triggers. Custom animations (gradient-shift, float-slow, shimmer), GPU-accelerated transforms, optimized with will-change CSS, and conditional rendering based on viewport. Smooth 60fps animations throughout.
Premium rose gold, champagne, and cream color palette with CSS variables. Custom gradients (hero, rose gold CTAs, mesh backgrounds), sophisticated shadow system (soft, hover, glow, glow-intense), and subtle gradient animations for luxury feel.
3 main product categories (Hair & Scalp Oils, Body Oils, Skincare) with individual detail pages. Product bundles and gift sets with discount pricing, related product recommendations, category-based filtering, and comprehensive product information display.
Product quiz for personalized recommendations, customer reviews and testimonials showcase, social media gallery integration, comprehensive FAQ section with accordion, newsletter subscription, and contact form with real-time validation.
Integrated order form with React Hook Form and Zod validation. Real-time validation with visual feedback, loading states with animations, error recovery mechanisms, success confirmation with confetti effect, and WhatsApp fallback option.
Animated hero section with floating product previews, trust badges (100% Natural, Free Shipping, Cruelty-Free), announcement bar with rotating messages, glass morphism effects, parallax throughout, and responsive image galleries with Embla Carousel.
Code splitting by route, lazy loading for images and components, optimized animation performance, efficient re-renders with React Query, minimized bundle size with Vite, and fast initial page loads with edge network deployment.
3. WhatsApp Business Integration
60+ Custom Components:
Code Organization:
src/
├── components/
│ ├── ui/ # 40+ Shadcn components
│ ├── animations/ # Animation wrappers
│ ├── product/ # Product components
│ └── [feature].tsx # Feature components
├── pages/ # 9 route pages
├── contexts/ # React contexts (language, theme)
├── hooks/ # Custom hooks
├── lib/ # Utilities
├── locales/ # EN/FR translations
└── config/ # Configuration
Build Optimization:
Runtime Performance:
Luxury brand experience with smooth animations without performance degradation
Implemented Framer Motion with optimized animation configurations, GPU-accelerated transforms, scroll-triggered animations with Intersection Observer, and conditional rendering based on viewport
// Optimized Animation System
import { motion } from 'framer-motion'
import { useInView } from 'react-intersection-observer'
const FadeInWhenVisible = ({ children }) => {
const [ref, inView] = useInView({
triggerOnce: true,
threshold: 0.1
})
return (
<motion.div
ref={ref}
initial={{ opacity: 0, y: 50 }}
animate={inView ? { opacity: 1, y: 0 } : {}}
transition={{
duration: 0.8,
ease: [0.25, 0.1, 0.25, 1]
}}
style={{ willChange: inView ? 'transform, opacity' : 'auto' }}
>
{children}
</motion.div>
)
}
// Custom animations in Tailwind
const tailwindConfig = {
theme: {
extend: {
animation: {
'gradient-shift': 'gradientShift 15s ease infinite',
'float-slow': 'float 6s ease-in-out infinite',
'shimmer': 'shimmer 2s linear infinite'
},
keyframes: {
gradientShift: {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' }
},
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-20px)' }
}
}
}
}
}Type-safe bilingual support preventing translation bugs in production
Built custom type-safe i18n system with nested translation keys, compile-time validation, and IDE autocomplete support. Persistent language preferences with React Context
// Type-safe translation system
type TranslationKeys = {
hero: {
title: string
subtitle: string
cta: string
}
product: {
addToCart: string
outOfStock: string
price: (params: { price: string }) => string
}
common: {
loading: string
error: string
}
}
// Custom hook with type safety
const useTranslation = () => {
const { language } = useLanguageContext()
const t = <K extends keyof TranslationKeys>(
key: K,
params?: any
): string => {
const translation = translations[language][key]
if (typeof translation === 'function') {
return translation(params)
}
return translation
}
return { t, language, setLanguage }
}
// Usage with autocomplete
const Hero = () => {
const { t } = useTranslation()
return (
<div>
<h1>{t('hero.title')}</h1>
<p>{t('product.price', { price: '49.99' })}</p>
{/* ✅ Type-safe - IDE autocomplete */}
{/* ❌ t('invalid.key') - Compile error */}
</div>
)
}Managing complex form state with validation across bilingual interface
Integrated React Hook Form with Zod schemas and translated error messages. Form state persists during language switches with real-time validation feedback
// Bilingual form with validation
const orderSchema = z.object({
name: z.string().min(2, t('form.errors.nameRequired')),
email: z.string().email(t('form.errors.emailInvalid')),
phone: z.string().min(10, t('form.errors.phoneRequired')),
address: z.string().min(5, t('form.errors.addressRequired')),
city: z.string().min(2, t('form.errors.cityRequired')),
products: z.array(z.object({
id: z.string(),
quantity: z.number().min(1).max(10)
})).min(1, t('form.errors.noProducts'))
})
const OrderForm = () => {
const { t } = useTranslation()
const form = useForm({
resolver: zodResolver(orderSchema),
mode: 'onBlur'
})
const onSubmit = async (data) => {
try {
await submitToGoogleSheets(data)
toast.success(t('form.success'))
// Confetti effect on success
confetti()
} catch (error) {
toast.error(t('form.error'))
// Offer WhatsApp fallback
setShowWhatsAppFallback(true)
}
}
return (
<Form {...form}>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>{t('form.labels.email')}</FormLabel>
<FormControl>
<Input {...field} placeholder={t('form.placeholders.email')} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</Form>
)
}Zero backend infrastructure
Smooth GPU-accelerated animations
Complex e-commerce functionality is achievable without traditional backends by creatively leveraging existing services (Google Sheets, WhatsApp, CSV files).
CSV files provide perfect balance between developer control (Git versioning) and content flexibility (spreadsheet editing).
TypeScript with Zod validation catches errors at compile-time, significantly reducing production bugs especially in bilingual context.
Luxury animations and rich interactions are possible without degradation through GPU acceleration, lazy loading, and efficient React patterns.
When traditional solutions are expensive or complex, creative integration of free/affordable services can provide enterprise-grade functionality.