https://github.com/simplecyber/product-catlog
https://github.com/simplecyber/product-catlog
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/simplecyber/product-catlog
- Owner: SimpleCyber
- Created: 2025-06-16T19:07:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-16T20:15:36.000Z (about 1 year ago)
- Last Synced: 2025-06-16T20:26:41.189Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://product-cat-log.vercel.app
- Size: 72.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# E-Commerce Product Catalog
A 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.
## Live Demo
[https://product-cat-log.vercel.app](https://product-cat-log.vercel.app)
## Features
- **Product Catalog**: Grid and list view options
- **Product Details**: Comprehensive product information page
- **Search**: Real-time product search functionality
- **Filters**: Category, price range, and rating filters
- **Shopping Cart**: Persistent cart using local storage
- **Responsive Design**: Works on all device sizes
- **Dark/Light Mode**: Toggleable theme
## Technologies Used
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- ShadCN UI Components
- Framer Motion (Animations)
- Lucide React (Icons)
- DummyJSON API (Mock data)
## Project Structure
```bash
simplecyber-product-catlog/
├── components/ # Reusable UI components
│ ├── cart-sidebar.tsx
│ ├── filter-sidebar.tsx
│ ├── header.tsx
│ ├── product-card.tsx
│ ├── product-catalog.tsx
│ ├── product-detail.tsx
│ ├── theme-provider.tsx
│ └── ui/ # ShadCN UI components
├── contexts/ # Global state management
│ ├── cart-context.tsx
│ └── filter-context.tsx
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
└── src/app/ # Next.js App Router
├── globals.css
├── layout.tsx
├── page.tsx
└── product/[id]/ # Dynamic product pages
```
## Getting Started
### Prerequisites
- Node.js (v18 or later)
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/SimpleCyber/Product-CatLog.git
cd Product-CatLog
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
## Setup Configuration
### Tailwind CSS
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
### ShadCN UI Components
```bash
npx shadcn@latest init
npx shadcn@latest add button input badge sheet card slider
```
### Additional Dependencies
```bash
npm install lucide-react framer-motion
```
## Development Process
**Stage 1: Project Setup**
- ✅ Next.js project initialization
- ✅ Tailwind CSS configuration
- ✅ GitHub repository setup
- ✅ Vercel deployment
**Stage 2: Header Component**
- ✅ Navigation with logo
- ✅ Search bar functionality
- ✅ Cart display with counter
- ✅ Dark/light mode toggle
**Stage 3: Product Catalog**
- ✅ Product card design
- ✅ API data fetching
- ✅ Pagination with load more
- ✅ Grid/list view options
**Stage 4: Product Details**
- ✅ Dynamic routing [id]
- ✅ Product information display
- ✅ Add to cart functionality
- ✅ Related products section
**Stage 5: Filtering System**
- ✅ Category filters
- ✅ Price range slider
- ✅ Rating-based sorting
**Stage 6: Search**
- ✅ Real-time product search
- ⏳ Auto-complete (in progress)
**Stage 7: Shopping Cart**
- ✅ Local storage persistence
- ✅ Cart sidebar panel
- ✅ Quantity management
- ✅ Total calculation
**Stage 8: View Options**
- ✅ Grid and list layouts
## Deployment
The application is deployed on Vercel with automatic deployments from the main branch.
## License
This project is open source and available under the MIT License.
## Acknowledgments
- DummyJSON for mock product data
- ShadCN for UI components
- Claude AI for better tailwind styling and debugging