{"id":31294258,"url":"https://github.com/artem-makarchenko-dev/next-shop","last_synced_at":"2025-09-24T19:59:36.874Z","repository":{"id":316056356,"uuid":"1061731556","full_name":"Artem-Makarchenko-Dev/next-shop","owner":"Artem-Makarchenko-Dev","description":"Next-Shop — modern e-commerce demo with Next.js, React, Tailwind, Redux, i18n, Vercel","archived":false,"fork":false,"pushed_at":"2025-09-22T11:51:39.000Z","size":2063,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-22T13:16:21.908Z","etag":null,"topics":["dark-mode","ecommerce-application","i18n","nextjs","nextjs15","react","react-query","react-redux","redux-toolkit","tailwind-css","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://artem-makarchenko-next-shop.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Artem-Makarchenko-Dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-22T10:01:34.000Z","updated_at":"2025-09-22T11:51:43.000Z","dependencies_parsed_at":null,"dependency_job_id":"3927fe8e-643e-4636-9309-61e773ed4e93","html_url":"https://github.com/Artem-Makarchenko-Dev/next-shop","commit_stats":null,"previous_names":["artem-makarchenko-dev/next-shop"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Artem-Makarchenko-Dev/next-shop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artem-Makarchenko-Dev%2Fnext-shop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artem-Makarchenko-Dev%2Fnext-shop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artem-Makarchenko-Dev%2Fnext-shop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artem-Makarchenko-Dev%2Fnext-shop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Artem-Makarchenko-Dev","download_url":"https://codeload.github.com/Artem-Makarchenko-Dev/next-shop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Artem-Makarchenko-Dev%2Fnext-shop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276810919,"owners_count":25708883,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-24T02:00:09.776Z","response_time":97,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-mode","ecommerce-application","i18n","nextjs","nextjs15","react","react-query","react-redux","redux-toolkit","tailwind-css","vercel-deployment"],"created_at":"2025-09-24T19:59:34.976Z","updated_at":"2025-09-24T19:59:36.866Z","avatar_url":"https://github.com/Artem-Makarchenko-Dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My pet-project with using React.js and Next.js\n\n[![Next.js](https://img.shields.io/badge/Next.js-15-black?logo=next.js)](https://nextjs.org/)\n[![React](https://img.shields.io/badge/React-18-61DAFB?logo=react\u0026logoColor=white)](https://react.dev/)\n[![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3-38B2AC?logo=tailwind-css\u0026logoColor=white)](https://tailwindcss.com/)\n[![Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?logo=vercel)](https://vercel.com/)\n\n---\n\n## 📑 Table of Contents\n\n- [🚀 Deployment](#-deployment)\n- [🖼️ Screenshots](#-screenshots)\n- [📖 Project Overview](#-project-overview)\n- [📂 Project Structure](#-project-structure)\n- [⚡ Features](#-features)\n- [🌍 Internationalization Example](#-internationalization-example)\n- [🌟 React \u0026 Next.js Features \u0026 Examples in This Project](#-react--nextjs-features--examples-in-this-project)\n  - [⚛️ React](#️-react)\n  - [⚡ Next.js](#-nextjs)\n- [🛠️ Getting Started](#️-getting-started)\n- [📜 License](#-license)\n\n---\n\n## 🚀 Deployment\n\nThe project is deployed on **Vercel**:\n\n[![Demo on Vercel](https://vercel.com/button)](https://artem-makarchenko-next-shop.vercel.app/)\n\n---\n\n## 🖼️ Screenshots\n\n### Home Page\n\n[![Home Page](/public/screenshots/home.png)](/public/screenshots/home.png)\n\n### Product Details\n\n[![Product Details](/public/screenshots/product-details.png)](/public/screenshots/product-details.png)\n\n### Cart Page\n\n[![Cart Page](/public/screenshots/cart.png)](/public/screenshots/cart.png)\n\n---\n\n## 📖 Project Overview\n\nNext-Shop is a demo **e-commerce web store** built as a pet-project using **React.js** and **Next.js (App Router)**.  \nThe goal was to showcase modern frontend practices with:\n\n- 🌗 **Dark/Light theme switcher**\n- 🌍 **Internationalization** (English + Ukrainian with `next-intl`)\n- 🛒 **Shopping cart with persistence**\n- 📦 **Product catalog and details pages**\n- ✅ **Checkout with form validation**\n- 🔐 **Auth forms (login/signup)**\n- 📑 **Static informational pages** (FAQs, Privacy Policy, Terms of Service, etc.)\n- 🚀 **Deployment on Vercel**\n\n---\n\n## 📂 Project Structure\n\n```\n/app                 → Next.js App Router pages (server \u0026 client)\n/pages-client        → Client-only page components\n/shared              → Shared UI components, contexts, utilities\n/entities            → Business entities (product, review, user, etc.)\n/features            → Feature modules (cart, filters, theme, i18n)\n/widgets             → Page-level UI blocks (Header, Footer, Hero, etc.)\n/messages            → Localization dictionaries (EN, UK)\npublic/              → Static assets\nstyles/              → Global CSS, Tailwind theme variables\ntailwind.config.ts   → Tailwind configuration\nnext.config.ts       → Next.js configuration\n```\n\n---\n\n## ⚡ Features\n\n- **Responsive design** with TailwindCSS\n- **Dark/Light mode** with `ThemeContext`\n- **Multi-language support** (EN/UK) with `next-intl`\n- **Cart functionality** (add, update, remove, total calculation)\n- **Checkout flow** with validation and payment method select\n- **Authentication**: signup \u0026 login forms\n- **Product pages** with gallery, related products, reviews\n- **Reusable UI components** (buttons, tags, modals, loaders, tooltips)\n- **Static info pages**: FAQs, Shipping \u0026 Returns, Privacy Policy, Terms of Service, Contact\n- **Deployment on Vercel** with build optimization\n\n---\n\n## 🌍 Internationalization Example\n\n- `messages/en/*.json`\n- `messages/uk/*.json`\n\nUsage in code:\n\n```tsx\nimport { useTranslations } from \"next-intl\";\n\nconst t = useTranslations(\"cart\");\nreturn \u003cbutton\u003e{t(\"actions.checkout\")}\u003c/button\u003e;\n```\n\n---\n\n## 🌟 React \u0026 Next.js Features \u0026 Examples in This Project\n\n### ⚛️ React\n\n| Feature                                  | Example File                                                     |\n| ---------------------------------------- | ---------------------------------------------------------------- |\n| **JSX, Components, Props**               | `Header.tsx`, `ProductCard.tsx`                                  |\n| **Events (onClick, onChange, onSubmit)** | `AuthForm.tsx`, `CartItem.tsx`                                   |\n| **Conditional Rendering**                | `CartWidget.tsx`, `AuthButton.tsx`                               |\n| **List Rendering**                       | `ProductsGrid.tsx`, `Footer.tsx`                                 |\n| **Fragments**                            | `ProductsPageClient.tsx`                                         |\n| **StrictMode**                           | `layout.tsx`                                                     |\n| **useState**                             | `ProductQuickViewModal.tsx`, `ProductReviews.tsx`                |\n| **useEffect**                            | `TooltipProvider.tsx`, `ThemeContext.tsx`                        |\n| **useContext**                           | `ThemeToggle.tsx`, `LocaleSwitcher.tsx`                          |\n| **useReducer**                           | `CheckoutForm.tsx`, `AuthForm.tsx`, `ProductsPageClient.tsx`     |\n| **useMemo / useCallback**                | `ProductFiltersForm.tsx`, `ProductsPageClient.tsx`               |\n| **useRef**                               | `TooltipProvider.tsx`, `TextInput.tsx`                           |\n| **forwardRef / useImperativeHandle**     | `TextInput.tsx` (focus)                                          |\n| **Custom Hooks**                         | `useCartPersist.ts`, `useServerLocale.ts`, `useProductsQuery.ts` |\n| **React.memo**                           | `ProductCard.tsx`                                                |\n| **Selectors + memoization**              | `cartSlice.selectors.ts`, `authSlice.selectors.ts`               |\n| **API requests (React Query)**           | `useProductsQuery.ts`, `useProductQuery.ts`                      |\n| **Cookies / localStorage**               | `useCartPersist.ts`, `ThemeContext.tsx`                          |\n| **SSR hydration with React Query**       | `ProductsPageClient.tsx`                                         |\n| **Redux Toolkit (state management)**     | `cartSlice.ts`, `authSlice.ts`                                   |\n| **Redux selectors**                      | `cartSlice.selectors.ts`, `authSlice.selectors.ts`               |\n| **Portals**                              | `Modal.tsx`, `ProductQuickViewModal.tsx`                         |\n| **ErrorBoundary**                        | `ErrorBoundary.tsx`                                              |\n| **Suspense + lazy**                      | `CartPageClient.tsx`, `CheckoutPageClient.tsx`                   |\n| **Loader / Skeleton**                    | `Loader.tsx`, `ProductSkeleton.tsx`                              |\n| **Error handling (refetch, retry)**      | `ErrorState.tsx`                                                 |\n| **Tooltip (Render Props)**               | `TooltipProvider.tsx`, `CartWidget.tsx`                          |\n| **HOC (withLoading)**                    | `withLoading.tsx`                                                |\n| **Compound Components**                  | `ProductGallery.tsx`                                             |\n| **Uncontrolled components**              | `TextInput.tsx`                                                  |\n\n---\n\n### ⚡ Next.js\n\n| Feature                                   | Example File                                                             |\n| ----------------------------------------- | ------------------------------------------------------------------------ |\n| **App Router (Server Components)**        | `/app/page.tsx`, `/app/(routes)/products/[id]/page.tsx`                  |\n| **Client Components (`\"use client\"`)**    | `CartWidget.tsx`, `ThemeToggle.tsx`                                      |\n| **Dynamic Routes**                        | `/app/(routes)/products/[id]/page.tsx`                                   |\n| **Catch-all Routes**                      | `/app/(routes)/info/[[...slug]]/page.tsx`                                |\n| **notFound()**                            | `ProductDetailsPageClient.tsx`                                           |\n| **Link Prefetching**                      | `\u003cLink\u003e` in `HeaderNav.tsx`                                              |\n| **CSR (Client-Side Rendering)**           | `useProductsQuery.ts`, `useProductQuery.ts`                              |\n| **SSR (Server-Side Rendering)**           | `product/[id]/page.tsx`                                                  |\n| **SSG (Static Site Generation)**          | `ContactPage.tsx`, `AboutPage.tsx`                                       |\n| **ISR (Incremental Static Regeneration)** | `products/page.tsx` with `revalidate`                                    |\n| **React Query + SSR Hydration**           | `ProductsPageClient.tsx`                                                 |\n| **Middleware (auth guard)**               | `middleware.ts`                                                          |\n| **Layouts**                               | `layout.tsx` (global), nested layouts                                    |\n| **next/font**                             | `layout.tsx` (Geist, Geist_Mono)                                         |\n| **next/image**                            | `ProductCard.tsx`, `ProductGallery.tsx`                                  |\n| **next/script**                           | `layout.tsx` (Google Analytics)                                          |\n| **Tailwind CSS (themes)**                 | `globals.css`, `tailwind.config.ts`                                      |\n| **Global Styles**                         | `globals.css`                                                            |\n| **CSS Modules / SCSS**                    | `ProductCard.module.scss`                                                |\n| **Suspense / lazy**                       | `CartPageClient.tsx`, `CheckoutPageClient.tsx`                           |\n| **Prefetch / caching**                    | Links with ISR/SSG                                                       |\n| **SEO: metadata**                         | `layout.tsx`, `product/[id]/page.tsx`                                    |\n| **OpenGraph / Twitter Metadata**          | `product/[id]/page.tsx`                                                  |\n| **Favicon**                               | `/public/favicon.ico`                                                    |\n| **Deployment on Vercel**                  | `vercel.json`, `next.config.ts`                                          |\n| **Internationalization (next-intl)**      | `Header.tsx`, `Footer.tsx`, `/messages/en/*.json`, `/messages/uk/*.json` |\n| **Dark/Light Theme Toggle**               | `ThemeContext.tsx`, `ThemeToggle.tsx`                                    |\n\n---\n\n## 🛠️ Getting Started\n\n### 1. Clone the repo\n\n```bash\ngit clone https://github.com/Artem-Makarchenko-Dev/next-shop.git\ncd next-shop\n```\n\n### 2. Install dependencies\n\n```bash\nnpm install\n# or\nyarn install\n```\n\n### 3. Run development server\n\n```bash\nnpm run dev\n```\n\nThe app will be available at [http://localhost:3000](http://localhost:3000).\n\n---\n\n## 📜 License\n\nThis project is created as a personal **pet-project** for learning purposes.  \nFeel free to fork and experiment!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartem-makarchenko-dev%2Fnext-shop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartem-makarchenko-dev%2Fnext-shop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartem-makarchenko-dev%2Fnext-shop/lists"}