React · Redux · Firebase
Premium Cameras
A full e-commerce concept for a high-end vintage film camera retailer — built to bring the feel of being helped by a knowledgeable in-store expert to an online storefront, from browsing through checkout to order history.
The homepage — two entry points into the catalog, styled around the products themselves rather than generic banners.
Overview
Premium Cameras is a concept storefront for a fictional high-end film camera shop — the kind of business that's been in operation for decades and has built its reputation on real expertise, not just inventory. The goal was to translate that in-store experience — getting to know the products, trusting the person helping you — into an online shop that still feels considered and premium, rather than a generic template.
It's a fully functional prototype rather than a live business: the product catalog, pricing, and orders are demo data, and no real payments are processed. Authentication is real, though — accounts are created and signed into through Firebase, including Google sign-in.
The browse page — filterable listings with pricing and one-click add-to-cart.
Browsing & catalog
Products are organized by format (35mm, medium format) from the homepage, or browsed directly with filtering on the search page. Each listing shows the product photo, name, and price, with an add-to-cart action that updates state immediately.
- Category-based entry points from the homepage
- Filterable product grid on the search page
- Cart state managed through Redux, so it stays consistent across every page
Cart and checkout — quantity controls, running price, and item removal.
Cart & checkout
The cart is a straightforward table of selected items, with per-item quantity adjustment and removal, followed by a shipping and billing address flow. It's built to demonstrate a complete purchase path end to end, even though no real payment is collected at the end of it.
- Editable quantities and line-item removal
- Separate shipping and billing address steps
- Cart total calculated live from Redux state
Shipping and billing forms as the final step before an order is placed.
Checkout flow
Shipping and billing are separated into distinct steps to mirror a real checkout — including a country selector and the fields a real payment form would need. No card processor is connected behind it, since the goal was the experience of the flow, not a working payment integration.
- Shipping address collected separately from billing
- Structured, validated form fields throughout
- Designed to be extended with a real payment processor later
The account dashboard, showing order history pulled from Firestore.
Accounts & order history
Customers can register and sign in — including Google sign-in through Firebase Authentication — and land on a dashboard showing their past orders, pulled live from Firestore. This is the one part of the app that's fully real: the accounts, sessions, and stored order records all work as they would in production.
- Email/password and Google sign-in via Firebase Auth
- Order history stored and retrieved from Firestore
- Session state shared across the app through Redux
Bringing the brand online
The About page — the same "trusted expert" story a customer would hear walking into the shop.
Architecture
React handles the interface, Redux holds shared state — cart contents, quantities, and the signed-in user — so it stays consistent no matter which page you're on. Firebase covers the backend: Firestore stores product listings and order history, and Firebase Authentication handles account creation and login, including Google sign-in through Firebase's built-in provider rather than a custom OAuth implementation.
Outcome
The result is a storefront that covers the full customer path — browse, cart, checkout, account, order history — with real authentication and data storage behind it, even though the "store" itself is a concept rather than a live business. It was a good exercise in keeping a single source of truth (Redux) in sync with a real backend (Firebase) across a multi-step flow, which is the same problem any real e-commerce app has to solve.