{"id":28878370,"url":"https://github.com/simplecyber/product-catlog","last_synced_at":"2025-08-11T05:14:23.838Z","repository":{"id":299481787,"uuid":"1003191229","full_name":"SimpleCyber/Product-CatLog","owner":"SimpleCyber","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-16T20:15:36.000Z","size":74,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-16T20:26:41.189Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://product-cat-log.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/SimpleCyber.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}},"created_at":"2025-06-16T19:07:49.000Z","updated_at":"2025-06-16T20:15:40.000Z","dependencies_parsed_at":"2025-06-16T20:26:59.647Z","dependency_job_id":"064f5070-a859-46d1-a5ba-0e91ea195db2","html_url":"https://github.com/SimpleCyber/Product-CatLog","commit_stats":null,"previous_names":["simplecyber/product-catlog"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SimpleCyber/Product-CatLog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleCyber%2FProduct-CatLog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleCyber%2FProduct-CatLog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleCyber%2FProduct-CatLog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleCyber%2FProduct-CatLog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimpleCyber","download_url":"https://codeload.github.com/SimpleCyber/Product-CatLog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimpleCyber%2FProduct-CatLog/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269833080,"owners_count":24482374,"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-08-11T02:00:10.019Z","response_time":75,"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":[],"created_at":"2025-06-20T17:13:51.669Z","updated_at":"2025-08-11T05:14:23.830Z","avatar_url":"https://github.com/SimpleCyber.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# E-Commerce Product Catalog\n\nA modern e-commerce product catalog built with Next.js, Tailwind CSS, and ShadCN UI components. This application features product listings, search functionality, filtering, cart management, and responsive design.\n\n\u003cdiv\u003e\n  \u003cimg src=\"https://res.cloudinary.com/djpcpmrjd/image/upload/v1750243436/uploads/Product-catlog-home.jpg.png\" alt=\"Home Page\" width=\"30%\" /\u003e\n  \u003cimg src=\"https://res.cloudinary.com/djpcpmrjd/image/upload/v1750243578/uploads/product-callog-details.jpg.png\" alt=\"Product Details\" width=\"30%\" /\u003e\n  \u003cimg src=\"https://res.cloudinary.com/djpcpmrjd/image/upload/v1750243601/uploads/product-catlog-addtocart.jpg.png\" alt=\"Shopping Cart\" width=\"30%\" /\u003e\n\u003c/div\u003e\n\n## Live Demo\n\n[https://product-cat-log.vercel.app](https://product-cat-log.vercel.app)\n\n## Features\n\n- **Product Catalog**: Grid and list view options\n- **Product Details**: Comprehensive product information page\n- **Search**: Real-time product search functionality\n- **Filters**: Category, price range, and rating filters\n- **Shopping Cart**: Persistent cart using local storage\n- **Responsive Design**: Works on all device sizes\n- **Dark/Light Mode**: Toggleable theme\n\n## Technologies Used\n\n- Next.js (App Router)\n- TypeScript\n- Tailwind CSS\n- ShadCN UI Components\n- Framer Motion (Animations)\n- Lucide React (Icons)\n- DummyJSON API (Mock data)\n\n## Project Structure\n\n```bash\nsimplecyber-product-catlog/\n├── components/               # Reusable UI components\n│   ├── cart-sidebar.tsx\n│   ├── filter-sidebar.tsx\n│   ├── header.tsx\n│   ├── product-card.tsx\n│   ├── product-catalog.tsx\n│   ├── product-detail.tsx\n│   ├── theme-provider.tsx\n│   └── ui/                  # ShadCN UI components\n├── contexts/                # Global state management\n│   ├── cart-context.tsx\n│   └── filter-context.tsx\n├── hooks/                   # Custom React hooks\n├── lib/                     # Utility functions\n└── src/app/                 # Next.js App Router\n    ├── globals.css\n    ├── layout.tsx\n    ├── page.tsx\n    └── product/[id]/        # Dynamic product pages\n```\n\n## Getting Started\n\n### Prerequisites\n- Node.js (v18 or later)\n- npm or yarn\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/SimpleCyber/Product-CatLog.git\ncd Product-CatLog\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Start the development server:\n```bash\nnpm run dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n## Setup Configuration\n\n### Tailwind CSS\n```bash\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n### ShadCN UI Components\n```bash\nnpx shadcn@latest init\nnpx shadcn@latest add button input badge sheet card slider\n```\n\n### Additional Dependencies\n```bash\nnpm install lucide-react framer-motion\n```\n\n## Development Process\n\n**Stage 1: Project Setup**\n- ✅ Next.js project initialization\n- ✅ Tailwind CSS configuration\n- ✅ GitHub repository setup\n- ✅ Vercel deployment\n\n**Stage 2: Header Component**\n- ✅ Navigation with logo\n- ✅ Search bar functionality\n- ✅ Cart display with counter\n- ✅ Dark/light mode toggle\n\n**Stage 3: Product Catalog**\n- ✅ Product card design\n- ✅ API data fetching\n- ✅ Pagination with load more\n- ✅ Grid/list view options\n\n**Stage 4: Product Details**\n- ✅ Dynamic routing [id]\n- ✅ Product information display\n- ✅ Add to cart functionality\n- ✅ Related products section\n\n**Stage 5: Filtering System**\n- ✅ Category filters\n- ✅ Price range slider\n- ✅ Rating-based sorting\n\n**Stage 6: Search**\n- ✅ Real-time product search\n- ⏳ Auto-complete (in progress)\n\n**Stage 7: Shopping Cart**\n- ✅ Local storage persistence\n- ✅ Cart sidebar panel\n- ✅ Quantity management\n- ✅ Total calculation\n\n**Stage 8: View Options**\n- ✅ Grid and list layouts\n\n## Deployment\n\nThe application is deployed on Vercel with automatic deployments from the main branch.\n\n## License\n\nThis project is open source and available under the MIT License.\n\n## Acknowledgments\n\n- DummyJSON for mock product data\n- ShadCN for UI components\n- Claude AI for better tailwind styling and debugging\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplecyber%2Fproduct-catlog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplecyber%2Fproduct-catlog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplecyber%2Fproduct-catlog/lists"}