Full-stack product catalog application with advanced inventory management, built with modern technologies.
- Frontend: React 19, Next.js 16 (App Router), TypeScript
- Backend: Next.js API Routes
- Database: MySQL 8 with Prisma ORM
- Validation: Zod
- Forms: React Hook Form
- Styling: Tailwind CSS
- Notifications: React Hot Toast
- Containerization: Docker & Docker Compose
- ✅ Create, view, and search products
- ✅ Product details with full information
- ✅ Unique SKU validation
- ✅ Stock and price management
- ✅ Image URL support
- ✅ Active/inactive status toggle
- ✅ Create and manage categories
- ✅ Automatic slug generation
- ✅ View products by category
- ✅ Unique name validation
- ✅ Real-time product search with debounce
- ✅ Case-insensitive search
- ✅ Pagination with customizable page size (5/10/20/50)
- ✅ Quick jump to page
- ✅ Breadcrumb navigation
- ✅ Client & server-side validation (Zod)
- ✅ Field-level error messages
- ✅ Backend error mapping to form fields
- ✅ Loading states and toast notifications
- ✅ Form reset functionality
- ✅ Responsive design (mobile-first)
- ✅ Dark theme with Tailwind CSS
- ✅ Empty states and loading indicators
- ✅ Table and grid views
- ✅ Smooth transitions and hover effects
Use npm on Windows
npm installRename .env.example to .env
Run Docker Desktop for Windows
docker-compose up -dPrisma setup
npx prisma generate
npx prisma db pushStart Application
npm run dev- Product image upload with cloud storage
- Bulk operations (delete, update multiple)
- Export to CSV/Excel
- Advanced filtering (price range, stock level)
- Sorting options (by price, name, date)
- User authentication & roles
- Audit logs
- Product variants (size, color)
- Inventory alerts (low stock notifications)
- Sales analytics dashboard