How temikayode/pheran works
Purpose and runtime
PHERAN is a vanilla HTML/CSS/JavaScript e-commerce prototype for a Nigerian luxury fashion label. It is served by a Node.js/Express backend that also exposes mock commerce and authentication APIs. Primary launch path: mvp/mock-server/server.js, then browse mvp/homepage.html.
Storefront page layer
The customer journey is implemented as static HTML pages: landing, catalogue, product detail, cart, checkout, confirmation, account, bespoke orders, and editorial/support content. Key routes/pages include mvp/homepage.html, mvp/category.html, and mvp/product.html; transaction stages continue through mvp/cart.html, mvp/checkout.html, and mvp/confirmation.html.
Shared client behavior and state
mvp/script.js is the central browser-side behavior layer for page logic, catalogue interaction, cart, wishlist, and search. Product-page selection and cart actions flow from browser UI to the API/server-backed data model; account screens use the auth endpoints. mvp/mobile-menu.js supplies the shared mobile navigation, while mvp/icons.js centralizes inline SVG assets.
Catalogue and media boundary
The initial product catalogue is flat JSON in mvp/data.json, containing product attributes such as media, sizes, colours, fabrics, and ratings. The frontend renders/filter products from this model, while the Express server provides product/search/facet APIs. Video media is served as repository assets under videos/; the hero experience begins at mvp/homepage.html.
Express commerce and auth API
mvp/mock-server/server.js is the backend boundary for products, search/facets, cart, orders, sessions, and uploads. It runs on port 4000 and serves the static MVP plus API endpoints. Authentication uses bcrypt password hashing, JWTs in HTTP-only cookies, and cookie parsing for register, login, current-user, logout, and profile updates. User persistence is a gitignored JSON file (mvp/users.json, created at runtime), rather than a database.
Administration and content management
Admin views are separate static screens under mvp/admin/, led by mvp/admin/index.html and mvp/admin/products.html. They depend on the backend’s protected product-management and image-upload capabilities, making the server the authorization and persistence boundary for catalogue changes.
Presentation and offline delivery
Styling is layered between global design CSS and MVP-specific styles: css/variables.css, mvp/styles.css, and mvp/styles-upgrade.css. PWA support is defined by manifest.json and sw.js, enabling install/offline caching behavior. Deployment intent is Railway (railway.toml); Supabase SQL and RLS files (mvp/mock-server/supabase-setup.sql, rls-policies.sql) indicate a planned PostgreSQL/Supabase migration, not the current runtime datastore.
Components 18
Storefront
- Hero landing · Primary storefront entry point.
mvp/homepage.html - Catalogue
mvp/category.html - Product detail
mvp/product.html - Cart to confirmation · Cart, checkout, and order confirmation stages.
mvp/cart.html - Storefront logic · Shared catalogue, cart, wishlist, search, and account behavior.
mvp/script.js - Mobile navigation
mvp/mobile-menu.js - Design styles · Global tokens plus MVP styling and upgrades.
css/variables.css - Product catalogue · Initial flat product model for client rendering.
mvp/data.json - Video media
Express Backend
- Commerce API server · Serves the MVP and commerce, session, and upload APIs on port 4000.
mvp/mock-server/server.js - Authentication · bcrypt credentials and JWT HTTP-only cookie sessions.
mvp/mock-server/server.js - Commerce APIs · Products, search/facets, cart, orders, and uploads.
mvp/mock-server/server.js - Runtime users · Gitignored user file created at runtime.
Administration
- Admin dashboard
mvp/admin/index.html - Product management
mvp/admin/products.html
Delivery & Future Data
- Offline PWA · Install manifest and offline cache behavior.
sw.js - Railway deployment
railway.toml - Planned Supabase schema · PostgreSQL and RLS migration target; not current runtime storage.
mvp/mock-server/supabase-setup.sql
Connections 19
- Hero landing → Storefront logic: loads
- Hero landing → Video media: uses hero media
- Catalogue → Storefront logic: loads
- Product detail → Storefront logic: loads
- Cart to confirmation → Storefront logic: loads
- Storefront logic → Mobile navigation: shares navigation
- Storefront logic → Design styles: presented by
- Storefront logic → Product catalogue: renders initial catalogue
- Storefront logic → Commerce APIs: product, search, cart, orders
- Storefront logic → Authentication: account sessions
- Commerce API server → Commerce APIs: hosts
- Commerce API server → Authentication: hosts
- Commerce API server → Product catalogue: reads catalogue
- Authentication → Runtime users: persists users
- Admin dashboard → Product management: links to
- Product management → Commerce APIs: protected product changes
- Offline PWA → Hero landing: caches storefront
- Railway deployment → Commerce API server: deploys
- Planned Supabase schema → Runtime users: planned replacement