Global Olive Corp. — Investment Platform for Olive Trees

Full-stack e-commerce platform for investing in olive trees. Users can purchase trees, receive ownership certificates, gift trees to others, and track assets. Includes an admin panel for managing inventory, orders, and users.

• Marketing Landing Page: https://goc2025.framer.website/
• Main Application: https://olive.yappix.studio/
• Status: ✅ Production Ready
• Duration: Single development cycle

• Platform: Framer
• URL: https://goc2025.framer.website/
• Purpose: Marketing site for Global Olive Corporation
• Design: Custom responsive design
• Integration: Seamless redirect to main application

Features:

• Hero section with value proposition
• Investment information (trees, tokens, real-world assets)
• Product showcase (premium olive oils)
• How it works section
• FAQ section
• Call-to-action leading to main application
• Responsive design

Integration:

• Landing page includes CTAs that redirect users to the main application at https://olive.yappix.studio/ for actual tree purchases and account management.

• Platform: Next.js 16+
• URL: https://olive.yappix.studio/
• Purpose: Full-featured e-commerce platform

Features: (see below)

• Key Features
• User Features
• Two-step registration with email verification (6-digit code)
• Tree catalog with search, filters, and interactive map (Leaflet)
• Shopping cart and checkout flow
• Stripe payment integration with Apple Pay and Google Pay
• Automatic authentication after purchase
• User dashboard with assets, orders, and profile
• Gift system — send trees to other users with messages
• PDF certificates — auto-generated ownership certificates
• Email notifications — 5 types of automated emails
• Bilingual support — Russian and English (i18n)

• User management — view, edit roles, delete users
• Tree management — create, edit, bulk price updates
• CSV import — bulk import trees from Excel/CSV
• Order monitoring — view all orders and payments
• Gift tracking — monitor all gift transactions
• Statistics dashboard — analytics and metrics
• Certificate designer — visual editor for PDF certificates
• Stripe settings — manage payment configurations

• API: Next.js API Routes (RESTful)
• ORM: Prisma 6.19.0
• Database: PostgreSQL
• Payments: Stripe 19.3.1 (Checkout Sessions + Webhooks)
• Email: Nodemailer 7.0.10 (SMTP)
• PDF Generation: pdf-lib 1.17.1
• Canvas Rendering: node-canvas 3.2.0
• File Processing: ExcelJS 4.4.0

• Server: Ubuntu Server
• Process Manager: PM2 with auto-restart
• Web Server: Nginx (reverse proxy)
• SSL: Let's Encrypt (HTTPS)
• Deployment: Git-based with automated scripts

