SmartSchool Experience Center

• The store

  • Show 34 products across seven collection pages without repeating the same markup seven times.
  • Let a buyer narrow a long list by price, stock and type, and see what is active at a glance.
  • Give each product a full page with a gallery, price, specs and a way to pick a size or camera on boards.
  • Sizes, prices and specs must line up so products can be compared across the 34.

• The business

  • Buyers are procurement staff and teachers, not shoppers browsing for fun. Clarity and comparison matter more than flourish.
  • Prices are in rupees and the design leaves room for EMI, free installation and warranty details.
  • The catalog is still being filled in, so adding a product has to be a small change.
  • Staff compare options in rupees, so prices and EMI must be easy to find on every product.

• The build

  • No framework and no build step. The store runs from plain files and a few PHP includes.
  • There is no database, so the cart, the account and the browsing history live in the browser.
  • Every page has to work on a phone, where most buyers will first open it.
  • The store has to work for keyboard and screen-reader users from the start, not be patched later.

• What I wanted to improve

  • One product list that drives every collection page, the product page and the cart.
  • A cart that remembers what was added, and a checkout form that checks its required fields.
  • Filters that work the same way on every collection, as a sidebar on a laptop and a sheet on a phone.
  • A look that is calm and consistent: one font and one accent color.

What changed

How a visitor moves through it

Colors

• Lavender canvas

  #FAF8FF

  The page background on a laptop (white on a phone)

• White

  #FFFFFF

  Cards and controls

• Image well

  #F2F3FF

  The pale panel behind every product photo

• Ink

  #131B2E

  Headings and body text

• Soft ink

  #45464C

  Secondary text

• Black

  #000000

  The main button, such as Add to Cart

• Indigo

  #4648D4

  The one accent: focus rings, active filters, links and confirmation

• Error red

  #BA1A1A

  Form errors

Design principles

• No borders on cards

  Cards are white on a tinted page and use a soft shadow scale for depth. A thin line is kept only for dividers.

• Line art instead of stock images

  Product cards without a photo use hand-drawn inline icons colored from the same palette, so a missing photo never leaves a gray box. Where a real photo exists it is blended onto the image well so white-background pictures sit flush.

• One filter panel, two shapes

  The same filter element is a sticky sidebar from 900 pixels wide and a slide-up sheet below that, so the controls are written once.

• A bottom tab bar on phones

  Below 900 pixels a four-tab bar (Home, Shop, Cart, Account) sits at the bottom. A fifth Wishlist tab was left out because the store has no wishlist.

• Studio bundles look different

  The three studio bundles get a blue banner strip, free installation and freight badges, and the full bundle title, so a bundle is not mistaken for a single product.

• Light only, calm motion

  There is no dark theme. Transitions are short, and they are switched off for visitors who ask their device for reduced motion.

Browsing, laptop

Buying, laptop

On a phone

Components

• Product card

  Photo or line-art, brand, short title, price with an optional struck-through price, a rating line and an Add to Cart button. The whole card is clickable, while the title link is the one keyboard users reach.

• Filter chips

  Every active filter shows as a chip with a remove button, and Clear all resets them. The chip row is announced to screen readers when it changes.

• Cart drawer

  A panel that slides in from the right with quantity buttons, a size line for boards, a free-shipping note and two buttons that go to checkout.

• Quick view

  A dialog on each card that shows the product without leaving the list.

• Warranty pills

  A small selectable control for cameras that carry a warranty choice. It is cosmetic and does not change the price.

• One product list for everything

  All 34 products live in one array in js/script.js. Collection pages, the product page, related rows and the cart all read from it, so adding a product is one new object and nothing else. A page narrows the list by a value on the body tag, such as boards or cameras.

• PHP only to share markup

  PHP is used for includes, so the header, footer and collection layout are written once. It holds no logic, sessions or data. The trade-off is that pages need a PHP server to run: opening a file straight from disk no longer works.

• State in the browser

  With no backend, the cart, the demo account, recently viewed products and the browsing-history setting are kept in the browser's local storage, and the dismissed announcement bar in session storage.

• Build one layout well

  The wireframe canvas explored four collection layouts. I built the first, the sidebar layout, because it is the most familiar for a store, and left the other three as design records.

• 34

  Products

• 20

  Page files

• 7

  Collection pages

• 6

  Shared template files

• 1,180

  Catalog script lines

• 537

  Shared script lines

• 2,199

  Stylesheet lines

• 47

  Commits

• What it is built with

  PHP includes, HTML5, one stylesheet with custom properties and a mobile-first set of breakpoints (base, 768, 900 and 1024 pixels), and two plain JavaScript files with no modules or bundler. Fonts come from Google Fonts and icons are an inline SVG sprite, so there is no icon library.

• How a page is put together

  Each page sets a few variables (title, description, active collection) and includes the shared header. A collection page then includes one shared collection template, and every page ends with the shared footer. The footer adds the promo carousel, the toast message, and the two script tags.

• Two scripts, two jobs

  common.js runs first on every page and owns the shell: menu, search, filter-sheet open and close, cart, toast, announcement bar, newsletter and demo account. It hands script.js a small set of helpers on window.SmartSchool. script.js owns the catalog: the product list, card rendering, filters, chips, sort and the product page.

• A product page filled in by script

  product.php cannot know a product from its address without a second copy of the catalog in PHP, which could drift. So the page renders empty mount points and script.js fills them from the one list. The category text (key features, what is in the box, uses, FAQs) is written for all categories, and the script reveals the one that matches.

How a product reaches the screen

• Seven collection pages from one template

  Each collection sets its heading, promo copy and banners, then includes the shared template. The grid, filters, sort and empty state are the same everywhere, and each page also carries its own FAQ list, written for that category.

