Skip to main content

Back to projects

02 / 04

Voltora Elektronik

An e-commerce interface for electronic components, built with React, TypeScript and Tailwind CSS. It covers product discovery, filtering, wishlist, cart and account screens as a comprehensive frontend system running on mock data.

The Voltora Elektronik cover: on the left the project title, a short description and four icons for catalogue, supply, order management and technical support; a circuit board carrying a Voltora-branded chip in the centre; on the right a tablet showing the storefront landing screen and a phone showing the category list.

Project snapshot

Status
Completed
Role
Frontend development, user experience, design system, and interaction design
Technologies
React · TypeScript · Tailwind CSS · Vite

Overview

Turning technical products into an approachable shopping experience.

Context
A frontend e-commerce experience for electronic components and embedded systems products, bringing technical product information, discovery, and shopping interfaces together under one design system.
Goal
To establish the product model, filtering system, and shopping states as a working end-to-end interface before a backend is connected.
Norvane’s role
Frontend development, user experience, design system, and interaction design

The Need

People shopping for electronic components need more than an image and a price: category, specifications, availability, and compatibility all shape the decision.

The central design challenge in Voltora was to present that technical density without turning the interface into a catalogue maze, and to keep it easy to scan for makers, students, and embedded developers.

  1. Technical information densityPresenting title, description, specifications, availability, price, and category in one balanced hierarchy.
  2. Catalogue breadthEnabling fast discovery across development boards, sensors, power modules, robotics parts, and cables.
  3. Mixed user intentSupporting both the visitor hunting a specific part and the one who does not yet know where their project starts.
  4. A connected shopping flowConnecting discovery, wishlist, cart, and account screens through one consistent component language.

Approach

Voltora’s visual system is built on black navigation surfaces, light content areas, and controlled mint accents. Mint is used for primary actions, focus, borders, and active states rather than as a dominant surface.

This keeps the electronic-laboratory character without letting the interface drift into a neon or gaming aesthetic. Product cards, filters, drawers, modal surfaces, and inputs all follow one shared component language.

  • Two-state navigation

    The sidebar runs collapsed or expanded so category access stays available without costing content width. The home screenshot shows it expanded; the listing screenshot shows it collapsed.

  • Abstract product visuals

    Category-derived abstract card visuals stand in for product photography, giving a consistent technical storefront without sourcing photos.

  • State-first components

    Product states — in stock, low stock, out of stock, discounted, bestseller, new — are designed into the card system rather than bolted on.

Layout layer

  1. App / Router
  2. Sidebar
  3. Topbar and search
  4. Content area
  5. Footer

Commerce layer

  1. Product card
  2. Listing and filters
  3. Wishlist
  4. Cart
  5. Order summary

Foundation layer

  1. TypeScript type models
  2. Mock data modules
  3. Hooks
  4. UI components

Design tokens

  • Black#000000
  • Mint#CFFFE2
  • Soft mint#A2D5C6
  • Dark surface#111111
  • Light background#F6F6F6

Features

Bringing search, filters, and view controls into one discovery system.

The listing experience lets people narrow components through search, filtering, and sorting. Category, availability, and price-range filters are handled through one filtering model, while grid and list views suit different preferences for information density.

The banner at the top of the screen is the application stating, in its own interface, that the catalogue currently runs on preview data and needs a Firestore connection for a live catalogue.

  • Product search
  • Category filter
  • Availability filter
  • Price range
  • Sorting
  • Grid and list views
The Voltora listing page: collapsed icon navigation, a preview-data notice, category, availability and price filters, and product cards carrying ratings, technical tags and prices.
The product discovery screen combining search, filters, sorting, and view controls.

Moving search into a keyboard-reachable command surface.

The search field opens as a command palette: trending products are listed with their prices, categories appear as shortcuts, and the panel spells out its arrow-key, Enter, and Esc behaviour along the bottom.

