Profile
Fatih
Profile

Fatih

Contact
  • fatihaljabar@gmail.com
  • fatihaljabar.com
Languages
🇬🇧 English
🇮🇩 Indonesia
Home
About
Achievements
Projects
Contact
Back

Blockwave Studios

High fidelity storefront demo for a Minecraft and Roblox asset marketplace, designed and built solo. Client approved, now in development.

Tech Stack :
Live Demo
Blockwave Studios

Timeline: August – Present 2026

Status: Design and interactive demo completed; currently in active production development

Overview

Blockwave Studios is a digital asset marketplace built for Minecraft and Roblox creators, developers, and studios. Its catalogue covers builds, maps, 3D models, textures, scripts, UI kits, and complete game systems.

This is a real client project that I took from a specification document to a complete interactive product demo. I designed the entire product and built the frontend independently.

Instead of following a conventional wireframe-first workflow, I moved directly into high-fidelity product design. Every screen was designed to look and behave like the intended final product from day one, giving the client something concrete to review instead of asking them to imagine the experience from abstract wireframes.

Design and UX, completed. I owned the complete UI/UX process, including information architecture, responsive layouts, interaction states, design systems, customer journeys, and administrative workflows.

Interactive frontend demo, completed. I also built the complete frontend independently: every public page, customer flow, dashboard, management screen, modal, and responsive state. This is not a static Figma export—it is a functional product demo built with real code.

Currently in active development. The client approved the design and interactive demo. The project is now moving into production implementation, connecting the frontend to a real backend, PostgreSQL database, authentication system, PayPal payment infrastructure, Cloudflare R2 storage, Discord support integration, and deployment pipeline.

The approved demo acts as the product reference for development, so the final application is expected to closely preserve its visual design, interaction patterns, and end-to-end flows.

Show Platform

The Problem It Solves

Minecraft and Roblox assets are commonly sold through disconnected channels such as Discord servers, marketplace threads, direct messages, and spreadsheets used for order tracking.

Without a unified system, several predictable problems appear:

  • Buyers have no single place to browse, compare, and purchase assets by platform, category, price, file format, or engine compatibility.
  • Product ownership, download access, version history, and lifetime updates are difficult to track.
  • Coupons, bundles, promotions, and product-specific add-ons are calculated or managed manually.
  • Studio owners cannot see which products convert, which searches return no results, which assets are frequently wishlisted, or where customers abandon their carts.
  • Support requests and reviews become disconnected from the buyer, purchased asset, order, and product version involved.
  • Product, pricing, file, and payout-routing changes lack a central operational history.
  • A multi-creator studio cannot clearly assign product revenue to the correct creator or group of collaborators.

A generic storefront template only solves the surface-level commerce problem. It does not understand game-specific requirements such as engine compatibility, deliverable formats, file checksums, changelogs, secure downloads, interactive media, product add-ons, or creator revenue ownership.

It also does not provide the operational visibility required to manage a growing digital asset catalogue.

Page Marketplace Minecraft

Business and Revenue Model

Blockwave is a single-brand marketplace operated by a five-person internal creator team. The same team members also produce the Minecraft and Roblox assets sold through the platform.

The purchasing model is intentionally simple:

  • A customer purchases a digital asset once.
  • The asset is added permanently to the customer’s library.
  • Every purchase includes ongoing access and free lifetime updates.
  • There are no Personal, Commercial, Studio, or Enterprise licence tiers.
  • Blockwave does not take an internal marketplace commission in the current business model.
  • Each product can route revenue to one creator or split it between multiple collaborating creators.
  • Creator percentage allocations must always total 100%.
  • Orders and invoices remain linked but separate records.
  • Orders represent payment and asset fulfilment.
  • Invoices represent the customer’s financial receipt.

PayPal Creator Revenue Routing

The latest version of the product uses a product-level PayPal revenue ownership model.

Each creator can connect a verified PayPal Business payout account. When an admin creates or edits a product, they must define which creator or creators own the product revenue.

Single-Creator Product