• Filters, chips and sort

  Filters cover in stock, a price range and the category options of the page, and boards add Android, size, brand and camera. Changes apply on change rather than on every keystroke. Each active filter becomes a chip, and sort has four modes: best selling, price low to high, price high to low and name A to Z.

• A cart that remembers

  Add to Cart saves the item in the browser, updates the count in the header and opens the cart drawer as the confirmation. The drawer changes quantity, removes items, shows a size line for boards and a free-shipping note shown for every non-empty cart, because the demo has no shipping fee. Sold-out items show Notify Me instead.

• Checkout with real validation

  The Information step has a contact block, a Ship or Pickup toggle, and an address form. Six fields are required (first name, last name, address, city, PIN and phone), each with its own inline message. The order summary reads the same cart and shows an 18 percent GST-inclusive estimate, which is illustrative because there is no tax engine.

• A demo account

  Login offers Google, Microsoft and email paths, and all of them sign in the same demo user. The header then swaps Login for a My Account menu, and the account page has Orders and Profile tabs. It shows how the flow would look and does not secure anything.

• Size and camera switcher on boards

  A board's page shows its sibling sizes from the same brand as pills. Choosing a size opens the matching product, keeping the camera choice where that combination exists. The camera row only appears when a size offers two options.

• Recently viewed, with a privacy switch

  The last 12 products a visitor opened are remembered in the browser and can be cleared. Browsing history can also be turned off, and the choice is saved.

• Product photo full view

  On products that have a real photo, clicking the image or the link under it opens a lightbox with the photo at full size.

• Built in

  A skip link to the main content. A visible 2 pixel focus outline that is never turned off. Icon-only buttons have text labels. The in-stock switch is a real switch with its state kept in sync. The chip row and the toast are live regions, so changes are announced. The current page is marked in the breadcrumb and category rail. Form errors sit next to their field. Motion is switched off for visitors who ask for less.

• Keeping hidden controls out of the tab order

  When the mobile filter sheet is closed it is marked inert, so its controls cannot be tabbed to. The clickable-card pattern uses a cover link that is hidden from keyboards and screen readers, so they land on the real title link instead of an unlabeled link.

• Known and not fixed

  On checkout, the Your cart is empty message is a hidden block whose own display rule overrides the hidden attribute, so it shows under the form even when the cart has items. It is the same kind of bug as the Login link fix, and it is not fixed yet.

• Not checked

  There is no focus trap inside the mobile menu or the filter sheet: Escape and the backdrop close them, but Tab can still walk out to the page behind. Color contrast was chosen with care but not tested with a tool against WCAG on every pairing.

• How it is wired

  A vercel.json file rewrites the home page and every clean page address to a single function, api/index.php, which includes the matching file from a copy of the pages in api/pages. One function is used because the free plan caps a deployment at 12, and it checks the page name against a list of 20 allowed pages. The real top-level PHP files are left out of the upload by .vercelignore so they cannot shadow the rewrites.

• Where it stands today

  The deployment returns 404 on every address, including the home page, when last checked. It was live before, and I have not redeployed it. That is why this page has no link to the site, and the screens above come from running the code locally.

From source to production

• Problem

  The product page's two-column layout never applied. The code set grid columns but never switched the container from flex to grid.

  Solution

  Switched the container to grid at 900 pixels, then found that the override sat earlier in the stylesheet than the base rules, so equal specificity let the base win at every width. Moved it into its own media block after them.

  Result

  The buy box and sticky gallery sit side by side on a laptop.

• Problem

  A script error on the login page: an unguarded line that set the cart count threw before the shared helpers were exported, silently breaking the whole page.

  Solution

  Guarded every piece of shared-shell wiring so it skips elements the stripped-down login header does not have.

  Result

  The login page works with its minimal header.

• Problem

  The hidden Login link kept showing at laptop widths, because the button style's display beat the browser's hidden rule at equal specificity.

  Solution

  Added an ID-level override so hidden wins.

  Result

  Login and My Account swap cleanly.

• Problem

  Camera cards and flat panels shared one collection page, because camera-bundled boards and the studio bundles were also tagged as cameras.

  Solution

  Made the cameras tag strict to products that are cameras, and gave bundles their own warranty and installation badges so they lost nothing.

  Result

  The PTZ Cameras page shows only the 3 camera products.

• Problem

  In the NOVA redesign, a blurred layer on the header made it the container for the fixed mobile menu and clipped the menu to 64 pixels tall.

  Solution

  Moved the white blurred layer to a pseudo-element of the header instead of the header itself.

  Result

  The mobile menu opens at full height.

What changed for visitors

• Building

  • Source order decides ties between equal CSS selectors, whatever the media query says. Put overrides after the base rules.
  • Guard shared code against pages that lack an element. One unguarded line broke a whole page.
  • Keep one source of truth. A second copy of the catalog in PHP would have drifted, so the page is filled in by script.
  • A hand-made mirror for production works only if someone remembers to update it.

• Design

  • Depth can come from tone and shadow instead of borders, and it keeps a dense grid calm.
  • Do not add a control the product does not have: the tab bar has no Wishlist because there is no wishlist.

• What I'd improve

  • Redeploy the site so the live link works again, and generate the Vercel copy of the pages instead of copying by hand.
  • Replace placeholder prices and stock with real data from a backend, and build the Shipping and Payment steps.
  • Add a focus trap in the mobile menu and filter sheet, and check contrast and screen-reader use with tools.
  • Add real product photography and the pages for Content and Books.

• What I built

  • All 20 pages, the shared header, footer and templates, and the product page.
  • The catalog script, filters, cart, checkout form and demo account.
  • The stylesheet, written to follow the NOVA design from Google Stitch.
  • All the JavaScript, with no libraries.

• Provided by others

  • The company, its product range and the brand logo.