Screens/Browse

Screens

Web screens

Every route of the public web as it is built, with the states it really has.

Built Real screenshots of the running app at 1440 and 390 px, light and dark, on the demo data. Click one to see the whole page at its real size.

Browse

Open to anyone. The catalogue is the home page: / and /dashboard lead to it, also after signing in.

Catalogue

Built
/{locale}/catalogue
Catalogue: Filled, desktop, lightCatalogue: Filled, desktop, dark
Catalogue: Filled, phone, lightCatalogue: Filled, phone, dark

Who Visitor, buyer, seller

What Search, a left filter panel (Verified only, Box & papers, Category, Brand, Condition, Year, Colour, Material, Price), sort, two-way URL. A filler tile closes the last row. On a phone the filters are a full-screen panel behind a Filters chip.

RealThe running app on the demo data.

Catalogue: Filtered, desktop, lightCatalogue: Filtered, desktop, dark
Catalogue: Filtered, phone, lightCatalogue: Filtered, phone, dark

Who Visitor, buyer, seller

What Search, a left filter panel (Verified only, Box & papers, Category, Brand, Condition, Year, Colour, Material, Price), sort, two-way URL. A filler tile closes the last row. On a phone the filters are a full-screen panel behind a Filters chip.

RealThe running app on the demo data.

Catalogue: Filters on a phone, phone, lightCatalogue: Filters on a phone, phone, dark

Who Visitor, buyer, seller

What Search, a left filter panel (Verified only, Box & papers, Category, Brand, Condition, Year, Colour, Material, Price), sort, two-way URL. A filler tile closes the last row. On a phone the filters are a full-screen panel behind a Filters chip.

RealThe running app on the demo data.

Catalogue: Nothing matches, desktop, lightCatalogue: Nothing matches, desktop, dark
Catalogue: Nothing matches, phone, lightCatalogue: Nothing matches, phone, dark

Who Visitor, buyer, seller

What Search, a left filter panel (Verified only, Box & papers, Category, Brand, Condition, Year, Colour, Material, Price), sort, two-way URL. A filler tile closes the last row. On a phone the filters are a full-screen panel behind a Filters chip.

RealThe running app on the demo data.

Catalogue: Loading, desktop, lightCatalogue: Loading, desktop, dark
Catalogue: Loading, phone, lightCatalogue: Loading, phone, dark

Who Visitor, buyer, seller

What Search, a left filter panel (Verified only, Box & papers, Category, Brand, Condition, Year, Colour, Material, Price), sort, two-way URL. A filler tile closes the last row. On a phone the filters are a full-screen panel behind a Filters chip.

API mockedThe list’s answer is held back, so the first load stays on screen.

Catalogue: Updating, desktop, lightCatalogue: Updating, desktop, dark

Who Visitor, buyer, seller

What Search, a left filter panel (Verified only, Box & papers, Category, Brand, Condition, Year, Colour, Material, Price), sort, two-way URL. A filler tile closes the last row. On a phone the filters are a full-screen panel behind a Filters chip.

API mockedThe next answer is held back after a filter is switched on.

Catalogue: Empty, desktop, lightCatalogue: Empty, desktop, dark
Catalogue: Empty, phone, lightCatalogue: Empty, phone, dark

Who Visitor, buyer, seller

What Search, a left filter panel (Verified only, Box & papers, Category, Brand, Condition, Year, Colour, Material, Price), sort, two-way URL. A filler tile closes the last row. On a phone the filters are a full-screen panel behind a Filters chip.

API mockedThe list answers with no listings: the data set has them.

Catalogue: Error, desktop, lightCatalogue: Error, desktop, dark
Catalogue: Error, phone, lightCatalogue: Error, phone, dark

Who Visitor, buyer, seller

What Search, a left filter panel (Verified only, Box & papers, Category, Brand, Condition, Year, Colour, Material, Price), sort, two-way URL. A filler tile closes the last row. On a phone the filters are a full-screen panel behind a Filters chip.

API mockedThe list answers 500.

Listing page

Built
/{locale}/listings/{id}
Listing page: Verified (demo), desktop, lightListing page: Verified (demo), desktop, dark
Listing page: Verified (demo), phone, lightListing page: Verified (demo), phone, dark

Who Visitor, buyer, seller

What The photo gallery with full-screen view, the price set by the seller, where the check stands in true words, the demo order, product details. No payment and no authentication: both say so.

RealThe running app on the demo data.

Listing page: Awaiting verification, desktop, lightListing page: Awaiting verification, desktop, dark
Listing page: Awaiting verification, phone, lightListing page: Awaiting verification, phone, dark

Who Visitor, buyer, seller

What The photo gallery with full-screen view, the price set by the seller, where the check stands in true words, the demo order, product details. No payment and no authentication: both say so.

RealThe running app on the demo data.

