A modern e-commerce platform for premium handcrafted candles, built with Next.js 14 and powered by Supabase.
- Beautiful product catalog with category filtering
- Advanced shopping cart with quantity management
- Secure checkout with Razorpay integration
- Guest and authenticated user support
- Real-time cart updates with notifications
- Razorpay Integration - UPI, Cards, Net Banking, Wallets
- Cash on Delivery support
- Secure payment verification and order tracking
- Automatic order confirmation emails
- Responsive design for all devices
- Smooth animations with Framer Motion
- Quick Add buttons on product cards
- Free shipping calculator (₹1000+ orders)
- Toast notifications for user feedback
- Supabase Authentication (Email/Password + Google OAuth)
- Row Level Security (RLS) policies
- Secure API endpoints with service role access
- Protected routes and middleware
- Custom design system with brand colors
- Glassmorphism and gradient effects
- Loading states and error handling
- Mobile-first responsive design
- Next.js 14 - React framework with App Router
- TypeScript - Type safety and better DX
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Smooth animations and transitions
- Lucide React - Beautiful icons
- React Hot Toast - Elegant notifications
- Zustand - Lightweight state management
- Supabase - Backend-as-a-Service
- PostgreSQL database
- Authentication
- Real-time subscriptions
- Row Level Security
- API Routes - Next.js server-side API endpoints
- Razorpay - Payment gateway for India
- WhatsApp Integration - Customer support
- Email Notifications - Order confirmations
- Vercel - Hosting and deployment
- Git - Version control
- ESLint - Code linting
- TypeScript - Static type checking
- Node.js 18+ and npm
- Supabase account
- Razorpay account (for payments)
-
Clone the repository
git clone https://github.com/AryanBV/lumina-crafts.git cd lumina-crafts -
Install dependencies
npm install
-
Environment Variables Create
.env.localfile:NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_service_role_key NEXT_PUBLIC_RAZORPAY_KEY_ID=your_razorpay_key_id RAZORPAY_KEY_SECRET=your_razorpay_secret NEXT_PUBLIC_SITE_NAME=Lumina Crafts
-
Database Setup
- Set up your Supabase project
- Create required tables (see Database Schema)
- Configure Row Level Security policies
-
Run the development server
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Visit
http://localhost:3000
orders- Customer orders with shipping infoorder_items- Individual items in each ordershipping_addresses- Shipping address detailsproducts- Product catalogcategories- Product categories
- Handled by Supabase Auth
- User profiles linked to orders
- Google OAuth integration
- Create a new Supabase project
- Set up authentication providers (Email + Google)
- Configure redirect URLs:
- Site URL:
https://yourdomain.com - Redirect URLs:
https://yourdomain.com/api/auth/callback
- Site URL:
- Set up RLS policies for secure data access
- Create Razorpay account
- Get API keys from dashboard
- Configure webhook endpoints for payment verification
- Test with sample transactions
- Connect your GitHub repository
- Add environment variables
- Deploy automatically on push to main
- Brown:
#8B4513- Primary brand color - Coffee:
#6F4E37- Text and secondary elements - Caramel:
#D2691E- Accent and highlights - Gold:
#FFD700- Premium elements - Cream:
#F5F5DC- Background and light areas - Nude:
#E8DCC4- Subtle backgrounds
- Headings: Serif font family for elegance
- Body: Sans-serif for readability
- Responsive: Fluid typography scales
- Row Level Security (RLS) on all database tables
- Service role for secure API operations
- Input validation on all forms
- XSS protection with proper data sanitization
- CSRF protection with Next.js built-ins
- Secure headers and HTTPS enforcement
POST /api/orders/create- Create new order (COD)POST /api/checkout/razorpay- Create Razorpay orderPOST /api/checkout/verify- Verify Razorpay paymentGET /api/checkout/status- Check payment system status
GET /api/auth/callback- OAuth callback handler
Run the development server and test:
- Product browsing and filtering
- Cart functionality (add, remove, update)
- Checkout flow with form validation
- Payment processing (use Razorpay test mode)
- Order confirmation and email delivery
- Connect GitHub repository
- Configure environment variables
- Deploy with zero configuration
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
NEXT_PUBLIC_RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=
NEXT_PUBLIC_SITE_NAME=- Fork the repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js team for the amazing framework
- Supabase for the backend infrastructure
- Razorpay for payment processing
- Vercel for seamless deployment
- Tailwind CSS for the utility-first approach
For support, email support@luminacrafts.com or join our WhatsApp support at +91 98458 53903.
- Live Demo: https://lumina-crafts.vercel.app
- Repository: https://github.com/AryanBV/lumina-crafts
Built with ❤️ for premium candle lovers