A production-ready, feature-rich e-commerce product explorer built with Next.js 16, TypeScript, and Tailwind CSS. This application demonstrates modern React patterns, clean architecture, and exceptional user experience.
- 📦 Product Listing - Responsive grid layout with beautiful product cards
- 🔍 Real-time Search - Debounced search with instant filtering
- 🏷️ Category Filtering - Dynamic category filters from API
- 💰 Price Sorting - Sort products by price (Low to High / High to Low)
- 📄 Pagination - Navigate through products with page controls
- ❤️ Favorites System - Mark products as favorites with localStorage persistence
- 🔔 Toast Notifications - Real-time feedback for favorite toggle actions
- 📱 Responsive Design - Mobile-first design that works on all devices
- 🎨 Modern UI/UX - Beautiful gradients, shadows, and smooth animations
- ⚡ Performance Optimized - Image optimization, lazy loading, and efficient rendering
- 🔄 Loading States - Elegant skeleton loaders and loading indicators
- ❌ Error Handling - Comprehensive error boundaries and user-friendly error messages
- TypeScript - Fully typed for maximum type safety
- Next.js App Router - Latest Next.js 16 with dynamic routing
- Component Architecture - Reusable, maintainable components
- Custom Hooks - Encapsulated state management logic
- Toast Notifications - React Hot Toast for user feedback
- Clean Code - Well-organized folder structure and naming conventions
- Accessibility - ARIA labels and keyboard navigation support
next-cart/
├── app/
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page with product listing
│ ├── globals.css # Global styles and Tailwind
│ ├── favicon.ico # App favicon
│ ├── order-placed/
│ │ └── page.tsx # Order confirmation page
│ └── products/
│ └── [id]/
│ └── page.tsx # Dynamic product detail page
├── components/
│ ├── ui/
│ │ └── Slider.tsx # Slider/carousel component
│ ├── FavoriteButton.tsx # Favorite toggle button
│ ├── ProductCard.tsx # Product card component
│ ├── ProductGrid.tsx # Product grid layout
│ ├── ProductFilters.tsx # Filter sidebar with price sorting
│ ├── SearchBar.tsx # Debounced search input
│ └── LoadingSkeleton.tsx # Loading state skeleton
├── lib/
│ ├── types.ts # TypeScript type definitions
│ ├── api.ts # API client functions
│ └── utils.ts # Utility functions
├── hooks/
│ └── useFavorites.ts # Favorites management hook
├── public/ # Static assets
├── README.md # Project documentation
├── package.json # Dependencies and scripts
├── package-lock.json # Dependency lock file
├── tsconfig.json # TypeScript configuration
├── next.config.ts # Next.js configuration
├── postcss.config.mjs # PostCSS configuration
├── eslint.config.mjs # ESLint configuration
└── components.json # Components configuration
- Node.js 18+ and npm/yarn/pnpm
- Basic knowledge of React and Next.js
- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open your browser: Navigate to http://localhost:3000
npm run build
npm run startCurrent dependencies as per package.json:
{
"dependencies": {
"next": "16.1.1",
"react": "19.2.3",
"react-dom": "19.2.3",
"lucide-react": "^0.562.0",
"react-hot-toast": "^2.6.0",
"clsx": "^2.1.1",
"tailwind-merge": "^3.4.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"typescript": "^5",
"tailwindcss": "^4",
"eslint": "^9",
"eslint-config-next": "16.1.1"
}
}Beautiful, interactive product cards with:
- High-quality image display
- Favorite button overlay with toast feedback
- Category badges
- Rating display
- Hover animations
Comprehensive filtering system:
- Category selection
- Price sorting (Low to High / High to Low)
- Favorites-only toggle
- Active filter indicators
- Smooth transitions
Debounced search input:
- 300ms debounce for performance
- Clear button
- Real-time filtering
- Accessible labels
Reusable slider/carousel component:
- Smooth animations
- Touch-friendly navigation
- Customizable styling
- Located in
components/ui/for shared UI elements
Intuitive pagination controls:
- Previous/Next navigation
- Current page indicator
- Disabled states for boundary pages
- Responsive design
Real-time user feedback powered by React Hot Toast:
- Success messages for adding favorites
- Informative messages for removing favorites
- Customizable styling
- Auto-dismiss functionality
Custom hook for favorites management:
- localStorage persistence
- Optimistic updates
- Type-safe operations
- Loading state handling
- Toast notification integration
The app uses the Fake Store API for product data:
GET /products- Fetch all productsGET /products/:id- Fetch single productGET /products/categories- Fetch categories
- Mobile: < 640px (1 column)
- Tablet: 640px - 1024px (2 columns)
- Desktop: 1024px - 1280px (3 columns)
- Large Desktop: > 1280px (4 columns)
- Gradient Backgrounds - Modern blue/purple gradients
- Glass Morphism - Subtle backdrop blur effects
- Smooth Animations - Transform and transition effects
- Shadow Depth - Layered shadow system
- Color Palette - Consistent blue/purple theme
- Typography - Inter font for clean readability
- Toast Notifications - Elegant, non-intrusive feedback
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
};
export default config;{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}- Image Optimization - Next.js Image component with proper sizing
- Debounced Search - Prevents excessive re-renders
- Memoization - useMemo for filtered products
- Lazy Loading - Images load as needed
- Code Splitting - Automatic route-based splitting
- Caching - API responses cached with revalidation
- Pagination - Reduces DOM load by limiting visible products
- Navigate through products with previous/next controls
- Displays current page number
- Configurable items per page
- Smooth transitions between pages
- Sort by Price: Low to High - View cheapest products first
- Sort by Price: High to Low - View most expensive products first
- Integrated with existing filters and search
- Real-time feedback when adding/removing favorites
- Non-intrusive, auto-dismissing notifications
- Customizable styling matching the app theme
- Powered by
react-hot-toastlibrary
- ✅ TypeScript strict mode
- ✅ No
anytypes - ✅ Proper error handling
- ✅ Accessible components
- ✅ SEO-friendly metadata
- ✅ Mobile-first responsive design
- ✅ Clean folder structure
- ✅ Reusable components
- ✅ Custom hooks for logic separation
- ✅ Loading and error states
- ✅ User feedback with toast notifications
- ✅ Efficient pagination implementation
This project demonstrates:
- Modern React patterns (hooks, composition)
- Next.js 16 App Router and dynamic routing
- TypeScript best practices
- API integration and error handling
- State management without libraries
- localStorage for persistence
- Responsive design principles
- Performance optimization techniques
- User experience enhancements (toasts, pagination)
- Price sorting and filtering logic
MIT License - feel free to use this project for learning or as a portfolio piece!
- API: Fake Store API
- Icons: Lucide React
- Framework: Next.js
- Styling: Tailwind CSS
- Notifications: React Hot Toast
Built with ❤️ using Next.js 16, TypeScript, and Tailwind CSS