Listing page: Reserved, desktop, lightListing page: Reserved, desktop, dark
Listing page: Reserved, phone, lightListing page: Reserved, phone, dark

Who Visitor, buyer, seller

What The photo gallery with full-screen view, the price set by the seller, where the check stands in true words, the demo order, product details. No payment and no authentication: both say so.

RealThe running app on the demo data.

Listing page: Demo order: confirm, desktop, lightListing page: Demo order: confirm, desktop, dark
Listing page: Demo order: confirm, phone, lightListing page: Demo order: confirm, phone, dark

Who Visitor, buyer, seller

What The photo gallery with full-screen view, the price set by the seller, where the check stands in true words, the demo order, product details. No payment and no authentication: both say so.

RealThe running app on the demo data.

Listing page: Order refused: email not confirmed, desktop, lightListing page: Order refused: email not confirmed, desktop, dark
Listing page: Order refused: email not confirmed, phone, lightListing page: Order refused: email not confirmed, phone, dark

Who Visitor, buyer, seller

What The photo gallery with full-screen view, the price set by the seller, where the check stands in true words, the demo order, product details. No payment and no authentication: both say so.

RealThe running app on the demo data.

Listing page: The seller’s own, desktop, lightListing page: The seller’s own, desktop, dark
Listing page: The seller’s own, phone, lightListing page: The seller’s own, phone, dark

Who Visitor, buyer, seller

What The photo gallery with full-screen view, the price set by the seller, where the check stands in true words, the demo order, product details. No payment and no authentication: both say so.

RealThe running app on the demo data.

Listing page: Full screen, desktop, lightListing page: Full screen, desktop, dark
Listing page: Full screen, phone, lightListing page: Full screen, phone, dark

Who Visitor, buyer, seller

What The photo gallery with full-screen view, the price set by the seller, where the check stands in true words, the demo order, product details. No payment and no authentication: both say so.

RealThe running app on the demo data.

Listing page: Not found, desktop, lightListing page: Not found, desktop, dark
Listing page: Not found, phone, lightListing page: Not found, phone, dark

Who Visitor, buyer, seller

What The photo gallery with full-screen view, the price set by the seller, where the check stands in true words, the demo order, product details. No payment and no authentication: both say so.

RealThe running app on the demo data.

Signing in

The Split atelier layout: the brand panel with the scene carousel on 56%, the form on a raised card; on a phone a band the card rides over.

Sign in

Built
/{locale}/login
Sign in: Blank, desktop, lightSign in: Blank, desktop, dark
Sign in: Blank, phone, lightSign in: Blank, phone, dark

Who Visitor

What Email, password with show and hide, Remember me, on by default.

RealThe running app on the demo data.

Sign in: Wrong password, desktop, lightSign in: Wrong password, desktop, dark
Sign in: Wrong password, phone, lightSign in: Wrong password, phone, dark

Who Visitor

What Email, password with show and hide, Remember me, on by default.

RealThe running app on the demo data.

Create an account

Built
/{locale}/register
Create an account: With password strength, desktop, lightCreate an account: With password strength, desktop, dark
Create an account: With password strength, phone, lightCreate an account: With password strength, phone, dark

Who Visitor

What Every account starts as a buyer. The strength bar sits under the new password.

RealThe running app on the demo data.

Forgotten password

Built
/{locale}/forgot-password
Forgotten password: Blank, desktop, lightForgotten password: Blank, desktop, dark
Forgotten password: Blank, phone, lightForgotten password: Blank, phone, dark

Who Visitor

What Asks for the address; the answer is the same whether or not an account exists.

RealThe running app on the demo data.

Forgotten password: Link sent, desktop, lightForgotten password: Link sent, desktop, dark
Forgotten password: Link sent, phone, lightForgotten password: Link sent, phone, dark

Who Visitor

What Asks for the address; the answer is the same whether or not an account exists.

RealThe running app on the demo data.

New password

Built
/{locale}/reset-password?token=…
New password: With a link, desktop, lightNew password: With a link, desktop, dark
New password: With a link, phone, lightNew password: With a link, phone, dark

Who Holder of a reset link

What Sets the new password; every session is signed out afterwards.

RealThe running app on the demo data.

New password: Link not valid, desktop, lightNew password: Link not valid, desktop, dark
New password: Link not valid, phone, lightNew password: Link not valid, phone, dark

Who Holder of a reset link

What Sets the new password; every session is signed out afterwards.

RealThe running app on the demo data.

Confirm your email

Built
/{locale}/verify-email?token=…
Confirm your email: With a link, desktop, lightConfirm your email: With a link, desktop, dark
Confirm your email: With a link, phone, lightConfirm your email: With a link, phone, dark

Who Holder of an activation link

What A public page: one click confirms the address.

RealThe running app on the demo data.

