A full-featured online catalog of phones, tablets and accessories. Built with React 18 and TypeScript, using the Context API for state management and i18next for multi-language support.
Demo · Technologies · Setup · Features
An e-commerce style catalog application for browsing phones, tablets and accessories. The project is built as a fully typed React application with routing, a cart, a favourites list, and localized UI text.
State management is handled through React's Context API combined with custom hooks, rather than an external state library.
| Technology | Purpose |
|---|---|
| React 18 | UI library |
| TypeScript | Static typing |
| Vite | Build tool and dev server |
| React Router | Client-side routing |
| Context API | Global state management (ProductsContext) |
| Custom Hooks | Reusable logic (useProducts) |
| i18next / react-i18next | Internationalization (multi-language UI) |
| Sass (SCSS) | Styling, variables, breakpoints |
| Bulma | CSS framework base |
| classnames | Conditional class handling |
| react-content-loader | Skeleton loading states |
| react-transition-group | UI transitions/animations |
| Font Awesome | Icons |
| Cypress | End-to-end testing |
| ESLint / Stylelint / Prettier | Code quality and formatting |
smartphone-catalog/
├── src/
│ ├── components/
│ │ ├── CardCarousel/
│ │ ├── Carousel/
│ │ ├── Cart/
│ │ ├── Category/
│ │ ├── Container/
│ │ ├── Favourites/
│ │ ├── Footer/
│ │ ├── Header/
│ │ ├── HomePage/
│ │ ├── MobileMenu/
│ │ ├── NavigateBar/
│ │ ├── NotFound/
│ │ ├── NotProduct/
│ │ ├── ProductCard/
│ │ ├── ProductDetailsPage/
│ │ └── ProductPage/
│ ├── context/
│ │ └── ProductsContext.tsx # Global product state
│ ├── hooks/
│ │ └── useProducts.ts # Custom hook for accessing product data
│ ├── styles/ # Global SCSS (colors, fonts, breakpoints, grid)
│ ├── types/ # Shared TypeScript types
│ ├── App.tsx
│ └── i18n.ts # i18next configuration
├── package.json
└── README.md
1. Clone the repository
git clone https://github.com/DebHtm/smartphone-catalog.git
cd smartphone-catalog2. Install dependencies
npm install3. Run in dev mode
npm start4. Run linters
npm run lint5. Run tests
npm test- Product catalog: phones, tablets and accessories
- Product details page with full specifications
- Category browsing and product cards
- Shopping cart
- Favourites list
- Featured products carousel
- Mobile-friendly navigation with a burger menu
- Multi-language interface (i18next)
- Skeleton loaders while data is fetching
- Custom 404 / product-not-found pages
- Fully typed codebase with TypeScript
- Responsive design across breakpoints
- End-to-end tests with Cypress
Denys — full-stack pet project built as a frontend developer portfolio piece.
If you found this project useful, consider giving it a star.