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

Timeline: August – Present 2026
Status: Design and interactive demo completed; currently in active production development
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.

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:
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.

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:
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.
For a product made by one creator, the admin selects one connected PayPal creator account and assigns it a 100% revenue allocation.
For an asset created by multiple team members, the admin can select multiple recipients and assign a percentage to each creator.
For example:
The product cannot be published if:
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.
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.
Two demo accounts are available for review. Both are fully functional against the persistent mock-data layer.
| Role | Password | |
|---|---|---|
| Customer | dara@northlight.studio | demo1234 |
| Admin | admin@blockwave.studio | admin1234 |
These credentials are for demonstration purposes only and do not represent production authentication.

Every module below was scoped directly from the client’s specification and refined throughout the product design process.
Public Storefront and Homepage.
Animated hero carousel, campaign banners, featured assets, recommended products, trending products, recently shipped items, platform showcases, and recently viewed content.
Marketplace and Product Discovery.
Complete asset catalogue, Minecraft catalogue, Roblox catalogue, free assets, search, responsive filters, sorting, grid presentation, loading skeletons, and empty states.
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.
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.
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.
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.
My Library and Secure Downloads.
Permanent product ownership, current version information, update availability, download modal, SHA-256 checksum presentation, download history, and lifetime access.
Customer Reviews.
Interactive star ratings, verified purchase badges, instant publishing, review editing, deletion, public storefront links, and automatic product-rating updates.
Notifications and Account Security.
Read and unread notifications, mark-all-read, notification preferences, password validation, two-factor authentication presentation, and active-session management.
Admin Dashboard.
Revenue KPIs, average order value, creator payout context, delivery health, buyer growth, operational alerts, invoice activity, and product performance.
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.
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.
Global Navigation and Search.
Responsive sticky navbar, catalogue navigation, cart drawer, wishlist, notifications, account menu, command search overlay, and recent searches.
Filter and Sorting Engine.
Platform, category, price, file format, compatibility, bestseller, search keyword, sorting, and filter reset controls with responsive mobile behaviour.
Product-Specific Add-ons.
Per-product add-on configuration, customer selection, automatic price calculation, and add-on snapshots stored directly inside order items.
Shopping Cart.
Add and remove products, update add-ons, frequently bought together, coupon application, subtotal, discount, tax, and final checkout-total calculation.
Multi-Step Checkout.
Buyer details, field validation, order summary, creator-routing disclosure, PayPal checkout hand-off, payment approval, and protected transaction states.
Authentication and Route Guards.
Login, registration, Google sign-in interface, customer and admin route protection, guest redirects, and role-aware navigation.
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.
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.
Help Centre and Public Pages.
Searchable help topics, setup documentation, FAQ accordion, About page, legal policies, and dedicated 404, 500, and offline states.
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.
Admin Categories and Collections.
Platform taxonomy, category ordering, subcategories, visual icon selection, searchable product picker, cover upload interface, and automatic bundle-savings calculation.
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.

| Layer | Technology |
|---|---|
| Frontend | TypeScript, React 19, Vite 7, Tailwind CSS 4 |
| Routing | React Router 7 |
| State Management | React Context with one application provider for authentication, cart, catalogue, commerce, customer, and admin data |
| Persistence | Browser localStorage with a versioned schema and controlled reset mechanism |
| Animation | Framer Motion 12 with restrained CSS transitions |
| Charts | Recharts 3 with shared chart components and theme-aware colours |
| Icons | Lucide React and project-specific brand treatments |
| Typography | Inter Variable and Lemon Milk Bold, hosted locally |
| Validation | TypeScript project build and ESLint 9 |
| Demo Deployment | Vercel-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.

The production architecture was planned before backend implementation so development begins against a deliberate technical target rather than a series of guesses.
| Layer | Technology | Purpose |
|---|---|---|
| Frontend and Storefront | Next.js, TypeScript, and Tailwind CSS | Server-side rendering, ISR, catalogue SEO, fast page delivery, and dynamic Open Graph previews for Discord and social platforms |
| Interactive 3D Preview | Click-to-load Sketchfab or SketchUp Viewer iframe | Lightweight interactive previews isolated from the application runtime |
| Backend Core API | Go with Fiber | Modular monolith for accounts, catalogue, commerce, fulfilment, creator routing, support, and administration |
| Primary Database | PostgreSQL | ACID storage for users, creators, products, allocations, carts, orders, invoices, entitlements, files, reviews, coupons, and audit events |
| Cache and Message Queue | Redis | Catalogue caching, rate limiting, idempotency support, counters, notifications, and background jobs |
| Payment Infrastructure | PayPal Orders API with an approved partner or multiparty payment capability | Buyer approval, payment capture, creator revenue routing, webhooks, transaction reconciliation, and payout records |
| File and Asset Storage | Cloudflare R2 | Private storage for large game files with time-limited signed download URLs |
| Edge Network and Security | Cloudflare CDN and WAF | TLS, DDoS protection, origin security, bot controls, and static asset caching |
| Authentication | Production identity system with Google OAuth and role-based access control | Secure customer and admin authentication, email verification, 2FA, session management, and revocation |
| Server and Deployment | Hostinger VPS KVM 2 with Dokploy | Containerised deployment for Next.js, Go API, PostgreSQL, and Redis |
| CI/CD Pipeline | GitHub Actions and Dokploy webhook | Automated linting, testing, migrations, builds, and deployment |
| Observability | Structured logs, metrics, error tracking, and webhook delivery logs | Operational 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.
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.