Pet-food storefront built with React 18 + Vite. Plain hooks + inline styles, no UI framework.
npm install
npm run dev # http://localhost:5173
npm run build # production bundle in dist/index.html Vite entry
src/
main.jsx mounts <App>
App.jsx layout shell + screen router (screen -> component)
store.jsx StoreContext: all state, nav/cart/filter handlers, cart totals hook
lib.js css() style helper, money(), enrich(), fontStacks
data.js PRODUCTS, BLOG_POSTS, HERO_SLIDES
styles.css hover/focus states, keyframes (what inline styles can't express)
components/ TopBar, Header, Footer, Toast, ProductCard, ImgSlot
screens/ Home, Listing, Product, Cart, Checkout, Confirmed, About, Blog, Account
public/uploads/ hero & category photos (served at /uploads/...)
- Navigation is
screenstate instore.jsx, not a router.App.jsxmaps eachscreenvalue to a component. To adopt React Router, give each screen a route and replacego()with navigation. - State (cart, filters, active product, hero slide, toast) lives in
StoreProvider; components read it viauseStore().useCartDetailed()derives line items + totals for Cart/Checkout. - Data is the constants in
data.js— swap for your API/CMS (keep the shape, or adjustenrich()). - Images inside cards/gallery/promos are
<ImgSlot>striped placeholders; replace with<img>and your own assets. Hero + category photos are real<img>frompublic/uploads/.
navFont—Poppins|Fredoka|Quicksand|Baloo 2|Nunito(defaultNunito).navHoverColor— hex for the nav underline/hover (default#F5B800).
Fonts are loaded in index.html <head>.