ProjectsLymetales

Lymetales

Personalized Children's Book E-commerce Platform

Next.js 16React 19TypeScriptTailwind CSSReact Hook FormZod

Team Size: 3

My Role: Frontend Developer

Case Study Overview

Lymetales is a modern e-commerce storefront for a personalized children's book brand. The platform combines dynamic marketing content, product discovery, and a book personalization flow (customizing a child's name, skin tone, and hair color) with a complete cart, coupon, and checkout experience. It also supports a secondary brand identity (Beebook) through shared configuration, allowing the same codebase to power multiple storefronts.

Project Overview

An e-commerce platform that lets parents create fully personalized storybooks — matching a child's name, appearance, and identity — to spark imagination and build confidence.

Highlights

Personalized storybook builder with name, skin tone, and hair color customization
40-page illustrated books with archival-quality print production
Thematic book collections — adventure, holiday, and family-centric storylines
Digital gift card system for gifting personalization to parents
Dynamic, content-driven homepage with hero banners, testimonials, and FAQ
Multi-brand support (Lymetales / Beebook) via a single configurable codebase

Features

Personalized Book Builder

›Customizable character name, skin tone, and hair color
›Live preview of personalization choices
›40-page heavily illustrated storybook format
›Archival-quality print production

Storefront & Discovery

›Dynamic homepage with hero banners and feature highlights
›Category-based book browsing (adventure, holiday, family themes)
›Latest products, gift card, and promo sections
›Testimonials and newsletter signup

Cart & Checkout

›Shopping cart with promotion/coupon support
›Order summary with success/failure handling
›Digital gift card purchasing flow
›Toast-based feedback and form validation

Multi-Brand Architecture

›Shared codebase powering both Lymetales and Beebook
›Environment-driven theming and branding
›Shared Laravel backend across brand storefronts

My Responsibilities

Built the full frontend storefront using Next.js and TypeScript
Implemented the personalized book customization flow
Developed cart, coupon, and checkout experience
Built a centralized API fetch layer for server-side data
Implemented multi-brand theming/config system
Handled deployment across Vercel and cPanel environments

UI System

Reusable UI components for product cards, forms, and modals

Consistent design system across homepage, shop, and checkout

Mobile-first responsive layout

Toast notifications and animated feedback states

Architecture

Next.js App Router structure with route-based organization

Centralized API layer with cookie forwarding (apiFetch)

Server actions for homepage and product data fetching

Type-safe data models via dedicated types directory

Performance

Server-side data fetching via Next.js server actions

Component-based rendering for scalable feature growth

Optimized asset handling across Vercel and cPanel deployments

Results

✦Polished, conversion-focused shopping experience for a personalized gifting brand

✦Scalable multi-brand architecture reused across Lymetales and Beebook

✦Smooth personalization-to-checkout customer journey

Summary

A full e-commerce frontend for a personalized children's book brand, combining dynamic content, book personalization, cart/checkout flow, and multi-brand theming — built with Next.js, TypeScript, and a shared API layer.

Live system is publicly accessible. Source code is private and not publicly available.

Project Details

My Role

Frontend Developer

Project Type

E-commerce Web Application

View Project

Full Tech Stack

Frontend

Next.js 16React 19TypeScriptTailwind CSSRadix UIHeadless UIMotionlucide-react

Backend

Laravel

Forms & Validation

React Hook FormZod

UI & Feedback

Sonner