A production-ready, full-stack e-commerce platform built with Next.js 14, TypeScript, Supabase, and Stripe. Features comprehensive product management, Israeli market support with Hebrew localization, and advanced admin capabilities.
- 🛍️ Store: https://peakees.vercel.app
- 👑 Admin Panel: https://peakees.vercel.app/admin-direct
- 📧 Admin Login:
michaelvx@gmail.com/1q1q1q1q
- Complete Shop Pages - Products listing, categories, search, and detail pages
- Advanced Navigation - Search, filters, sorting, breadcrumbs, pagination
- Performance Features - Lazy loading, skeleton states, GSAP animations
- Quick View Modal - Enhanced product preview functionality
- SEO Optimization - Search engine and social media ready
- Full Cart System - Add, remove, update with persistent state
- Advanced UX - GSAP animations, accessibility, mobile optimization
- Cart Preview - Hover preview with quick actions
- Abandonment Recovery - Automated recovery system with analytics
- Cross-device Sync - Seamless cart synchronization
- Stripe Integration - Complete payment processing with webhooks
- Multi-step Checkout - Address validation and payment forms
- Order Processing - Automated order creation and confirmation
- Payment Security - PCI compliant payment handling
- Error Handling - Comprehensive payment failure recovery
- User Dashboard - Account overview and order history
- Order Tracking - Real-time order status updates
- Profile Management - User settings and preferences
- Address Book - Saved shipping addresses
- Order Actions - Cancel, reorder, and return functionality
- Admin Dashboard - Comprehensive management interface
- Product Management - CRUD operations with image upload
- Order Management - Order processing and fulfillment
- User Management - Customer support and administration
- Analytics & Reporting - Sales and performance metrics
- GSAP Animations - Professional micro-interactions
- Responsive Design - Mobile-first optimization
- Accessibility - WCAG 2.1 AA compliance
- Performance - Optimized loading and caching
- SEO - Search engine optimization
- Comprehensive Testing - Unit, integration, and E2E tests
- CI/CD Pipeline - Automated testing and deployment
- Production Setup - Monitoring, security, and backups
- Documentation - Complete API and component docs
- Deployment Tools - Automated scripts and rollback procedures
- Next.js 14 - App Router, Server Components, TypeScript
- Tailwind CSS - Utility-first styling with custom design system
- shadcn/ui - High-quality, accessible UI components
- GSAP - Professional animations and micro-interactions
- Radix UI - Accessible primitives for complex components
- Supabase - PostgreSQL database with real-time subscriptions
- Row Level Security - Database-level security policies
- Supabase Auth - Authentication with social login support
- Supabase Storage - File storage for product images
- Stripe - Payment processing and subscription management
- Google Analytics 4 - Enhanced ecommerce tracking
- Facebook Pixel - Social media conversion tracking
- Custom Analytics - Internal event tracking system
peakees/
├── app/ # Next.js 14 App Router
│ ├── (auth)/ # Authentication pages
│ ├── products/ # Product catalog pages
│ ├── categories/ # Category pages
│ ├── cart/ # Cart and recovery pages
│ ├── api/ # API routes
│ └── globals.css # Global styles
├── components/ # React components
│ ├── ui/ # Base UI components (shadcn/ui)
│ ├── products/ # Product-related components
│ ├── cart/ # Shopping cart components
│ ├── navigation/ # Navigation components
│ ├── layout/ # Layout components
│ └── providers/ # Context providers
├── lib/ # Utilities and configurations
│ ├── auth/ # Authentication utilities
│ ├── context/ # React contexts
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Utility functions
│ ├── animations/ # GSAP animation utilities
│ └── validations/ # Zod validation schemas
├── docs/ # Documentation
├── types/ # TypeScript type definitions
└── public/ # Static assets
- Node.js 18+ and npm/yarn/pnpm
- Supabase account and project
- Stripe account (for payments)
-
Clone the repository
git clone https://github.com/your-username/peakees.git cd peakees -
Install dependencies
npm install # or yarn install # or pnpm install
-
Environment setup
cp .env.example .env.local
Fill in your environment variables:
# Supabase NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_service_role_key # Stripe NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key STRIPE_SECRET_KEY=your_stripe_secret_key STRIPE_WEBHOOK_SECRET=your_webhook_secret # Analytics (optional) NEXT_PUBLIC_GA_MEASUREMENT_ID=your_ga_id NEXT_PUBLIC_FACEBOOK_PIXEL_ID=your_pixel_id
-
Database setup
# Run database migrations npm run db:migrate # Seed sample data (optional) npm run db:seed
-
Start development server
npm run dev
Open http://localhost:3000 in your browser.
- Getting Started - Setup and installation guide
- Architecture Overview - System design and patterns
- API Reference - Complete API documentation
- Database Schema - Database structure and relationships
- Product Catalog - Product management and browsing
- Shopping Cart - Cart functionality and integration
- Authentication - User authentication and authorization
- Payments - Stripe integration and checkout flow
- Component Library - UI component documentation
- Styling Guide - Tailwind CSS and design system
- Animation System - GSAP animations and micro-interactions
- Testing Guide - Testing strategies and examples
- Deployment Guide - Production deployment instructions
- Performance Guide - Optimization strategies
- Security Guide - Security best practices
- Monitoring - Analytics and error tracking
- Unit tests for utilities and hooks
- Component tests with React Testing Library
- Integration tests for API routes
- E2E tests with Playwright
# Unit and component tests
npm run test
# E2E tests
npm run test:e2e
# Test coverage
npm run test:coverage- Connect your GitHub repository to Vercel
- Configure environment variables
- Deploy automatically on push to main
# Build for production
npm run build
# Start production server
npm start- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Write tests for new features
- Use conventional commit messages
- Update documentation for new features
This project is licensed under the MIT License - see the LICENSE file for details.
- Documentation: docs/
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: support@peakees.com
Built with ❤️ by the Peakees Team