SIDNOV

A full-stack e-commerce platform for an Indonesian handmade bag brand, covering product discovery, customer accounts, checkout, order fulfillment, content, and administration.

Technologies

Laravel
React
TypeScript
Inertia.js
MySQL
Tailwind CSS
Google OAuth
Tripay QRIS

On this page

The storefront combines product discovery, category browsing, and SIDNOV's handmade ethnic bag identity.

About the project

SIDNOV is a full-stack e-commerce platform developed for an Indonesian brand that produces handmade bags with contemporary ethnic motifs. It brings the public storefront, customer purchasing journey, order fulfillment, editorial content, and store administration into one application.

The customer-facing experience supports product discovery, wishlists, carts, checkout, account management, order tracking, and reviews. A separate administration workspace gives store operators control over products, orders, cashback vouchers, stories, banners, and email broadcasts.

Product discovery and brand storytelling

Customers can browse the complete catalog or narrow it by bag category. Each product page combines an image gallery, availability, price, product details, quantity selection, and direct actions for the cart and wishlist.

SIDNOV shop page with bag categories, product cards, prices, and pagination — Category browsing and pagination help customers move through the product catalog.

SIDNOV product detail page with an image gallery, price, availability, quantity, cart, and wishlist controls — Product details bring imagery, availability, specifications, and purchasing actions together.

SIDNOV also uses editorial stories to connect products with broader fashion content. Visitors can browse published stories, open an article, and move between related entries. The public about page presents the brand’s focus on combining Indonesian cultural motifs with practical, contemporary bags.

SIDNOV stories page showing published fashion articles with images, excerpts, and pagination — The editorial index introduces published stories through image-led article cards.

SIDNOV story detail page with article metadata, a feature image, body content, and sharing controls — Each story has a dedicated reading view with authorship, publication details, and sharing controls.

The about page connects SIDNOV's brand story, products, and physical location.

Customer account and checkout

Customers can create an account with email and password or sign in through Google OAuth. The account area brings together personal details, wishlists, cashback points, orders, reviews, and cashback vouchers.

SIDNOV customer login page with email, password, Google sign-in, and registration options — Customers can authenticate with their credentials or continue with Google.

SIDNOV customer account overview showing cashback points, wishlist totals, and account activities — The account overview provides one path to shopping activity, rewards, and profile management.

The cart recalculates totals as customers change quantities, choose a shipping service, apply an eligible cashback voucher, or use an available cashback point balance. Checkout supports Tripay QRIS payments and a manual transfer flow with payment-proof upload.

SIDNOV shopping cart showing product quantities, shipping selection, voucher controls, order totals, and checkout options — The cart combines product quantities, shipping costs, rewards, and QRIS or manual checkout options.

Successful checkouts create an order, preserve its line items and shipping details, and record status changes. Customers can inspect their order history, follow fulfillment progress, and submit reviews after an order is completed.

Administration workspace

The administration dashboard summarizes revenue, registered customers, reviews, orders, and recent order volume. Dedicated workspaces let operators maintain the catalog and handle day-to-day fulfillment without editing data directly.

SIDNOV administration dashboard showing revenue, users, reviews, orders, and an order activity chart — The administration dashboard provides a concise view of store and order activity.

SIDNOV product administration page with search, inventory records, availability toggles, and management actions — Operators can search products, change availability, and open product management actions.

SIDNOV order administration page showing order status, purchased products, totals, address, and shipping information — Order management connects payment status, purchased items, totals, delivery details, and fulfillment actions.

Content and campaign tools are part of the same workspace. Administrators can publish stories, rotate storefront banners, configure cashback vouchers, and prepare email broadcasts for selected recipients.

SIDNOV story administration page with article authors, publication dates, views, statuses, and management actions — Story management exposes publishing status, readership, and editorial actions in one table.

Architecture and integrations

SIDNOV uses Laravel 12 for application logic, routing, authentication, database access, and integrations. React 19 and TypeScript render the interface through Inertia.js, while Tailwind CSS provides the responsive presentation layer. MySQL stores customers, addresses, products, carts, orders, reviews, content, and campaign data.

Laravel Socialite handles Google OAuth. Tripay creates QRIS transactions and processes signed payment callbacks, while the checkout service records orders, line items, rewards, and status history inside database transactions. Shipping services provide delivery estimates and shipment tracking, and queued email broadcasts support customer campaigns.