Confirm your email: Link incomplete, desktop, lightConfirm your email: Link incomplete, desktop, dark
Confirm your email: Link incomplete, phone, lightConfirm your email: Link incomplete, phone, dark

Who Holder of an activation link

What A public page: one click confirms the address.

RealThe running app on the demo data.

Confirm your email: Link expired, desktop, lightConfirm your email: Link expired, desktop, dark
Confirm your email: Link expired, phone, lightConfirm your email: Link expired, phone, dark

Who Holder of an activation link

What A public page: one click confirms the address.

RealThe running app on the demo data.

Confirm your email: Confirmed, desktop, lightConfirm your email: Confirmed, desktop, dark
Confirm your email: Confirmed, phone, lightConfirm your email: Confirmed, phone, dark

Who Holder of an activation link

What A public page: one click confirms the address.

API mockedThe API answers that the address is confirmed: the real token is in a letter the stub does not send.

Account

Reached from the avatar menu at the end of the header; on a phone from the drawer. There is no sidebar on the web.

Account menu and drawer

Built
header, every page
Account menu and drawer: Signed in, desktop, lightAccount menu and drawer: Signed in, desktop, dark
Account menu and drawer: Signed in, phone, lightAccount menu and drawer: Signed in, phone, dark

Who Signed-in account; the drawer also for a visitor

What The person, the signed-in area by role, theme and language, sign out. The phone’s drawer also holds Sell an item (coming soon) and Prices in EUR.

RealThe running app on the demo data.

Account menu and drawer: A seller, desktop, lightAccount menu and drawer: A seller, desktop, dark
Account menu and drawer: A seller, phone, lightAccount menu and drawer: A seller, phone, dark

Who Signed-in account; the drawer also for a visitor

What The person, the signed-in area by role, theme and language, sign out. The phone’s drawer also holds Sell an item (coming soon) and Prices in EUR.

RealThe running app on the demo data.

Account menu and drawer: A visitor, phone, lightAccount menu and drawer: A visitor, phone, dark

Who Signed-in account; the drawer also for a visitor

What The person, the signed-in area by role, theme and language, sign out. The phone’s drawer also holds Sell an item (coming soon) and Prices in EUR.

RealThe running app on the demo data.

Account menu and drawer: Email not confirmed: the banner, desktop, lightAccount menu and drawer: Email not confirmed: the banner, desktop, dark
Account menu and drawer: Email not confirmed: the banner, phone, lightAccount menu and drawer: Email not confirmed: the banner, phone, dark

Who Signed-in account; the drawer also for a visitor

What The person, the signed-in area by role, theme and language, sign out. The phone’s drawer also holds Sell an item (coming soon) and Prices in EUR.

RealThe running app on the demo data.

Profile

Built
/{locale}/account
Profile: A buyer, desktop, lightProfile: A buyer, desktop, dark
Profile: A buyer, phone, lightProfile: A buyer, phone, dark

Who Signed-in account

What Name, becoming a seller, changing the password.

RealThe running app on the demo data.

Profile: A seller, desktop, lightProfile: A seller, desktop, dark
Profile: A seller, phone, lightProfile: A seller, phone, dark

Who Signed-in account

What Name, becoming a seller, changing the password.

RealThe running app on the demo data.

Profile: Saved: a toast, desktop, lightProfile: Saved: a toast, desktop, dark
Profile: Saved: a toast, phone, lightProfile: Saved: a toast, phone, dark

Who Signed-in account

What Name, becoming a seller, changing the password.

RealThe running app on the demo data.

My purchases

Built
/{locale}/purchases
My purchases: Filled, desktop, lightMy purchases: Filled, desktop, dark
My purchases: Filled, phone, lightMy purchases: Filled, phone, dark

Who Signed-in account

What Demo orders the account placed. No payment is taken.

RealThe running app on the demo data.

My purchases: Empty, desktop, lightMy purchases: Empty, desktop, dark
My purchases: Empty, phone, lightMy purchases: Empty, phone, dark

Who Signed-in account

What Demo orders the account placed. No payment is taken.

RealThe running app on the demo data.

Order

Built
/{locale}/orders/{id}
Order: Open, desktop, lightOrder: Open, desktop, dark
Order: Open, phone, lightOrder: Open, phone, dark

Who The buyer or the seller of that order

What Status, the piece, price, date, the part this account plays.

RealThe running app on the demo data.

Order: Cancelled, desktop, lightOrder: Cancelled, desktop, dark
Order: Cancelled, phone, lightOrder: Cancelled, phone, dark

Who The buyer or the seller of that order

What Status, the piece, price, date, the part this account plays.

RealThe running app on the demo data.

Order: Not found, desktop, lightOrder: Not found, desktop, dark
Order: Not found, phone, lightOrder: Not found, phone, dark

Who The buyer or the seller of that order

What Status, the piece, price, date, the part this account plays.

