Building an eCommerce Platform for a Perfume Brand
A full-stack eCommerce platform with advance features & approaches focus on foundation architecture
Project Overview
The Problem: A growing perfume brand needed a scalable eCommerce platform to expand globally, but struggled with rigid catalog systems and high developer dependencies. The Solution: I built a full-stack eCommerce ecosystem from scratch using Next.js, Kotlin/Spring Boot, and PostgreSQL, featuring dynamic multi-currency rates, an intuitive custom rich-text editor, and secure RBAC. The Result: The platform achieved 99.9% uptime, reduced manual updates by 40%, and enabled seamless multi-region operations.
Technical Excellence
A deep dive into the engineering decisions that ensure the platform remains resilient under load and maintainable for future expansion.
- Distributed Backend: Kotlin (Spring Boot) providing type-safety and superior multi-threading via Coroutines.
- Modern Frontend: Next.js 16 with Turbopack for sub-second hot-reloads and optimized production builds.
- Type-Safe Contracts: Shared TypeScript interfaces and strict API validation using Zod/JSR-303.
- Performance Layer: Multi-tier caching with Redis (session/catalog) and Next.js Data Cache.
- Real-time Infrastructure: WebSocket-based admin notifications for order management and catalog sync.
Visual Showcase
As i already mentioned i'm an android developer too, so made something like Shared element transitions in Compose that makes the navigation between pages super fluent & smooth. I made this before next js make View Transition witch it's still an experimental feature in next js.
Showcasing marketplace phase of the website with multi-currency & multi-language support.
Showcasing Special Text editor inside article crud of administrative area. actually, this special text editor that appears as a modal has used for content creation and it will apply the format syntax regex by highlighting and clicking on any specific format token like bold, italic, highlight, shimmer, and etc.
Showcasing product page witch can have video for its hero section, and also, as you can see, the brand tape is moving while scrolling, and the special text format also used in here belong the criterias (in data layers, I defined product type and each product type has some criteria with their unit, range, and visibility in chart witch makes each product to have a type and values for the criteria types. more information written more below). Also, i made an optional feature for product that took the raw transparent object picture of the product and represent it in a showcase with animated bobbles and headline witch is dynamic and moves though the z layers of the showcase stack.
Another phase of the website called Aromatherapy. On the aromatherapy page, i provided a list of meditation sessions (crudable in administrative area from the locales to the audio, cover, texts, and etc.) witch each session has their own audio that allows customers to come, set a timer, and play a session witch at first, they'll do breathing exercise that has a super cool animated visuals and after that, the audio will be play and also, I also made some particles around the page and animated countdown to make more harmony.
Showcasing the metal animated company logo in About us page of the website.
Architecture & Trade-offs
Engineering is about choosing the right trade-offs. Here is why I chose specific technologies over common alternatives.
Kotlin/Spring Boot vs. Node.js/Express
While Node.js is excellent for I/O bound tasks, I chose Kotlin for the backend to leverage its strict type system and superior handling of complex business logic. Spring Boot's robust ecosystem for security and database transactions reduced the risk of 'callback hell' and state inconsistencies in the multi-currency checkout flow.
SCSS Modules vs. Tailwind CSS
I opted for SCSS Modules to maintain a clean separation between logic and styling. This allowed for a highly customized design system using mixins and variables that would have been overly verbose and harder to maintain in a utility-first framework like Tailwind.
SQL (PostgreSQL) vs. NoSQL (MongoDB)
Given the transactional nature of eCommerce (orders, inventory, payments), PostgreSQL was the clear choice for its ACID compliance and relational integrity, ensuring that inventory counts never drift during high-concurrency checkout events.
Deployment & CI/CD
Automation is the foundation of reliability. The platform is engineered for zero-downtime deployments.
- Frontend Deployment: Hosted on Vercel for global Edge distribution and optimized SSR performance.
- Backend Infrastructure: Containerized with Docker and deployed to a scalable cloud environment.
- CI/CD Pipeline: Automated GitHub Actions workflow for linting, type-checking, and unit testing before every deployment.
- Database Management: Managed PostgreSQL with automated daily backups and point-in-time recovery.
- Security Headers: Strict Content Security Policy (CSP), HSTS, and X-Frame-Options enforced at the edge.
Results & Impact
Automated catalog management and localized pricing reduced manual content updates by 40%, allowing the team to focus on marketing rather than data entry.
Shipped 5-language support and multi-currency checkout, positioning the brand for immediate international expansion and multi-region revenue streams.
Leveraged Spring Boot's robust transactional model and Vercel's edge network to maintain high availability during peak seasonal traffic.
Standardized component design and CI/CD automation doubled the speed of feature delivery from prototype to production deployment.
Implemented strict security headers and atomic database transactions to ensure 100% integrity for sensitive customer data and payment flows.
Maintained a high-quality codebase through strict type-safety and Clean Architecture, reducing long-term maintenance costs and developer onboarding time.
The Challenge
Building an eCommerce platform that’s easy to manage, scales globally, and stays maintainable as the catalog and content evolve. Below this page, i've explained how i managed the challenges and made solutions for them.
- Reduce engineering dependency: Make routine content/catalog updates self-serve for non-technical users.
- Internationalization without duplication: Keep language support scalable without cloning UI logic or creating SEO regressions.
- Predictable catalog rules: Model variants/pricing clearly so catalog changes don’t ripple into edge-case bugs.
- Performance budgets: Keep browsing responsive as media and inventory grow.
- Checkout that’s easy to debug: Keep the flow consistent so issues are diagnosable and fixes are low-risk.
- Lower release risk: Prefer small changes with automated checks so updates remain reviewable and reversible.
- Baseline security: Validation, sensible permissions, and strict browser policies where applicable.
Key Decisions
I optimized for three outcomes: maintainability, speed, and clarity. The guiding rule was simple: keep the system predictable and only add complexity when it reduced long-term risk or operational cost.
Frontend decisions (clarity first)
Used Next.js and React with patterns chosen to avoid hidden coupling and reduce UI regressions.
- Kept routing/data loading predictable to reduce edge cases and debugging time
- Preferred local, explicit state and fixed re-render hotspots in key flows
- Standardized component patterns so new screens match existing behavior
- Used motion only when it communicated state change; avoided decorative animation debt
- Defined responsive rules early to prevent breakpoint regressions
- Built structured editing so published content stays consistent and reviewable
Backend decisions (predictable APIs)
Backend built with Kotlin (Spring Boot) with an emphasis on clear contracts, validation, and business rules that are easy to change safely.
- Defined API contracts with validation and consistent errors to reduce ambiguous edge cases
- Implemented role-based access where needed to keep staff workflows safe
- Added caching (Redis) on read-heavy paths to keep browsing responsive
- Used real-time only where it reduced confusion (e.g., admin feedback loops)
- Added CI checks and targeted tests around checkout and CMS-critical flows
Internationalization (scales without copy-paste)
Implemented internationalization in a way that stays maintainable as languages and content expand.
- Centralized translations to avoid drift and duplicated copy
- Kept localized routes/metadata consistent to preserve SEO fundamentals
- Made translations part of the publishing workflow so updates remain practical
Data model (reduce surprise bugs)
Used PostgreSQL with explicit catalog rules to keep pricing/variants predictable and reduce data-driven edge cases.
- Modeled products/variants/orders with clear constraints so rules are enforced in one place
- Added indexes based on real query paths to keep key pages responsive
- Used migrations/versioning to keep schema changes safe and repeatable
- Prioritized data integrity to prevent silent corruption and hard-to-reproduce bugs
Delivery (lower release risk)
Set up a build and release workflow that supports safe iteration.
- Made lint/typecheck/build part of CI to reduce broken deploys
- Containerized where it reduced environment differences
- Added practical logging/monitoring hooks for faster diagnosis
- Shipped in small steps so changes were reviewable and rollbacks were straightforward
Conclusion & Reflection
This project reinforced a simple lesson: the best results come from balancing product needs with engineering discipline. The goal wasn’t to be flashy—it was to build a dependable platform the business can run daily, with a user experience that feels clear and intentional.
Key Takeaways
- Make content self-serve: Good tooling reduces back-and-forth and keeps teams moving.
- Keep the model predictable: Clear rules for variants/pricing prevent fragile edge cases.
- Use performance budgets: Treat animations and media as a cost—add them only when they help.
- Ship in small steps: Smaller releases are easier to review, test, and roll back.
- Write for future you: Naming, structure, and constraints matter as the platform grows.
Related Case Studies
Tomorrow's Cuisine App Architecting a High-Concurrency Social Recipe Ecosystem
A modular Android & Backend platform bridging the gap between social engagement and algorithmic recipe discovery.
Call Blaze App Low-Level Systems Engineering: Android Call Automation
Bypassing Android OS restrictions through root-level ALSA integration and system-service manipulation.