It lets someone who already knows the part name reach it without walking the menu — an unusual pattern for a storefront and a familiar one from developer tooling.

  • ⌘K to open
  • Trending product shortcuts
  • Category shortcuts
  • Keyboard navigation and Esc to dismiss
The Voltora search command palette: trending products with prices, category shortcuts, and a line at the foot describing arrow-key, Enter and Esc use.
The command palette providing keyboard access to products and categories.

Connecting product selection to wishlist and a readable order summary.

The wishlist screen lets someone gather products they are considering, separately from the cart. The cart interface then brings the selection together with SKUs, quantity controls, and an order summary that separates subtotal, discounts, shipping, and tax.

A three-stage indicator above the cart makes the rest of the flow — cart, checkout, confirmation — visible. All of it is frontend behaviour in the current version: no real order is created and no payment is taken.

  • Wishlist with move-to-cart
  • SKU and quantity controls
  • Subtotal, discount, shipping and tax breakdown
  • Promo code field
  • Recommended products
  • Three-stage flow indicator
The Voltora wishlist page: four saved products shown as cards with category, title, price and add-to-cart actions, above the storefront footer.
The wishlist screen collecting products of interest separately from the cart.
The Voltora cart page: a three-stage indicator for cart, checkout and confirmation, product rows with SKUs and quantity controls, and an order summary separating subtotal, discounts, shipping and tax.
The mock cart interface turning product selection into a readable order summary.

Completing the account screens inside the same design system.

The sign-in and registration screens share one layout that places a dark narrative panel beside a light form panel. On the form side, required-field marks, password visibility, and password rules are all handled at the interface level.

The line under the social buttons — “Social login will be connected later.” — is the application’s own statement: those buttons do not currently reach a connected provider.

  • Sign-in and registration flow
  • Password visibility and rules
  • Terms acceptance
  • Social login awaiting connection
The Voltora sign-in screen: a dark narrative panel on the left, and on the right the email, password and remember-me fields above Google and GitHub buttons with a note that social login will be connected later.
The sign-in screen placing a narrative panel beside the form.
The Voltora registration screen: full name, email, a minimum six-character password and confirmation fields, terms acceptance, and a create-account action.
The account creation flow sharing its layout with the sign-in screen.

Interface

The Voltora home page: expanded category navigation on the left, a product hero area, and a featured development board module with its technical specifications.
The main surface bringing electronics discovery and storefront identity together.

Technical Build

Product, cart, and user models are defined through TypeScript types; the current data comes from mock modules and hooks cover the related behaviour at the interface level.

Interface
React · TypeScript · Tailwind CSS
Application
React Router DOM · Framer Motion · Lucide React
Tooling
Vite
Planned cloud layer
Firebase Authentication · Cloud Firestore · Firebase Storage

Outcome

Voltora brings a broad e-commerce interface — storefront, product discovery, wishlist, cart, and account screens — under one shared component and design system.

The project is an interface-engineering exercise in how the product model, filtering, responsive layout, and the various shopping states can be built at the frontend level before a real backend is connected.

Current scope and next areas of development

  • Product data comes from mock sources; the application states this itself through a preview notice.
  • Cart, wishlist, and user flows are frontend behaviours.
  • The Firebase connection is not active yet; it is planned as a later development phase.
  • No real user account is created, and no real order or payment is processed.
  • Social login providers are not connected yet.
  • Ratings and review counts on the product cards are mock data, not real customer reviews.
  • An administration panel is not part of the current scope.

Related insights

Next project

Burhen Halı Yıkama CRM

A full-stack CRM and business automation system built with React and Flask. It brings customer records, square-metre-based pricing, six-stage order tracking, payment and balance management, personnel permissions, and PDF delivery-note generation into one operational workspace.

View Project

Working on a similar digital product?

Share the need, the current situation, and your goals so we can evaluate the right starting point together.

Tell Us About Your Project