RealThe running app on the demo data.

Selling

For an account with the seller role. Saved and published listings wait for a review by the team: the pilot has no independent authentication.

My listings

Built
/{locale}/my-listings
My listings: Filled, desktop, lightMy listings: Filled, desktop, dark
My listings: Filled, phone, lightMy listings: Filled, phone, dark

Who Seller

What Every listing of the seller with its status, four across on a wide screen.

RealThe running app on the demo data.

My listings: Empty, desktop, lightMy listings: Empty, desktop, dark
My listings: Empty, phone, lightMy listings: Empty, phone, dark

Who Seller

What Every listing of the seller with its status, four across on a wide screen.

RealThe running app on the demo data.

My listings: No seller role, desktop, lightMy listings: No seller role, desktop, dark
My listings: No seller role, phone, lightMy listings: No seller role, phone, dark

Who Seller

What Every listing of the seller with its status, four across on a wide screen.

RealThe running app on the demo data.

New listing

Built
/{locale}/my-listings/new
New listing: Blank, desktop, lightNew listing: Blank, desktop, dark
New listing: Blank, phone, lightNew listing: Blank, phone, dark

Who Seller

What A draft can be saved half-filled. Select is the app-drawn combobox on every choice.

RealThe running app on the demo data.

New listing: An open Select, desktop, lightNew listing: An open Select, desktop, dark
New listing: An open Select, phone, lightNew listing: An open Select, phone, dark

Who Seller

What A draft can be saved half-filled. Select is the app-drawn combobox on every choice.

RealThe running app on the demo data.

Edit listing

Built
/{locale}/my-listings/{id}
Edit listing: A draft, desktop, lightEdit listing: A draft, desktop, dark
Edit listing: A draft, phone, lightEdit listing: A draft, phone, dark

Who Seller of that listing

What A draft edits and publishes here; publishing puts it in the catalogue as awaiting verification.

RealThe running app on the demo data.

Edit listing: No longer editable, desktop, lightEdit listing: No longer editable, desktop, dark
Edit listing: No longer editable, phone, lightEdit listing: No longer editable, phone, dark

Who Seller of that listing

What A draft edits and publishes here; publishing puts it in the catalogue as awaiting verification.

RealThe running app on the demo data.

Edit listing: Not found, desktop, lightEdit listing: Not found, desktop, dark
Edit listing: Not found, phone, lightEdit listing: Not found, phone, dark

Who Seller of that listing

What A draft edits and publishes here; publishing puts it in the catalogue as awaiting verification.

RealThe running app on the demo data.

My sales

Built
/{locale}/sales
My sales: Filled, desktop, lightMy sales: Filled, desktop, dark
My sales: Filled, phone, lightMy sales: Filled, phone, dark

Who Seller

What Demo orders placed on the seller’s listings.

RealThe running app on the demo data.

My sales: Empty, desktop, lightMy sales: Empty, desktop, dark
My sales: Empty, phone, lightMy sales: Empty, phone, dark

Who Seller

What Demo orders placed on the seller’s listings.

RealThe running app on the demo data.

Users

Built
/{locale}/users
Users: Filled, desktop, lightUsers: Filled, desktop, dark
Users: Filled, phone, lightUsers: Filled, phone, dark

Who Administrator

What A plain list of accounts. The working screen for staff is the admin’s Users page.

RealThe running app on the demo data.

Users: No role, desktop, lightUsers: No role, desktop, dark
Users: No role, phone, lightUsers: No role, phone, dark

Who Administrator

What A plain list of accounts. The working screen for staff is the admin’s Users page.

RealThe running app on the demo data.

When something is off

The screens that answer a wrong address, a failure, a closed door and a closed account.

Not found

Built
any unknown address
Not found: The page, desktop, lightNot found: The page, desktop, dark
Not found: The page, phone, lightNot found: The page, phone, dark

Who Anyone

What The vitrine with its brass 404 plaque, the address asked for, the way back.

RealThe running app on the demo data.

Account suspended

Built
/{locale}/account-suspended
Account suspended: After signing in, desktop, lightAccount suspended: After signing in, desktop, dark
Account suspended: After signing in, phone, lightAccount suspended: After signing in, phone, dark

Who A suspended account

What An administrator suspended the account: sign-in and every request answer 403 ACCOUNT_SUSPENDED, the client signs out and lands here.

RealThe running app on the demo data.

Error

Built
error.tsx
Error: The page, desktop, lightError: The page, desktop, dark
Error: The page, phone, lightError: The page, phone, dark

Who Anyone

What A failure while rendering. The reference helps support find it.

API mockedThe listing answers with a body the page cannot draw, so the page itself fails: nothing in the data set does that.

Demo data: products and photos

Brands and products appear as demo data only. The photos are openly licensed, resized, cropped and marked DEMO. Credits: