Project Overview
Sourena Perfumery Platform is a full-stack eCommerce site I built from scratch for a growing perfume brand. I handled the entire stack — Next.js and React on the frontend, Spring Boot with Kotlin on the backend, and PostgreSQL for the database. The goal was to give the business a flexible, easy to manage platform that could scale internationally without constant developer intervention.
Key features include multi-language and multi-currency support (prices convert automatically based on live rates), a custom rich-text editor that goes beyond standard tools (icons, embedded media, advanced styling), and a proper role-based permission system so different team members can manage content, orders, or catalog safely.
I also set up Redis caching, real-time feedback via WebSockets, and a solid CI/CD pipeline with tests. On the frontend, I built a reusable design system with SCSS mixins and styled components to keep the brand look consistent and easy to evolve.
Technical Overview
A practical overview of the stack and some of the technical decisions that helped keep the product maintainable and fast.
- Frontend Stack: Next.js, React, TypeScript, SCSS Modules, Motion animations, custom Special Text editor
- Backend Stack: Kotlin (Spring Boot), PostgreSQL, authentication, and scheduled jobs where needed
- API Design: REST endpoints with consistent validation and predictable error handling
- State Management: React Context with targeted optimizations for heavy views
- Security: HTTPS, input validation, and strict browser policies (e.g. CSP) where applicable
- Testing & QA: Automated tests where it added value, plus careful manual QA for critical flows
- Monitoring: Logging and lightweight monitoring to catch issues early
- Infrastructure: Containerized deployment and a build/release process that supports safe iteration
- Media: Practical asset handling and optimization for performance and workflow
- Payments: Payment gateway integration with a focus on a smooth, secure checkout
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.
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
Results & Impact
Kept browsing responsive by treating media/animation as a budget and optimizing the critical paths.
Made routine content and catalog updates practical for non-technical users, reducing back-and-forth with engineering.
Shipped language support with a structure that stays maintainable as new languages and content are added.
Reduced regression risk with CI checks and smaller, reviewable releases.
Kept checkout consistent and easier to reason about, which makes issues easier to diagnose and fix.
Kept the codebase easier to extend by standardizing patterns and enforcing predictable catalog rules.
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
A Recipe & Social Network App for Food Lovers
A mobile app that provides recipes based on available ingredients, and its provide a social network for food lovers to share their recipes and cooking experiences and get feedbacks.
Call Blaze App
Automated Call Answering with Custom Audio Playback
A root-enabled Android app that auto-answers calls and plays selected audio directly into the voice stream — built for specialized communication scenarios.