A premium e-commerce website for Veritraa - authentic, lab-tested Indian spices and dry fruits. Built with Next.js 14, React, Tailwind CSS, and TypeScript.
The development server is now running at: http://localhost:3000
This is a full-stack implementation of the Veritraa PRD (Product Requirements Document), featuring:
- Modern E-Commerce Platform: Complete shopping experience with product catalog, cart, and checkout
- Premium Design System: Tailwind CSS with custom color scheme (Green, Gold, Terracotta)
- Responsive Mobile-First: Works seamlessly on all devices
- Product Management: 15+ premium spices catalog with variants and reviews
- Shopping Cart: Persistent cart with Zustand state management
- Checkout Flow: Complete checkout process with form validation
- User Pages: About, Quality Promise, Bulk Orders, Contact, Shop
- Frontend Framework: Next.js 14 with App Router
- UI Library: React 18
- Styling: Tailwind CSS + Custom CSS modules
- State Management: Zustand (lightweight & performant)
- Icons: Lucide React
- Language: TypeScript
- Database: Ready for integration (data currently in-memory)
- Forms: HTML5 with client-side validation
veritraa/
├── app/ # Next.js App Router pages
│ ├── layout.tsx # Root layout with Header/Footer
│ ├── page.tsx # Homepage with hero, products, CTAs
│ ├── globals.css # Global styles & animations
│ ├── shop/ # Product shop page
│ ├── product/ # Product detail pages (ready)
│ ├── cart/ # Shopping cart page
│ ├── checkout/ # Checkout flow
│ ├── about/ # About Us page
│ ├── quality/ # Quality Promise page
│ ├── bulk-orders/ # Bulk Orders form
│ └── contact/ # Contact Us page
│
├── components/ # Reusable React components
│ ├── Header.tsx # Navigation header
│ ├── Footer.tsx # Website footer
│ └── ProductCard.tsx # Product card component
│
├── lib/ # Utility functions & data
│ ├── types.ts # TypeScript types
│ ├── products.ts # Product data & queries
│ ├── store.ts # Zustand cart store
│ └── utils.ts # Helper functions
│
├── hooks/ # Custom React hooks (ready for expansion)
├── public/ # Static assets
├── tailwind.config.ts # Tailwind configuration
├── next.config.js # Next.js configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies
- Primary Green:
#2D5016- Trust, purity - Gold Accent:
#C9A962- Premium, quality - Terracotta:
#D4745E- Warmth, heritage - Cream Background:
#F7F4ED- Clean, natural - Charcoal Text:
#2C2C2C- Readability
- Serif Font: Crimson Pro (headings)
- Sans-serif Font: Inter (body text)
- Mobile: 320px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px+
-
Homepage
- Hero section with CTA
- Trust bar (4 trust signals)
- Featured products carousel
- Brand story section
- Quality promise grid
- Product categories showcase
- Bulk orders CTA banner
- Newsletter signup
- Footer
-
Shop Page
- Product grid (responsive)
- Category filtering
- Price range filtering
- Sorting (featured, price, rating)
- 15 premium spices with variants
- Product stock display
-
Shopping Cart
- Add/remove items
- Update quantities
- Persistent storage (localStorage)
- Order summary
- Shipping calculator
- Promo code ready
-
Checkout
- Contact information form
- Delivery address management
- Shipping method selection
- Payment method options (Razorpay, COD)
- Order summary sidebar
- Form validation
-
Product Pages
- About Us with brand story
- Quality Promise with certifications
- Bulk Orders with request form
- Contact Us with multiple contact options
-
Global Components
- Responsive Header with mobile menu
- Footer with newsletter & links
- Product cards with variants
- Icons & UI elements (Lucide React)
- Shahi Garam Masala
- Kanda Lasun Chutney
- Malvani Fish Fry Masala
- Kala Masala
- Goda Masala
- Mutton Masala
- Chicken Masala
- Shahi Biryani Masala
- Kolhapuri Misal Masala
- Kolhapuri Lal Tikhat Masala
- Turmeric Powder
- Red Chilli Powder
- Coriander Powder
- Cumin Powder
- Chaat Masala
Each product includes:
- Multiple weight variants (100g, 250g, 500g, 1kg)
- Lab-tested badges & reviews
- Pricing with sale prices
- Ingredient lists
- Storage & usage instructions
- Stock management
- Node.js 20.9+
- npm or yarn
-
Navigate to project:
cd "c:\Users\Administrator\Documents\GitHub\masalaa"
-
Install dependencies:
npm install
If you already installed dependencies with an older project setup and want a clean upgrade to the current stack, reinstall once:
Remove-Item -Recurse -Force node_modules Remove-Item -Force package-lock.json npm install
-
Start development server:
npm run dev
-
Open in browser:
http://localhost:3000
If you see Failed to load SWC binary for win32/x64 or
next-swc.win32-x64-msvc.node is not a valid Win32 application on Windows,
the project is usually running on an older Next.js dependency set.
This repo now targets Next.js 16 and React 19 with a Node.js requirement of
20.9+. Reinstall dependencies and run npm run dev again.
npm run build
npm run startThe cart uses Zustand for state management with localStorage persistence:
// Add item to cart
useCart((state) => state.addItem(product, variant, quantity));
// Get cart total
const total = useCart((state) => state.getCartTotal());
// Get item count
const count = useCart((state) => state.getCartItemsCount());Cart persists across page refreshes and sessions.
| Page | Route | Status | Features |
|---|---|---|---|
| Home | / | ✅ Complete | Hero, featured products, CTAs |
| Shop | /shop | ✅ Complete | Filters, sorting, 15 products |
| About | /about | ✅ Complete | Brand story, values, team info |
| Quality | /quality | ✅ Complete | Certifications, traceability |
| Bulk Orders | /bulk-orders | ✅ Complete | Request form, FAQs |
| Contact | /contact | ✅ Complete | Contact info, form, maps ready |
| Cart | /cart | ✅ Complete | Items, summary, checkout CTA |
| Checkout | /checkout | ✅ Complete | Address, payment, order summary |
| Product Detail | /product/[id] | 📝 Ready | Template created |
| Account | /account | 🚧 Phase 2 | Order history, wishlist |
| Admin | /admin | 🚧 Phase 2 | Dashboard, order management |
- SSL/HTTPS ready for production
- Environment variables support (.env.local)
- FSSAI compliance messaging
- Privacy policy & Terms ready
- SEO-optimized meta tags
- Schema markup support
- Page Load: <2 seconds target (via Next.js SSR)
- Images: Optimized with next/image
- CSS: Minified via Tailwind
- JavaScript: Minified & code-split automatically
- Mobile First: Responsive design from ground up
All API routes are ready for backend integration:
- Payment gateway (Razorpay)
- Email service (SendGrid)
- SMS/WhatsApp (Twilio)
- Analytics (Google Analytics, Meta Pixel)
- Shipping partners (Shiprocket, Delhivery)
-
Backend Integration
- Connect to PostgreSQL database
- User authentication (NextAuth.js)
- Order management API
- Inventory system
-
Payment Integration
- Razorpay API integration
- COD order handling
- Invoice generation
- Email confirmations
-
Admin Features
- Product management
- Order processing
- Customer management
- Analytics dashboard
-
Advanced Features
- Product reviews & ratings
- Wishlist functionality
- User accounts & profiles
- Email marketing automation
- Loyalty program
-
Mobile App
- React Native or Flutter
- PWA for web
The site is fully responsive:
- Mobile (320px-767px): Single column, hamburger menu
- Tablet (768px-1023px): 2-column layouts
- Desktop (1024px+): Full 3-4 column grids
✨ Premium Design: Custom brand colors, typography, animations 🛒 Shopping Cart: Persistent, real-time updates 💳 Checkout: Multi-step process with validation 📦 Inventory: Stock tracking per variant 🔐 Trust Signals: Badges, certifications, guarantees 📱 Mobile Optimized: Touch-friendly, fast ♿ Accessible: WCAG compliance ready 🚀 Performance: Optimized images, lazy loading 🎨 Animations: Smooth transitions, fade-ins
For questions or issues:
- Email: hello@veritraa.com
- Phone: +91-9876543210
- WhatsApp: [Link]
© 2024 Veritraa. All rights reserved.
Built with ❤️ for Veritraa Pure. True. Trusted.