• Discovery — User visits marketing landing page (https://goc2025.framer.website/)
• Information — User learns about olive tree investments, tokenization, and products
• Conversion — User clicks CTA to start investing
• Redirect — User is redirected to main application (https://olive.yappix.studio/)
• Registration — User creates account with email verification
• Purchase — User browses catalog, adds trees to cart, and completes checkout
• Ownership — User receives certificate and can manage assets in dashboard
• Engagement — User can gift trees, view orders, and track investments

Marketing-to-Application Flow

• Seamless integration between Framer landing page and Next.js application
• Consistent branding across both platforms
• Clear call-to-action directing users to main application
• User-friendly transition from marketing to transactional experience

Certificate Generation System

• Visual designer — drag-and-drop editor in admin panel
• Pixel-perfect rendering — server-side Canvas rendering matches web preview
• Dynamic PDF generation — personalized certificates with user data
• Batch regeneration — update all certificates with new design

Technical Implementation:

• Client-side Canvas API for design editor
• Server-side node-canvas for rendering
• PNG-to-PDF conversion using pdf-lib
• Coordinate system mapping between Canvas and PDF

Payment Integration

• Stripe Checkout — hosted payment page
• Apple Pay & Google Pay — configured via Payment Method Domain
• Webhook processing — idempotent event handling
• Automatic user creation — new accounts created on first purchase
• Session management — auto-login after payment

Security Features:

• Webhook signature verification
• Idempotency checks to prevent duplicate processing
• Transaction status validation

Gift System

• Send gifts — users can gift owned trees to others
• Email notifications — both sender and recipient notified
• Accept/Reject flow — recipient can accept or reject gifts
• Status management — trees transition between AVAILABLE, OWNED, GIFTING
• Transaction safety — database transactions ensure data consistency

Business Logic:

• Prevents gifting already-gifted trees
• Validates recipient email format
• Prevents self-gifting
• Handles edge cases (rejection, cancellation)
• Security Implementation

Vulnerability fixes:

• Fixed critical Next.js RCE vulnerability (upgraded to 16.0.7)
• Replaced vulnerable xlsx package with ExcelJS
• Patched Nodemailer DoS vulnerability
• Resolved glob command injection

Security headers:

• HSTS (Strict-Transport-Security)
• XSS Protection
• Frame Options (clickjacking protection)
• Content-Type Options
• Referrer Policy
• Permissions Policy

Authentication:

• JWT-like tokens with HMAC signatures
• HTTP-only cookies (XSS protection)
• Secure cookies in production (HTTPS only)
• 7-day session expiration

Rate limiting:

• Custom in-memory rate limiter
• Login: 10 requests/minute
• Registration: 10 requests/minute
• API endpoints: 100 requests/minute

Data protection:

• Password hashing with bcryptjs (10 rounds)
• Prepared statements via Prisma (SQL injection protection)
• Email verification with time-limited codes
• CSRF protection via SameSite cookies

Internationalization

• Multi-language support — Russian and English
• Dynamic language switching — user-selectable
• Comprehensive translations — all UI elements translated
• Extensible system — easy to add new languages

Email System

• 5 email types:
• Verification Code — 6-digit code for registration
• Welcome Email — after registration completion
• Certificate Email — PDF certificate after purchase
• Gift Received — notification to recipient
• Gift Sent — confirmation to sender
• HTML templates — styled emails with branding
• SMTP integration — Mail.ru SMTP with SSL

Multi-Platform Architecture

• Marketing Layer (Framer) — user acquisition and information
• Application Layer (Next.js) — core functionality and transactions
• Seamless handoff — clear user flow between platforms
• API Structure
• RESTful endpoints — organized by resource
• Middleware protection — route-level authentication
• Role-based access control — USER and ADMIN roles
• Error handling — consistent error responses
• Input validation — Zod schema validation
• Database Design
• Normalized schema — efficient relationships
• UUID primary keys — security and scalability
• JSON fields — flexible metadata storage
• Indexes — optimized queries
• Transactions — atomic operations for critical flows
• State Management
• Server-side rendering — Next.js App Router
• Client-side state — React hooks and context
• Session management — cookie-based authentication
• Real-time updates — optimistic UI updates

Code Quality

• TypeScript — full type safety
• ESLint — code linting
• Prisma — type-safe database queries
• Component architecture — reusable React components

Testing & Debugging

• Manual testing — comprehensive feature testing
• Error logging — detailed console logging
• PM2 monitoring — process monitoring and logs
• Stripe webhook testing — event simulation

Deployment

• Git-based workflow — version control
• Automated deployment scripts — one-command deployment
• Environment management — separate dev/prod configs
• Zero-downtime updates — PM2 graceful restarts

Performance Optimizations

• Next.js optimizations:
• Static page generation where possible
• Image optimization
• Code splitting
• Compression enabled
• Database optimizations:
• Indexed queries
• Efficient joins
• Pagination for large datasets
• API optimizations:
• Response caching headers
• Efficient data fetching
• Batch operations where applicable

Challenge 1: Marketing-to-Application Integration

Problem: Creating a seamless user experience between marketing landing page and main application.

Solution:

• Designed consistent branding across both platforms
• Implemented clear CTAs on landing page
• Created smooth redirect flow to main application
• Ensured user context is maintained during transition

Challenge 2: Certificate Rendering Accuracy

Problem: PDF certificates didn't match the visual designer preview (40-60px offset).

Solution:

• Implemented server-side Canvas rendering using node-canvas
• Mapped coordinate systems between browser Canvas and PDF
• Added per-element Y-offset adjustments
• Achieved pixel-perfect matching between preview and PDF

Challenge 3: Server Stability

Problem: Daily server crashes (502 Bad Gateway) due to port conflicts and zombie processes.

Solution:

• Configured PM2 with proper restart delays and memory limits
• Set up systemd for PM2 auto-startup
• Implemented process cleanup scripts
• Added monitoring and alerting

Challenge 4: Payment Flow Complexity

Problem: Handling both new and existing users during checkout, with automatic account creation.

Solution:

• Implemented idempotent webhook processing
• Created user lookup/creation logic in webhook handler
• Added login token generation for seamless authentication
• Handled edge cases (existing users, failed payments)

Project Metrics

Database:

• ~15000 users
• ~310,000 trees (150,500 available)
• ~20000 orders
• ~€100,000,000 total revenue

Performance:

• Build time: ~22 seconds
• Cold start: <1 second
• Hot reload: <200ms
• Zero security vulnerabilities (npm audit)

Codebase:

• TypeScript coverage: 100%
• API endpoints: 40+
• React components: 30+
• Database models: 8

Platforms:

• 1 Marketing landing page (Framer)
• 1 Main application (Next.js)
• Seamless integration between platforms

• Rate limiting with Redis for distributed systems
• Analytics integration (Google Analytics)
• In-app notifications
• PWA support
• Mobile app (React Native)
• Advanced reporting and exports
• Additional payment methods
• Multi-currency support
• Enhanced marketing landing page features
• A/B testing for conversion optimization
• Project Type: Full-Stack E-Commerce Platform with Marketing Integration
• Role: Full-Stack Developer
• Technologies: Framer, Next.js, React, TypeScript, PostgreSQL, Stripe, Prisma
• Status: ✅ Production Ready & Deployed
• Note: Domains are for portfolio demonstration purposes only