For a product made by one creator, the admin selects one connected PayPal creator account and assigns it a 100% revenue allocation.

Collaborative Product

For an asset created by multiple team members, the admin can select multiple recipients and assign a percentage to each creator.

For example:

  • Creator A: 60%
  • Creator B: 40%
  • Total allocation: 100%

The product cannot be published if:

  • The allocation total is below or above 100%.
  • A selected creator does not have a connected PayPal account.
  • A recipient account cannot receive payments.
  • Required PayPal consent or merchant verification is incomplete.

Multi-Creator Shopping Cart

A buyer can add products owned by different creators to one cart and complete one customer-facing PayPal checkout.

The system maintains one order and one invoice for the customer while preserving the revenue ownership of every product and creator behind the transaction.

Historical Allocation Snapshot

When a payment is captured, the product’s creator allocation is copied into an order-level allocation snapshot.

This prevents historical transaction records from changing if the product’s creator ownership or percentage distribution is edited later.

Important: The current frontend demonstrates this flow using mock data. Real merchant onboarding, PayPal order creation, payment capture, multiparty routing, webhook verification, fees, currency conversion, disputes, and recipient eligibility must be implemented and validated through an approved PayPal product during the production phase.

Demo Access

Two demo accounts are available for review. Both are fully functional against the persistent mock-data layer.

Customer Account

  • Browse Minecraft and Roblox assets.
  • Search and filter the catalogue.
  • Add products, bundles, and add-ons to the cart.
  • Apply coupon codes.
  • Complete a simulated PayPal checkout.
  • View orders and invoices.
  • Access purchased products from My Library.
  • Manage wishlist items.
  • Write, edit, and delete verified reviews.
  • Create support tickets.
  • Manage notifications and account security.

Admin Account

  • Monitor revenue, transactions, customers, and creator payouts.
  • Create and edit products.
  • Configure product-level PayPal revenue ownership.
  • Manage categories, collections, bundles, files, coupons, and reviews.
  • Inspect unified orders and invoices.
  • Monitor analytics and financial reports.
  • Manage creator PayPal payout accounts.
  • Review audit logs, active sessions, security settings, and integrations.

Demo Credentials

RoleEmailPassword
Customerdara@northlight.studiodemo1234
Adminadmin@blockwave.studioadmin1234

These credentials are for demonstration purposes only and do not represent production authentication.

Page Marketplace Roblox

Feature Scope, 24 Modules

