How We Built PORCELE: A Modern Next.js E-Commerce Platform for Smart Bathroom Technology
How We Built PORCELE: A Modern Next.js E-Commerce Platform for Smart Bathroom Technology
Building an e-commerce website for a physical product is very different from building a typical marketing website.
For PORCELE, the goal was to create a premium digital experience for smart toilets while also building the technical foundation required for dynamic products, shopping carts, checkout, payments, responsive interfaces, SEO, and scalable content.
PORCELE focuses on intelligent bathroom technology, with products that combine traditional bathroom functionality with features such as heated seating, warm-water washing, warm-air drying, automatic flushing, touchless controls, night lighting, and other smart features.
In this post, I'll walk through some of the technical decisions and challenges involved in building the platform.
The Goal
The main goal was to create a modern e-commerce experience where users could:
Explore different smart toilet models
Compare products and features
View detailed product information
Select available options
Add products to a cart
Manage cart items
Proceed through checkout
Select a payment method
Complete an order
Access the website easily from mobile and desktop devices
At the same time, the platform needed to be optimized for search engines and structured so that product information could come from the backend rather than being hardcoded throughout the frontend.
Technology Stack
The frontend was built using a modern React-based stack:
Next.js
React
TypeScript
Tailwind CSS
Next.js App Router
REST APIs
GitHub
Vercel
The combination of Next.js and TypeScript gave us a good foundation for building reusable components while maintaining type safety as the application became more complex.
Designing the Product Architecture
One of the first challenges was deciding how products should be represented.
PORCELE currently has multiple product models, including:
PORCELE ONE
PORCELE ELITE
PORCELE SIGNATURE
PORCELE ROYALE
ADA model options
Instead of building separate hardcoded pricing logic for every page, we wanted the backend to act as the source of truth.
A simplified product structure looks like this:
Product
├── id
├── name
├── price
├── MSRP
├── discount
├── images
├── ADA option
├── availability
└── additional product information
This approach makes it easier to update pricing, product images, discounts, and availability without having to modify multiple frontend components.
The public product catalog can be explored at:
Dynamic Product Data
One of the important parts of the implementation was connecting the frontend to the product API.
Instead of defining values such as:
price = "$1,599"
directly inside the UI, the frontend retrieves product information from the backend.
The flow is approximately:
Backend API
↓
Product Data
↓
Next.js Application
↓
Product Components
↓
Product Details / Cart / Checkout
This gives us a single source of truth for product information.
It also prevents a common e-commerce problem where the product page displays one price while the checkout system uses another value.
Building Reusable Product Components
The product pages share many common elements.
Instead of creating completely separate components for every model, we designed reusable UI components that receive product data as properties.
For example:
product={product}
/>
The component can then display the appropriate:
Product image
Product name
Pricing
Discount
Features
Availability
Product link
This makes the frontend easier to maintain as new models are added.
Responsive UI
Another major focus was responsive design.
A premium product website needs to work just as well on a mobile phone as it does on a large desktop monitor.
The interface was designed around responsive layouts using Tailwind CSS.
The goal was to make sure that:
Mobile
↓
Tablet
↓
Laptop
↓
Desktop
all provide a consistent experience without simply shrinking the desktop interface.
This required paying attention to:
Product card layouts
Navigation
Images
Typography
Buttons
Spacing
Product comparison sections
Checkout components
Managing the Shopping Cart
The cart required its own state-management approach.
We created a cart context and reducer-based architecture so different parts of the application could access and update cart state.
The simplified flow looks like:
Product Page
↓
Add to Cart
↓
Cart Context
↓
Cart Reducer
↓
Local Storage
↓
Checkout
Persisting the cart locally means that a user can navigate between pages without losing the items they have selected.
The cart also needs to handle product IDs consistently because product information is coming from the backend.
This became particularly important when moving from static frontend product data to dynamically retrieved backend products.
Handling Product Options
Some products have additional configuration options.
For example, the PORCELE ROYALE model includes an ADA-related option.
Instead of treating every variation as an entirely different product, the frontend can use product configuration data to determine which options should be displayed.
Conceptually:
Product
│
├── Standard configuration
│
└── ADA configuration
│
└── Additional pricing
This makes the UI flexible enough to support product-specific options without duplicating the entire product page.
Checkout and Payments
The checkout experience was another major part of the platform.
The general flow is:
Cart
↓
Checkout
↓
Shipping Information
↓
Shipping Method
↓
Payment
↓
Create Order
↓
Order Confirmation
Payment integration was implemented with PayPal, while the checkout interface was designed to accommodate card/payment options.
The important engineering consideration here is that the frontend should not be treated as the final authority for order values.
Before an order is processed, important product and pricing information should be validated against trusted backend data.
API-Based Order Processing
The application also uses API routes for order-related operations.
A simplified architecture looks like:
Next.js Frontend
↓
API Route
↓
Backend / Payment Provider
↓
Order Processing
↓
Order Response
↓
Frontend
This separation makes the application easier to maintain and allows payment/order logic to remain separate from presentation components.
Building for SEO
Because PORCELE is also a product discovery platform, SEO was an important part of the implementation.
The website includes:
Metadata
Product-specific pages
Sitemap
robots.txt
Internal linking
Search-engine indexing configuration
Structured public URLs
Some of the main public pages include:
/
/products
/one-model
/elite-model
/signature-model
/royale-model
/ada-model
/how-it-works
/experience
/safety
/faq
Each important product and informational page should be accessible through a crawlable URL rather than being hidden behind client-side interactions.
The goal is to make the site useful for both users and search engines.
Sitemap and Robots.txt
The sitemap contains the main public product and informational pages.
Private transactional routes such as checkout and order-related pages should not be treated like public marketing pages.
The basic concept is:
Public Pages
↓
Crawlable
↓
Search Engine
Private / Transactional Pages
↓
Restricted
This keeps the technical SEO structure aligned with the actual purpose of each page.
Indexing and Search Visibility
We also worked with search-engine webmaster tools and URL indexing systems.
PORCELE uses:
Google SEO tools
Bing Webmaster Tools
Sitemap submission
IndexNow
Metadata
Internal linking
IndexNow is particularly useful for notifying participating search engines when URLs are updated.
The goal isn't simply to get pages indexed. The larger goal is to build a website structure where search engines can understand the relationship between products, educational content, and the overall brand.
Image Optimization
A product-focused website depends heavily on high-quality imagery.
At the same time, large product images can negatively affect page performance if they are not handled correctly.
Next.js provides image optimization capabilities through next/image.
The general approach is:
src={product.image}
alt={product.name}
width={800}
height={800}
/>
Using descriptive alternative text also helps accessibility and gives search engines additional context about product imagery.
What We Learned
Building PORCELE highlighted several lessons that apply to many e-commerce projects.
- Keep the backend as the source of truth
Prices, discounts, product IDs, and availability should not be duplicated across many frontend components.
- Build reusable components early
Product cards, buttons, navigation elements, and checkout components become much easier to maintain when they are designed for reuse.
- TypeScript becomes increasingly valuable as the project grows
Once the application has products, carts, APIs, payment data, and multiple UI states, type safety helps catch inconsistencies earlier.
- E-commerce state needs careful design
A shopping cart looks simple from the UI, but handling persistence, product IDs, quantities, pricing, and checkout transitions requires a consistent data model.
- SEO should be considered during development
Sitemap structure, metadata, URLs, internal links, image optimization, and crawlability shouldn't be added as an afterthought.
What's Next?
As the platform evolves, there are several areas that can continue to improve:
More product comparison functionality
Additional product configuration options
Improved checkout flows
Better performance monitoring
More educational content
More structured product information
Additional accessibility improvements
Further SEO optimization
The goal is to continue improving both the engineering foundation and the customer experience.
Final Thoughts
Building PORCELE was more than creating a product landing page.
It required combining a modern frontend architecture with dynamic product data, state management, responsive UI, checkout functionality, payment integration, and technical SEO.
The project also demonstrates how a physical product brand can use modern web technologies to create a digital experience that feels as carefully designed as the products themselves.
You can explore the live PORCELE platform here:
And the product catalog here:
Thanks for reading. If you're also building a Next.js e-commerce project, I'd be interested to hear what architectural decisions you've made and what challenges you've encountered.
Top comments (0)