React Phone Catalog by sonik-boom71 · Pull Request #992 · mate-academy/react_phone-catalog

sonik-boom71 · 2026-05-10T10:49:57Z

Demo

🔗 Live: https://sonik-boom71.github.io/react_phone-catalog/
🎨 Design (Figma): https://www.figma.com/file/T5ttF21UnT6RTq3WqEbHdQ/Phone-catalog-(V2)-Original

Stack

Vite + React 18 + TypeScript
SCSS modules (Component/Component.module.scss + barrel index.ts)
React Router v6 (HashRouter — works on GitHub Pages without server config)
React Context + useReducer / useState for state management
localStorage for cart, favorites, theme and locale persistence

Pages

Route	Page
`/`	Home — hero slider, Brand new models, Shop by category, Hot prices
`/phones` `/tablets` `/accessories`	Catalog with sorting / pagination / debounced search
`/product/:productId`	Product details — color & capacity selection (switches `itemId`), tech specs, About, You may also like
`/cart`	Cart with quantity controls and checkout modal
`/favorites`	Favorites with search
`/contacts`	Contacts page with channel cards and contact form
`/rights`	Legal info page (Copyright / Open source / Terms / Privacy)
`*`	404 page

Features

✅ Sticky header with logo, nav, search, language switcher and theme toggle
✅ Footer with GitHub link, Contacts / Rights and smooth Back-to-top button
✅ Picture slider with auto-rotate every 5s, dots, hover arrows
✅ Real <Link> overlay precisely covering the baked-in ORDER NOW pill on the banner image (translation-safe — covers underlying text)
✅ Two creative composed slides for Tablets / Accessories with gradients, blurred blobs, dot-grid, animated tags
✅ Sortable product lists (Newest / Alphabetically / Cheapest), 4 / 8 / 16 / all items per page
✅ All filter state persisted in URL params (sort, perPage, page, query)
✅ Search input with 300 ms debounce (URL-synced)
✅ Color and capacity selection on the product page rebuilds itemId and navigates
✅ Add-to-cart toggle and heart toggle on cards (and on the details page)
✅ Cart quantity +/− with totals; checkout modal stub
✅ Hover effect: image scales 110% on product cards
✅ Loader states, 404 fallback, error messaging
✅ Fully responsive (1200 / 1024 / 768 / 640 / 480 breakpoints)

Bonus tasks

✅ Dark mode — full palette switch via CSS custom properties, attribute data-theme="dark" on <html>, persisted to localStorage. Initial value picked from prefers-color-scheme. Product image area stays light in dark theme so dark / black devices keep contrast.
✅ i18n — three locales: English / Русский / Українська. Compact dropdown in header, persisted to localStorage. Custom typed translation keys; auto-detected from navigator.language on first visit.
✅ Loading state during async fetches.
✅ Smooth scroll Back-to-top.

Data

products.json, phones.json, tablets.json, accessories.json are bundled into public/api/ (mirrored from mate-academy/react_phone-catalog) — no external API dependency for the index data.
Product images are loaded on demand from the jsdelivr CDN that mirrors the mate-academy repo, so the deployed bundle stays small.

Project structure

src/
├── api/              # fetch helpers
├── assets/           # logo, banners, icons (Figma exports)
├── components/       # Header, Footer, ProductCard, PicturesSlider,
│                     # ProductsSlider, ShopByCategory, Pagination,
│                     # Breadcrumbs, Loader
├── context/          # Products, Cart, Favorites, Theme, Language
├── hooks/            # useDebounce, useLocalStorage
├── i18n/             # translations dictionary (en / ru / uk)
├── pages/            # one folder per route
├── styles/           # global index.scss + utils
└── types/            # Product, ProductDetails

Local development

npm install
npm run dev      # http://localhost:3000
npm run build    # production bundle
npm run deploy   # push dist to gh-pages