Every module below was scoped directly from the client’s specification and refined throughout the product design process.

  1. Public Storefront and Homepage.
    Animated hero carousel, campaign banners, featured assets, recommended products, trending products, recently shipped items, platform showcases, and recently viewed content.

  2. Marketplace and Product Discovery.
    Complete asset catalogue, Minecraft catalogue, Roblox catalogue, free assets, search, responsive filters, sorting, grid presentation, loading skeletons, and empty states.

  3. Product Detail.
    Touch-enabled media gallery, fullscreen preview, optional video and 3D indicators, overview, features, package contents, technical specifications, changelog, reviews, add-ons, and related products.

  4. Collections and Bundles.
    Collection and bundle listing pages, included products, combined list value, bundle pricing, automatic savings calculation, custom cover artwork, optional card frames, and cart actions.

  5. Coupon Engine.
    Percentage discounts, fixed Rupiah discounts, catalogue scope, minimum order value, usage limits, scheduling, expiration, automatic uppercase codes, random code generation, and live discount feedback.

  6. PayPal Payment and Order Flow.
    Buyer information, PayPal approval simulation, pending, successful, failed, cancelled, and expired payment states, retry handling, creator allocation snapshots, and order-success confirmation.

  7. My Library and Secure Downloads.
    Permanent product ownership, current version information, update availability, download modal, SHA-256 checksum presentation, download history, and lifetime access.

  8. Customer Reviews.
    Interactive star ratings, verified purchase badges, instant publishing, review editing, deletion, public storefront links, and automatic product-rating updates.

  9. Notifications and Account Security.
    Read and unread notifications, mark-all-read, notification preferences, password validation, two-factor authentication presentation, and active-session management.

  10. Admin Dashboard.
    Revenue KPIs, average order value, creator payout context, delivery health, buyer growth, operational alerts, invoice activity, and product performance.

  11. Admin Product Management.
    Product inventory and a four-step product editor covering general information, platform and category, features, package contents, pricing, PayPal routing, media, files, storage, engine compatibility, changelog, add-ons, and storefront card frames.

  12. Admin File Manager and Reviews.
    Format-aware file records, version history concepts, SHA-256 checksums, Cloudflare R2 upload simulation, direct downloads, review visibility management, deletion, and official developer replies.

  13. Global Navigation and Search.
    Responsive sticky navbar, catalogue navigation, cart drawer, wishlist, notifications, account menu, command search overlay, and recent searches.

  14. Filter and Sorting Engine.
    Platform, category, price, file format, compatibility, bestseller, search keyword, sorting, and filter reset controls with responsive mobile behaviour.

  15. Product-Specific Add-ons.
    Per-product add-on configuration, customer selection, automatic price calculation, and add-on snapshots stored directly inside order items.

  16. Shopping Cart.
    Add and remove products, update add-ons, frequently bought together, coupon application, subtotal, discount, tax, and final checkout-total calculation.

  17. Multi-Step Checkout.
    Buyer details, field validation, order summary, creator-routing disclosure, PayPal checkout hand-off, payment approval, and protected transaction states.

  18. Authentication and Route Guards.
    Login, registration, Google sign-in interface, customer and admin route protection, guest redirects, and role-aware navigation.

  19. Wishlist, Invoices, and Purchase History.
    Saved products, price-drop presentation, invoice list, invoice detail modal, paid, unpaid, and overdue statuses, linked order references, print action, and payment retry.

  20. Support and Discord Bridge.
    Asset-aware support ticket form, Discord username, screenshot and log attachments, ticket history, webhook health, channel routing, and direct Discord ticket-room actions.

  21. Help Centre and Public Pages.
    Searchable help topics, setup documentation, FAQ accordion, About page, legal policies, and dedicated 404, 500, and offline states.

  22. Admin Analytics and Reports.
    Revenue momentum, ecosystem share, conversion, cart abandonment, impressions, page views, wishlist intent, zero-result search demand, creator payouts, and finance and sales ledgers.

  23. Admin Categories and Collections.
    Platform taxonomy, category ordering, subcategories, visual icon selection, searchable product picker, cover upload interface, and automatic bundle-savings calculation.

  24. Admin Transactions and Settings.
    Unified order and invoice management, customer directory, CMS, audit trail, creator payout accounts, PayPal configuration, security policies, and third-party integrations.

Page Admin Reports

Tech Stack, Current Demo

LayerTechnology
FrontendTypeScript, React 19, Vite 7, Tailwind CSS 4
RoutingReact Router 7
State ManagementReact Context with one application provider for authentication, cart, catalogue, commerce, customer, and admin data
PersistenceBrowser localStorage with a versioned schema and controlled reset mechanism
AnimationFramer Motion 12 with restrained CSS transitions
ChartsRecharts 3 with shared chart components and theme-aware colours
IconsLucide React and project-specific brand treatments
TypographyInter Variable and Lemon Milk Bold, hosted locally
ValidationTypeScript project build and ESLint 9
Demo DeploymentVercel-ready Vite deployment with SPA route rewrites

No backend exists during the current demo phase.

Products, creators, orders, invoices, coupons, reviews, support tickets, files, notifications, and admin actions use structured mock data and persist locally in the browser.

This allows the demo to behave like a connected product during client review without requiring production infrastructure.

Page Admin Dashboard

Tech Stack Blueprint, Production Phase

The production architecture was planned before backend implementation so development begins against a deliberate technical target rather than a series of guesses.

LayerTechnologyPurpose
Frontend and StorefrontNext.js, TypeScript, and Tailwind CSSServer-side rendering, ISR, catalogue SEO, fast page delivery, and dynamic Open Graph previews for Discord and social platforms
Interactive 3D PreviewClick-to-load Sketchfab or SketchUp Viewer iframeLightweight interactive previews isolated from the application runtime
Backend Core APIGo with FiberModular monolith for accounts, catalogue, commerce, fulfilment, creator routing, support, and administration
Primary DatabasePostgreSQLACID storage for users, creators, products, allocations, carts, orders, invoices, entitlements, files, reviews, coupons, and audit events
Cache and Message QueueRedisCatalogue caching, rate limiting, idempotency support, counters, notifications, and background jobs
Payment InfrastructurePayPal Orders API with an approved partner or multiparty payment capabilityBuyer approval, payment capture, creator revenue routing, webhooks, transaction reconciliation, and payout records
File and Asset StorageCloudflare R2Private storage for large game files with time-limited signed download URLs
Edge Network and SecurityCloudflare CDN and WAFTLS, DDoS protection, origin security, bot controls, and static asset caching
AuthenticationProduction identity system with Google OAuth and role-based access controlSecure customer and admin authentication, email verification, 2FA, session management, and revocation
Server and DeploymentHostinger VPS KVM 2 with DokployContainerised deployment for Next.js, Go API, PostgreSQL, and Redis
CI/CD PipelineGitHub Actions and Dokploy webhookAutomated linting, testing, migrations, builds, and deployment
ObservabilityStructured logs, metrics, error tracking, and webhook delivery logsOperational monitoring, debugging, and incident response

Final technology and payment decisions remain subject to load testing, security review, PayPal account approval, regional availability, and production requirements.

What's Already Built vs What's Next

Already Built

  • Complete high-fidelity UI/UX design.
  • Fully responsive interactive frontend.
  • Public storefront, customer account, and admin console.
  • All 24 feature modules represented against persistent mock data.
  • Two role-based demo accounts.
  • Product-level PayPal owner selection.
  • Multi-creator percentage allocation.
  • Simulated PayPal approval and payment-state handling.
  • Order-level creator allocation snapshots.
  • Complete product-management and operational admin experience.
  • Production architecture and PayPal creator-routing PRD.
  • Vercel deployment configuration for the client demo.

Next

  • Build the Go API and PostgreSQL domain model.
  • Implement real customer and admin authentication.
  • Add Google OAuth and role-based access control.
  • Complete PayPal merchant onboarding for each creator.
  • Confirm and implement an approved PayPal partner or multiparty payment model.
  • Implement PayPal order creation, capture, idempotency, webhook verification, and reconciliation.
  • Connect Cloudflare R2 uploads, checksums, entitlement validation, and signed downloads.
  • Implement Discord support-ticket delivery and transactional email.
  • Add automated unit, integration, end-to-end, accessibility, and visual-regression tests.
  • Add production observability, security hardening, and CI/CD.
  • Deploy the production application to the approved infrastructure.

Product Decisions Worth Noting

High fidelity from the first draft.
Skipping a separate wireframe stage allowed the client to review the actual hierarchy, visual density, responsive behaviour, and interaction model from the beginning.

  • The demo is the implementation reference.
    This is not a disposable prototype. It defines how the production product should look, feel, and behave.

  • Twenty-four modules came directly from the client’s scope.
    The feature set reflects real customer and operational requirements rather than presentation filler.

  • The admin console is treated as a first-class product.
    Catalogue management, creator routing, analytics, transactions, support, file versioning, and audit history received the same design attention as the customer-facing storefront.

  • Single ownership replaced complicated licence tiers.
    One purchase grants permanent library access and free lifetime updates, removing unnecessary Personal, Commercial, Studio, and Enterprise complexity.

  • Creator revenue ownership is attached directly to each product.
    The payout destination is explicit before publication, supports collaborations, and is snapshotted for historical accuracy.

  • PayPal is the single payment experience.
    The customer sees one familiar checkout flow while the internal system preserves creator-level revenue ownership.

  • The architecture was planned before backend development.
    API boundaries, database models, caching, file delivery, payments, security, and deployment were defined before production integration began.

Links

  • Demo: blockwavestudio-demo.vercel.app