Olive — 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

Main Application

Tools

Tools

Tools

Project Overview

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

Project Structure

1. Marketing Landing Page (Framer)

  • Platform: Framer

  • URL: https://goc2025.framer.website/

  • Purpose: Marketing site for Global Olive Corporation

  • 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.


2. Main Application (Next.js)

  • Platform: Next.js 16.0.7

  • 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)

Admin Features

  • 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

Technical Stack

Marketing Landing Page

  • Platform: Framer

  • Design: Custom responsive design

  • Integration: Seamless redirect to main application

Main Application

Frontend:

  • Framework: Next.js 16.0.7 (App Router)

  • UI Library: React 19.2.0

  • Language: TypeScript 5.0

  • Styling: Tailwind CSS 3.4.0

  • Maps: Leaflet 1.9.4, React Leaflet 5.0.0

  • Internationalization: next-intl 4.5.3

  • Forms: React Phone Number Input, React Dropzone

  • Notifications: React Hot Toast

Backend:

  • 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

Infrastructure:

  • 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

User Journey

  1. Discovery — User visits marketing landing page (https://goc2025.framer.website/)

  1. Information — User learns about olive tree investments, tokenization, and products

  1. Conversion — User clicks CTA to start investing

  1. Redirect — User is redirected to main application (https://olive.yappix.studio/)

  1. Registration — User creates account with email verification

  1. Purchase — User browses catalog, adds trees to cart, and completes checkout

  1. Ownership — User receives certificate and can manage assets in dashboard

  1. Engagement — User can gift trees, view orders, and track investments

Technical Highlights

1. 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

2. 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

3. 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

4. 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)

5. 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

6. 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

7. Email System

  • 5 email types:

  1. Verification Code — 6-digit code for registration

  1. Welcome Email — after registration completion

  1. Certificate Email — PDF certificate after purchase

  1. Gift Received — notification to recipient

  1. Gift Sent — confirmation to sender

  • HTML templates — styled emails with branding

  • SMTP integration — Mail.ru SMTP with SSL

Architecture & Design Patterns

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

Development Process

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

Challenges & Solutions

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:

  • ~150 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

Tools & Technologies Used

Marketing:

  • Framer (landing page builder)

Development:

  • Git, GitHub

  • VS Code

  • Prisma Studio

  • Stripe Dashboard

Deployment:

  • SSH, PM2

  • Nginx

  • Let's Encrypt

  • Ubuntu Server

Monitoring:

  • PM2 logs

  • Stripe webhook logs

  • Database queries

  • Server monitoring

Key Achievements

✅ Zero vulnerabilities — fixed all security issues

✅ Production-ready — deployed and stable

✅ Full feature set — all requirements implemented

✅ Multi-platform integration — seamless marketing-to-application flow

✅ Scalable architecture — ready for growth

✅ Comprehensive documentation — complete project docs

✅ Security hardened — multiple layers of protection

✅ User-friendly — intuitive UI/UX across both platforms

✅ Admin-friendly — powerful management tools

Future Enhancements

  • 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

Skills

AI Design

UI Design

Cursor AI

Graphic Design

Design Systems

Front-End Development

DevOps

Design Sprint

Interaction Design

User Testing

Usability Testing

UX Research

Leadership

Canvas

No-Code

+ More

Create a free website with Framer, the website builder loved by startups, designers and agencies.