The Admin Dashboard now includes a beautiful, animated product form for adding and editing products. Here's everything you need to know.
-
Login to Admin
- Visit: http://localhost:3000/auth/login
- Email:
admin@marketplace.com - Password:
**************
-
Navigate to Products
- After login, click the User Icon (top-right)
- Click "Admin Dashboard"
- Click "Products" in the sidebar
- Or visit directly: http://localhost:3000/admin/products
-
Click "Add Product" Button
- Located in the top-right of the Products page
- A beautifully animated form will appear
-
Fill in Product Details:
Product Name (Required)
- Enter the name of your product
- Example: "Handmade Ceramic Mug"
- Max recommended: 100 characters
Category (Required)
- Choose from dropdown:
- Handmade
- Home Decor
- Fashion
- Jewelry
- Art
- Electronics
- Books
- Gifts
Price (Required)
- Enter price in rupees (₹)
- Example: 499.99
- Accepts decimals for paise
Stock Quantity (Required)
- How many items are in stock
- Example: 50
- Must be a whole number
Description (Required)
- Detailed product description
- Min 20 characters recommended
- Include materials, dimensions, care instructions
- Example:
Beautiful handmade ceramic mug crafted with love. - Dimensions: 8cm height, 7cm diameter - Material: Premium ceramic - Care: Handwash recommended - Perfect gift for tea lovers
-
Add Product Images
- Click "Add Image" button
- Paste image URL (see Image URL Sources below)
- Or press Enter key on the keyboard
- Image preview appears immediately
- Add 1-5 images per product
- Images appear as thumbnails
- Click X to remove an image
-
Submit
- Click "Create Product" button
- Wait for success notification
- Form closes automatically
- New product appears in the table
- Find the Product in the table
- Click Edit Button (pencil icon) in the Actions column
- Update Fields as needed
- Update Images if desired
- Click "Update Product"
- Confirm the success message
- Find the Product in the table
- Click Delete Button (trash icon) in the Actions column
- Confirm deletion in the popup dialog
- Product is removed immediately
- Table updates automatically
Use these websites for free product images:
-
Unsplash - https://unsplash.com
- Free high-quality images
- Direct image links work great
- Search for product type
- Example URL:
https://images.unsplash.com/photo-1578926314433-c6e7ad7d3087?w=500&h=500&fit=crop
-
Pexels - https://www.pexels.com
- Large collection of free images
- Easy to find product photos
- Example URL:
https://images.pexels.com/...
-
Pixabay - https://pixabay.com
- Over 3 million free images
- Commercial use allowed
- Example URL:
https://pixabay.com/images/...
-
Shopify Unsplash - Shop specific products
- Handmade items collection
- Craft and artisan products
From Unsplash:
- Go to https://unsplash.com
- Search for your product (e.g., "ceramic mug")
- Click on an image
- Click the Download button dropdown
- Click Share to get link
- Copy the image URL
- Paste in the form
From Pexels:
- Go to https://www.pexels.com
- Search for product
- Right-click image → Copy Image Link
- Paste in form
- Name: Product name
- Category: Product category
- Price: Selling price (₹)
- Stock: Available quantity
- Rating: Average customer rating (0-5 stars)
- Actions: Edit/Delete buttons
- Hover over a row to highlight
- Click product name to view details
- Action buttons animate on hover
- Table updates in real-time
-
Product Name
- Be specific and descriptive
- Include key features
- Examples: ✅ "Handmade Ceramic Coffee Mug with Gold Rim" ❌ "Mug"
-
Price
- Set competitive but fair prices
- Include all costs (materials, labor, profit)
- Use .99 endings for psychology pricing
- Examples: ₹499, ₹799.99, ₹1,299
-
Stock
- Update regularly
- Set to 0 when out of stock (product becomes unavailable)
- Keep track of inventory
-
Description
- 50-500 characters recommended
- Include:
- Materials used
- Dimensions/Size
- Weight
- Colors available
- Care instructions
- Unique features
- Handcrafted details
- Use line breaks for readability
- Include hashtags for discoverability
-
Images
- Use 3-5 high-quality images
- First image is the thumbnail
- Show product from multiple angles
- Include size reference (hand, coin)
- High-resolution (500x500px minimum)
- Consistent lighting
- Clean background
-
Category
- Choose most relevant category
- Helps customers find products
- Improves search results
-
High-Quality Images
- Use bright, clear photos
- Multiple angles help conversions
- Show product in use (lifestyle images)
-
Detailed Descriptions
- Mention handcrafted/artisan
- Highlight unique features
- Include story/inspiration
- List care instructions
- Answer common questions
-
Competitive Pricing
- Research similar products
- Factor in time and materials
- Consider market demand
- Offer bulk discounts
-
Regular Updates
- Add new products frequently
- Update stock levels
- Adjust prices seasonally
- Keep descriptions fresh
-
SEO Optimization
- Use relevant keywords in name
- Include keywords in description
- Add hashtags
- Use popular category terms
- View average rating in table
- High ratings indicate quality
- Use reviews to improve products
- Check "Recent Orders" in dashboard
- Monitor which products sell best
- Adjust inventory accordingly
- Edit product when stock changes
- Set to 0 when unavailable
- Customers can't buy out-of-stock items
- Check if URL is complete (starts with https://)
- Image must be publicly accessible
- Try different image URL
- Use shorter URLs without special characters
- Ensure all required fields are filled
- Check for errors in price/stock (must be numbers)
- Add at least one image
- Check browser console for errors
- Refresh the page
- Check if form submitted successfully
- Verify stock is > 0
- Ensure category is selected
- Verify you're logged in
- Check if account is admin
- Clear browser cache
- Try incognito mode
-
Keep Password Safe
- Don't share admin credentials
- Change default password
- Use strong password
-
Product Information
- Don't share real wholesale prices
- Be careful with personal info in descriptions
- Don't publish supplier details
-
Regular Backups
- Take screenshots of products
- Keep descriptions saved
- Backup images locally
The admin form is fully responsive:
- Works on tablets
- Works on mobile devices
- Touch-friendly buttons
- Easy to use on the go
While in the product form:
- Enter after pasting image URL = Add Image
- Tab = Move to next field
- Shift+Tab = Move to previous field
- Escape = Close form (may close before saving)
The product form includes smooth animations:
- Slide in: Form appears with animation
- Fade in: Fields appear with stagger effect
- Image previews: Zoom in smoothly
- Buttons: Scale and bounce on hover
- Success: Toast notification appears
Common Issues:
-
Lost admin password?
- Reset in seed script
- Or modify database directly
-
Want to add more categories?
- Edit ProductForm.tsx
- Add to categories array
-
Need bulk upload?
- Use seed script
- Or create multiple products manually
-
Product not visible to customers?
- Check stock > 0
- Verify category
- Check price is set
- Has at least one image
Enjoy managing your beautiful product catalog! The form is intuitive, fast, and has all the features you need to run a successful marketplace.