A comprehensive, full-stack product management application built with Next.js 15, React 19, TypeScript, and MongoDB. Features include product CRUD operations, CSV import/export, inventory tracking, authentication, and responsive design.

• User Registration & Login - Secure sign-up and sign-in with JWT tokens
• Cookie-based Authentication - HTTP-only cookies for enhanced security
• Protected Routes - Middleware protection for all API endpoints
• Role-based Access - Admin and user role management

• CRUD Operations - Create, read, update, and delete products
• Real-time Search - Instant product search with name and category filtering
• Category Management - Dynamic category filtering and organization
• Stock Tracking - Automatic status updates based on inventory levels

• CSV Import - Bulk product upload with duplicate detection
• CSV Export - Download complete product catalog
• Validation - File type and data format validation
• Error Handling - Comprehensive error reporting and user feedback

• Mobile-First Approach - Optimized for all screen sizes
• Adaptive Layouts - Different views for mobile and desktop
• Touch-Friendly - Mobile-optimized controls and interactions

• Inventory History - Track all stock changes with timestamps
• Pagination - Efficient product browsing (10 products per page)
• Toast Notifications - User-friendly feedback system
• Alert Dialogs - Confirmation dialogs for destructive actions

• Next.js 15 - React framework with App Router
• React 19 - Latest React features and hooks
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Beautiful, accessible UI components

• Next.js API Routes - Serverless API endpoints
• MongoDB - NoSQL database with Mongoose ODM
• JWT Authentication - Secure token-based auth
• bcryptjs - Password hashing and security

• ESLint - Code quality and consistency
• PostCSS - CSS processing and optimization
• Lucide React - Beautiful, customizable icons

Before running this project, ensure you have:

• Node.js 18+ installed on your system
• MongoDB running locally or MongoDB Atlas account
• Git for version control
• npm or yarn package manager

git clone https://github.com/kanchana404/web
cd web

npm install
# or
yarn install

Create a .env.local file in the root directory:

# Database Connection
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/product-management?retryWrites=true&w=majority

# Authentication
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production

# Environment
NODE_ENV=development

1. Create a free account at MongoDB Atlas
2. Create a new cluster
3. Get your connection string and update .env.local
4. Whitelist your IP address

1. Install MongoDB Community Server
2. Start the MongoDB service
3. Use connection string: mongodb://localhost:27017/product-management

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser.

• POST /api/auth/signup - User registration
• POST /api/auth/signin - User login
• POST /api/auth/signout - User logout
• GET /api/auth/me - Get current user info

• GET /api/products - Fetch all products
• POST /api/products - Create new product
• PUT /api/products/:id - Update product
• DELETE /api/products/:id - Delete product
• GET /api/products/search - Search products
• GET /api/products/export - Export products to CSV
• POST /api/products/import - Import products from CSV

• GET /api/products/:id/history - Get product inventory history

Your CSV file should contain the following columns:

name,unit,category,brand,stock,status,image
Product Name,pieces,Electronics,Brand Name,10,In Stock,https://example.com/image.jpg

• name - Product name (required, must be unique)
• unit - Unit of measurement (e.g., pieces, kg, liters)
• category - Product category
• brand - Brand name
• stock - Current stock quantity (numeric)
• status - Stock status (auto-calculated if not provided)
• image - Product image URL

1. Sign Up - Create a new account
2. Sign In - Access your dashboard
3. Add Products - Use the "Add New Product" button or import CSV

• Search - Use the search bar to find specific products
• Filter - Select categories to narrow down results
• Edit - Click the edit button to modify product details
• Delete - Remove products with confirmation dialog

• Import - Upload CSV files for bulk product creation
• Export - Download your complete product catalog
• Sample CSV - Download template for proper formatting

• View History - Click the eye icon to see stock changes
• Real-time Updates - Stock status updates automatically
• Change Logs - Track all inventory modifications

1. Authentication Flow

   • Test user registration
   • Test login/logout
   • Verify protected route access

2. Product Operations

   • Create, edit, delete products
   • Test search and filtering
   • Verify pagination

3. Import/Export

   • Test CSV import with sample data
   • Verify export functionality
   • Check error handling

# Run tests (when implemented)
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

1. Connect your GitHub repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy automatically on every push

• Netlify - Static site hosting
• Railway - Full-stack deployment
• DigitalOcean - VPS deployment

• JWT Token Security - Secure token generation and validation
• Password Hashing - bcrypt with 12 salt rounds
• HTTP-Only Cookies - XSS protection
• Input Validation - Server-side data validation
• CORS Protection - Cross-origin request handling

• Card Layout - Touch-friendly product cards
• Simplified Navigation - Optimized for small screens
• Mobile Pagination - Swipe-friendly controls

• Table Layout - Full-featured data table
• Advanced Controls - Comprehensive navigation options
• Keyboard Shortcuts - Enhanced productivity

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Follow TypeScript best practices
• Use conventional commit messages
• Ensure responsive design compatibility
• Add proper error handling
• Include user feedback mechanisms

This project is licensed under the MIT License - see the LICENSE file for details.

• Issues - Report bugs or request features on GitHub
• Discussions - Ask questions in GitHub Discussions
• Documentation - Check this README and code comments

1. MongoDB Connection - Verify connection string and network access
2. Authentication Errors - Check JWT secret and cookie settings
3. Import Failures - Validate CSV format and column names
4. Build Errors - Ensure Node.js version compatibility

• Advanced Analytics - Product performance metrics
• Barcode Integration - QR code generation and scanning
• Multi-language Support - Internationalization
• Advanced Search - Full-text search with filters
• API Rate Limiting - Enhanced security measures

• Database Indexing - Optimized query performance
• Caching Layer - Redis integration for speed
• Image Optimization - Automatic image compression
• Lazy Loading - Progressive data loading

product-management-system/
├── app/                    # Next.js App Router
│   ├── api/               # API endpoints
│   ├── components/        # Reusable UI components
│   ├── contexts/          # React contexts
│   ├── hooks/             # Custom hooks
│   ├── lib/               # Utility functions
│   └── page.tsx           # Main application page
├── db/                    # Database configuration
│   ├── models/            # Mongoose schemas
│   └── index.ts           # Database connection
├── components/            # shadcn/ui components
├── public/                # Static assets
└── middleware.ts          # Authentication middleware

1. User Authentication → JWT token generation
2. API Requests → Middleware validation
3. Database Operations → Mongoose ODM
4. State Management → React hooks and context
5. UI Updates → Real-time component rendering

• Button - Various button styles and variants
• Input - Form input components
• Dialog - Modal dialogs and forms
• Table - Data table with sorting
• Badge - Status indicators
• Toast - Notification system
• Alert Dialog - Confirmation dialogs

• Product Card - Mobile-optimized product display
• Inventory History - Stock change tracking
• Pagination Controls - Page navigation
• Search Interface - Advanced search functionality

• useState - Local component state
• useEffect - Side effects and lifecycle
• useContext - Global authentication state
• Custom Hooks - Reusable logic extraction

• AuthContext - User authentication state
• ToastProvider - Notification management

• Code Splitting - Automatic route-based splitting
• Image Optimization - Next.js Image component
• Lazy Loading - Component and data lazy loading
• Database Indexing - Optimized query performance

• Console Logging - Development debugging
• Error Boundaries - Graceful error handling
• Performance Metrics - Core Web Vitals tracking

• Next.js Team - Amazing React framework
• shadcn/ui - Beautiful component library
• MongoDB - Robust database solution
• Tailwind CSS - Utility-first CSS framework

Made with ❤️ by kanchana404

For questions, issues, or contributions, please visit our GitHub repository.