How I Built PouchCraft.in — A Custom Next.js E-Commerce Case Study

One of my most rewarding projects was building PouchCraft.in — a fully custom e-commerce platform specializing in packaging products, built entirely with Next.js and React. Here's a behind-the-scenes look at the entire development process.

Project Overview

Project: PouchCraft — Packaging Products E-Commerce Platform

Website: [pouchcraft.in](https://pouchcraft.in)

Platform: Custom Next.js (no WordPress, no WooCommerce)

Timeline: 8 weeks from concept to launch

Goals

• Build a blazing-fast, custom e-commerce experience
• Full control over UI/UX without plugin limitations
• Showcase their packaging product catalog beautifully
• Mobile-first design for on-the-go buyers
• SEO-optimized for packaging-related keywords

Technology Stack

Why Next.js Instead of WordPress?

This was a deliberate choice. The client needed:

• **Full UI customization** — no theme constraints
• **Superior performance** — Next.js SSG/ISR beats WordPress out of the box
• **API-first architecture** — custom backend logic for B2B pricing
• **Developer experience** — easier to iterate and scale

Development Process

Week 1-2: Planning & Architecture

• Analyzed competitor websites and user journeys
• Designed wireframes in Figma for all key pages
• Defined data models (products, categories, orders, users)
• Set up Next.js 14 with App Router
• Configured MongoDB Atlas database
• Set up Vercel deployment pipeline

Week 3-4: Core UI Development

• Built design system with Tailwind CSS (colors, typography, spacing)
• Developed reusable component library (buttons, cards, badges)
• Created product listing pages with filtering & sorting
• Built product detail pages with image galleries
• Designed responsive navigation and mobile menu

Week 5: Product Catalog & Data

• Structured product schema (name, SKU, size, material, MOQ, price)
• Built admin panel for product management
• Added product search with debounced input
• Implemented category filtering with URL state (shareable links)
• Optimized product images using Next.js Image component (WebP + lazy loading)

Week 6: Cart, Checkout & Payments

• Custom cart system using React Context + localStorage
• Multi-step checkout flow (address → review → payment)
• Integrated Razorpay for Indian payments (UPI, NetBanking, Cards, Wallets)
• Order confirmation emails via Nodemailer
• WhatsApp order notification for the business owner

Week 7: SEO & Performance

• Implemented Next.js metadata API for every page
• Dynamic OG images for social sharing
• XML sitemap generated at build time
• Structured data (JSON-LD) for products
• Core Web Vitals optimization — LCP under 1.2s
• Google Search Console + Analytics setup

Week 8: Testing & Launch

• Cross-browser testing (Chrome, Safari, Firefox, Edge)
• Mobile testing on Android and iOS
• Load testing with k6
• Final Razorpay live key switch
• Go live on Vercel!

Challenges & Solutions

Challenge 1: Custom Product Filtering

Problem: Packaging products have many dimensions — size, material, print type, MOQ — standard e-commerce solutions don't handle this elegantly.

Solution: Built a custom filter sidebar with URL-synced state using Next.js useSearchParams. Customers can filter and share filtered URLs, which also helps SEO.

Challenge 2: B2B Pricing Tiers

Problem: Bulk buyers get different pricing based on quantity ordered — not supported out of the box anywhere.

Solution: Built a custom pricing engine in the API routes. When a product is added to cart, the server calculates the correct tier price based on quantity. Displayed as a pricing table on the product page.

Challenge 3: Image Performance

Problem: Packaging product images are detailed and large — crucial for B2B buyers to inspect quality.

Solution: Used Next.js Image component with priority loading for above-the-fold images, lazy loading for the rest. All images served as WebP via Vercel's image optimization. Result: LCP went from 4.2s to 1.1s.

Challenge 4: SEO Without WordPress/Yoast

Problem: Without Yoast SEO, we had to implement SEO manually.

Solution: Used Next.js 14's built-in Metadata API for every page. Created a SEO utility function that generates proper title, description, og:image, and JSON-LD structured data for each product automatically.

Results After Launch

• **PageSpeed Score**: 97 on mobile, 99 on desktop
• **Core Web Vitals**: All passed (green) — LCP 1.1s, CLS 0, FID 0
• **Organic Traffic**: 400% increase within 3 months
• **Google Rankings**: Page 1 for several packaging keywords
• **Conversion Rate**: 4.1% (well above industry average of 2-3%)

Key Lessons Learned

1. **Next.js = performance by default** — Static generation and image optimization are huge wins
2. **Custom > plugins for complex B2B needs** — Pricing tiers, custom filters, MOQ logic are much cleaner in code
3. **Mobile-first saves rework** — Design for mobile first, then expand to desktop
4. **URL state for filters** — Shareable filter URLs improve both UX and SEO
5. **WhatsApp integration is essential** — Indian B2B buyers prefer WhatsApp for quick queries

Conclusion

PouchCraft.in proves that a fully custom Next.js e-commerce platform can outperform traditional CMS solutions in both performance and flexibility. The combination of React's component model, Next.js's rendering strategies, and custom business logic created a platform that's fast, scalable, and perfectly tailored to the client's needs.

Want a custom Next.js website or e-commerce platform? [Get in touch with me](#contact) and let's build something great together!