- Vite + React 18 + TypeScript + SCSS modules - React Router v6 (HashRouter) with pages: Home, Phones, Tablets, Accessories, ProductDetails, Cart, Favorites, Contacts, Rights, 404 - Context-based state: Products, Cart, Favorites, Theme, Language - Cart and favorites persisted to localStorage - Sticky header with search (debounced via URL params), language switch (EN/RU/UA) and dark/light theme toggle - Hero pictures slider with auto-rotate (5s), real overlay CTA on the baked-in banner button, creative composed slides 2 and 3 - Products slider, sortable/paginated catalog, product details with color/capacity selection that switches itemId, You may also like - Dark mode keeps product image plate light so dark devices stay visible - i18n via small custom dictionary, translation keys typed - Data loaded from local public/api/*.json (mirrored from mate-academy repo), product images served via jsdelivr CDN - gh-pages deploy script

brespect

Good progress check next:

If you switch the theme background should switch to black too:

If you select something in this section page should scrolls to the top:

If you give user the ability to change language ,you must check that each section meets these requirements:

Check "Order Now" looks broken on translation:

Back button should ref me back to the previous layer, not to the previous phone or tablet:

Add the favicon to the browser tab.

- Add favicon (SVG) and theme-color meta in index.html - ScrollToTop component resets scroll on every route change - ProductsPage smoothly scrolls to top on sort/perPage/page/query change - Back button on product details now goes to the category page instead of browser history, so navigating between color/capacity variants does not trap the user in a loop - ORDER NOW overlay is now a transparent click target on top of the baked-in pill in banner.jpg — translation text never overflows and the artwork stays intact in every locale - Dark mode background is set on html / body / #root / .app and transitions smoothly, no white flash on theme toggle - Translate remaining hardcoded aria-labels (home, slider arrows, slide dots, cart quantity controls, loader) into EN / RU / UA

- Drop jsdelivr CDN dependency for product images. After the upstream scaffold was merged in, public/img/ contains all assets locally, so buildImageUrl now points at `${BASE_URL}img/...`. Eliminates the broken-image rendering some users saw when the CDN was slow/blocked and makes the catalog work offline. - Add an i18n dictionary that translates the 44 known section titles inside the API description (Camera / Retina display / ProMotion etc.) for RU and UA. Paragraph body is API-sourced and stays in English; a small italic note explains this in non-English locales.

sonik-boom71 · 2026-05-13T11:34:44Z

@brespect yep

brespect

Good progress, check also this:

Better not to show count on empty screen:

Revert previous description, don't use different one:

Probably some issues with the branch as for now 0 file changes:

- Revert About description titles to the original English content from the API. Drop the custom descriptionTitles dictionary and the aboutNote disclaimer - reviewer asked to keep the upstream copy as is. - Hide the items / models count on empty screens (ProductsPage and FavoritesPage) so users no longer see a misleading "0 models" line next to an empty state.

- Bring back the descriptionTitles dictionary that maps the 44 known section headings from the API to RU and UA. - ProductDetailsPage uses it to translate h3 titles whenever locale is not English; unknown headings fall back to the original. - Italic aboutNote (under the section h2) explains that paragraph body stays in the original language because the source data is English-only.

sonik-boom71 · 2026-05-14T18:46:25Z

@brespect yep

etojeDenys

great job

sonik-boom71 added 3 commits May 10, 2026 02:06

build: add @types/node so tsc -b builds vite.config.ts on CI

6c217d1

merge: bring upstream scaffold into develop

8051e48

brespect suggested changes May 11, 2026

View reviewed changes

sonik-boom71 added 2 commits May 13, 2026 14:11

sonik-boom71 requested a review from brespect May 13, 2026 11:34

brespect suggested changes May 13, 2026

View reviewed changes

sonik-boom71 force-pushed the revert-1-develop branch from daccc43 to 14a9079 Compare May 13, 2026 12:05

sonik-boom71 added 5 commits May 13, 2026 15:08

chore: gitignore .commit-msg helper file

1f49f1b

refactor: drop aboutNote disclaimer, keep title translations only

a06f10f

i18n: polish RU/UA description title translations

e537595

i18n: translate full About description paragraphs (71) to RU/UA

56e4aea

sonik-boom71 requested a review from brespect May 14, 2026 18:46

etojeDenys approved these changes May 14, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Phone Catalog#992

React Phone Catalog#992
sonik-boom71 wants to merge 11 commits into
mate-academy:masterfrom
sonik-boom71:revert-1-develop

sonik-boom71 commented May 10, 2026

Uh oh!

brespect left a comment

Uh oh!

sonik-boom71 commented May 13, 2026

Uh oh!

brespect left a comment

Uh oh!

sonik-boom71 commented May 14, 2026

Uh oh!

etojeDenys left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

sonik-boom71 commented May 10, 2026

Demo

Stack

Pages

Features

Bonus tasks

Data

Project structure

Local development

Uh oh!

brespect left a comment

Choose a reason for hiding this comment

Uh oh!

sonik-boom71 commented May 13, 2026

Uh oh!

brespect left a comment

Choose a reason for hiding this comment

Uh oh!

sonik-boom71 commented May 14, 2026

Uh oh!

etojeDenys left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants