🎨 Frontend Engineer - Complete Guide¶

Frontend Engineers are responsible for creating responsive, user-friendly web interfaces and ensuring seamless user experiences across all Appgain platforms.

🎯 Role Overview¶

Primary Responsibilities¶

UI/UX Development: Create responsive web interfaces
Component Architecture: Build reusable React components
Performance Optimization: Ensure fast loading and smooth interactions
Cross-Platform Compatibility: Support multiple browsers and devices
Integration: Connect frontend with backend APIs and services

Key Technologies¶

React 18: Primary frontend framework with latest features
Node.js 22: Runtime environment for development and build tools
Ubuntu 22.04 LTS: Development and deployment environment
Next.js: Server-side rendering and optimization
TypeScript: Type-safe JavaScript development
CSS/SCSS: Styling and responsive design
JavaScript/ES6+: Modern JavaScript features
HTML5: Semantic markup and accessibility

🛠️ Development Environment Setup¶

Prerequisites¶

# Install Node.js 22 (LTS)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 22
nvm use 22
nvm alias default 22

# Install global packages
npm install -g yarn
npm install -g create-react-app
npm install -g @vitejs/plugin-react
npm install -g typescript

# Verify installations
node --version  # Should show v22.x.x
npm --version   # Should show 10.x.x or higher
yarn --version  # Should show 1.22.x or higher

Project Setup¶

# Clone frontend repositories
git clone https://github.com/appgain/frontend-app.git
git clone https://github.com/appgain/admin-dashboard.git
git clone https://github.com/appgain/mobile-web.git

# Install dependencies with Node 22
cd frontend-app && yarn install
cd ../admin-dashboard && yarn install
cd ../mobile-web && yarn install

# Verify React 18 installation
cd frontend-app && npm list react  # Should show react@18.x.x

Development Tools¶

VS Code: Primary IDE with React extensions
Chrome DevTools: Debugging and performance analysis
React Developer Tools: Component inspection (React 18 compatible)
Redux DevTools: State management debugging
Ubuntu 22.04 LTS: Development environment with latest packages

📱 Platform-Specific Development¶

1. Admin Dashboard¶

Technology: React 18 + TypeScript + Material-UI
Purpose: Internal admin interface for Appgain services
Features: User management, analytics, system monitoring
URL: https://admin-dashboard.instabackend.io
Node.js: 22.x LTS for development and build

2. Mobile Web Applications¶

Technology: React 18 + PWA capabilities
Purpose: Mobile-optimized web interfaces
Features: Responsive design, offline support, push notifications
Platforms: iOS Safari, Android Chrome, Progressive Web Apps
Node.js: 22.x LTS for development and build

3. Landing Pages & Marketing Sites¶

Technology: Next.js + React 18 + Tailwind CSS
Purpose: Marketing and customer acquisition
Features: SEO optimization, fast loading, conversion optimization
Sites: Appgain.io, iKhair.net, RetailGain.net, Shrinkit.me
Node.js: 22.x LTS for development and build

🔧 Development Workflow¶

Component Development¶

// Example React 18 component with TypeScript
import { FC, ReactNode } from 'react';

interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger';
  size: 'small' | 'medium' | 'large';
  children: ReactNode;
  onClick?: () => void;
}

const Button: FC<ButtonProps> = ({
  variant,
  size,
  children,
  onClick
}) => {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;

State Management¶

// Redux store configuration with React 18
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';
import notificationReducer from './slices/notificationSlice';

export const store = configureStore({
  reducer: {
    user: userReducer,
    notifications: notificationReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ['persist/PERSIST'],
      },
    }),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

API Integration¶

// API service with TypeScript and React 18
interface User {
  id: string;
  name: string;
  email: string;
  role: string;
}

class UserService {
  private baseURL = process.env.REACT_APP_API_URL || 'https://api.appgain.io';

  async getUsers(): Promise<User[]> {
    try {
      const response = await fetch(`${this.baseURL}/users`, {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
          'Content-Type': 'application/json',
        },
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      return response.json();
    } catch (error) {
      console.error('Failed to fetch users:', error);
      throw error;
    }
  }

  async createUser(userData: Omit<User, 'id'>): Promise<User> {
    try {
      const response = await fetch(`${this.baseURL}/users`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
        },
        body: JSON.stringify(userData),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      return response.json();
    } catch (error) {
      console.error('Failed to create user:', error);
      throw error;
    }
  }
}

export default UserService;

🎨 UI/UX Best Practices¶

Design System¶

Consistent Components: Reusable UI components across platforms
Typography: Clear hierarchy with consistent font families
Color Palette: Brand-consistent color scheme
Spacing: Consistent spacing using design tokens
Accessibility: WCAG 2.1 AA compliance

Responsive Design¶

/* Mobile-first responsive design */
.container {
  width: 100%;
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

Performance Optimization¶

Code Splitting: Lazy load components and routes with React 18 Suspense
Image Optimization: WebP format, lazy loading, responsive images
Bundle Optimization: Tree shaking, minification, compression
Caching: Browser caching, CDN optimization
Core Web Vitals: Optimize LCP, FID, CLS
React 18 Features: Concurrent rendering, automatic batching, transitions

🔗 Integration Points¶

Backend APIs¶

Appgain Server: User management and core functionality
Parse Server: Mobile app backend services
Notify Service: Push notifications and messaging
Admin Server: Administrative functions

External Services¶

Google Analytics: User behavior tracking
Hotjar: User experience analytics
Stripe: Payment processing
SendGrid: Email delivery
AWS S3: File storage and CDN

🧪 Testing Strategy¶

Unit Testing¶

// Jest + React Testing Library with React 18
import { render, screen, fireEvent } from '@testing-library/react';
import { StrictMode } from 'react';
import Button from './Button';

test('renders button with correct text', () => {
  render(
    <StrictMode>
      <Button variant="primary" size="medium">Click me</Button>
    </StrictMode>
  );
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

test('calls onClick when clicked', () => {
  const handleClick = jest.fn();
  render(
    <StrictMode>
      <Button variant="primary" size="medium" onClick={handleClick}>Click me</Button>
    </StrictMode>
  );
  fireEvent.click(screen.getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Integration Testing¶

API Integration: Test API calls and error handling
User Flows: End-to-end user journey testing
Cross-Browser: Test across different browsers
Mobile Testing: Test on various mobile devices

Performance Testing¶

Lighthouse: Core Web Vitals and performance metrics
Bundle Analysis: Webpack bundle analyzer
Load Testing: Stress testing with multiple users

🚀 Deployment Process¶

Build Process¶

# Production build with Node 22
npm run build

# Environment-specific builds
npm run build:staging
npm run build:production

# Bundle analysis
npm run analyze

# Type checking
npm run type-check

# Verify React 18 features
npm run lint:react

Deployment Pipeline¶

Code Review: Pull request review and approval
Automated Testing: Run test suite and quality checks
Build: Create optimized production build
Deploy: Deploy to staging/production environment
Monitor: Monitor performance and error rates

Environment Configuration¶

# Environment variables for React 18 + Node 22
REACT_APP_API_URL=https://api.appgain.io
REACT_APP_ENVIRONMENT=production
REACT_APP_GA_TRACKING_ID=GA-XXXXXXXXX
REACT_APP_SENTRY_DSN=https://xxxxx@sentry.io/xxxxx

# Node.js configuration
NODE_VERSION=22
NPM_CONFIG_ENGINE_STRICT=true

# React 18 specific
REACT_APP_STRICT_MODE=true
REACT_APP_CONCURRENT_FEATURES=true

🔧 Troubleshooting¶

Common Issues¶

Build Failures: Check TypeScript errors and dependencies
Performance Issues: Analyze bundle size and Core Web Vitals
Cross-Browser Issues: Test on different browsers and devices
API Integration: Verify API endpoints and authentication

Debug Commands¶

# Check for TypeScript errors
npm run type-check

# Analyze bundle size
npm run analyze

# Run performance audit
npm run lighthouse

# Check accessibility
npm run a11y

# Verify Node.js version
node --version  # Should be v22.x.x

# Check React version
npm list react  # Should be react@18.x.x

# Verify Ubuntu environment
lsb_release -a  # Should show Ubuntu 22.04 LTS

📚 Learning Path¶

Week 1: Foundation¶

Complete React 18 fundamentals course
Set up Ubuntu 22.04 development environment
Install Node.js 22 and verify installation
Understand React 18 component architecture
Learn TypeScript basics

Week 2: Hands-on¶

Build first React 18 component with TypeScript
Set up state management with Redux Toolkit
Create responsive layouts with modern CSS
Learn testing fundamentals with React Testing Library
Explore React 18 concurrent features

Week 3: Advanced¶

Optimize performance with React 18 features
Implement accessibility features (WCAG 2.1)
Create reusable component library
Document frontend systems and architecture
Master Node.js 22 development workflows

Week 4: Production¶

Deploy to production
Monitor and maintain
Optimize for scale
Share knowledge with team

🎥 Video Resources & Tutorials¶

Frontend Development Videos¶

Frontend Automation Journey¶

Appgain Web SDK Resources¶

Web SDK Training Videos¶

Shopify Development Videos¶

Shopify Website Development¶

🔌 Appgain Web SDK Integration¶

Overview¶

The Appgain Web SDK is a JavaScript library that enables websites to integrate with Appgain's marketing automation platform, providing features like user tracking, event logging, push notifications, and marketing automation.

Key Features¶

User Tracking: Track user behavior and attributes
Event Logging: Log custom events and purchases
Push Notifications: Web push notification subscription management
Marketing Automation: Trigger automated marketing campaigns
Multi-channel Messaging: Support for various communication channels

Installation¶

For Multiple Pages Website¶

<!-- Add to head tag -->
<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/AppgainSDK.min.js"></script>

<!-- Add to body tag -->
<script>
  const appgainConfig = {
    projectId: "<Your Project ID>",
    apiKey: "<Your API Key>",
    websiteName: "<Your Website Name (Optional)>",
    userId: "<Your User ID (Optional)>",
    useCustomModal: true, // Optional - defaults to false
  };

  AppgainSDK.init(appgainConfig)
    .then((response) => {
      console.log("Appgain SDK initialized successfully", response);
    })
    .catch((error) => {
      console.log("Appgain SDK initialization failed", error);
    });
</script>

For Single Page Application (SPA)¶

// In your main component (App.js, App.vue, index.js, etc.)
const appgainConfig = {
  projectId: "<Your Project ID>",
  apiKey: "<Your API Key>",
  websiteName: "<Your Website Name (Optional)>",
  userId: "<Your User ID (Optional)>",
  useCustomModal: true, // Optional - defaults to false
};

try {
  await AppgainSDK.init(appgainConfig);
  console.log("Appgain SDK initialized successfully");
} catch (error) {
  console.log("Appgain SDK initialization failed", error);
}

Required Setup¶

firebase-messaging-sw.js: Required for push notifications to work
Project ID: Available in Appgain Project Settings
API Key: Authentication key for SDK operations

SDK Methods¶

Update User Information¶

const userData = {
  name: "Username",
  email: "userEmail@example.com",
};

AppgainSDK.updateUser(userData)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

Log Purchases¶

AppgainSDK.logPurchase("Product Name", 99.99, "USD", "campaign_id")
  .then((res) => {
    console.log("Purchase logged successfully", res);
  })
  .catch((err) => {
    console.log("Failed to log purchase", err);
  });

Log Custom Events¶

const type = "page_view";
const action = "homepage_visit";
const extras = {
  page: "homepage",
  referrer: "google"
};

AppgainSDK.logEvent(type, action, extras)
  .then((res) => {
    console.log("Event logged successfully", res);
  })
  .catch((err) => {
    console.log("Failed to log event", err);
  });

Push Notification Management¶

// Subscribe to push notifications
AppgainSDK.webPushSubscribe()
  .then((res) => {
    console.log("Subscribed to push notifications", res);
  })
  .catch((err) => {
    console.log("Failed to subscribe", err);
  });

// Unsubscribe from push notifications
AppgainSDK.webPushUnSubscribe()
  .then((res) => {
    console.log("Unsubscribed from push notifications", res);
  })
  .catch((err) => {
    console.log("Failed to unsubscribe", err);
  });

Marketing Automation¶

AppgainSDK.fireAutomator("triggerPoint", { key: "value" })
  .then((res) => {
    console.log("Automator triggered successfully", res);
  })
  .catch((err) => {
    console.log("Failed to trigger automator", err);
  });

Best Practices¶

Error Handling¶

// Always wrap SDK calls in try-catch blocks
try {
  await AppgainSDK.init(config);
  console.log("SDK initialized successfully");
} catch (error) {
  console.error("SDK initialization failed:", error);
  // Implement fallback behavior
}

Performance Optimization¶

Initialize SDK early in the page load process
Use async/await for better error handling
Implement proper loading states
Cache user data to avoid repeated API calls

Security Considerations¶

Never expose API keys in client-side code
Validate all user input before sending to SDK
Implement proper CORS policies
Use HTTPS in production environments

Integration Examples¶

E-commerce Integration¶

// Track product views
function trackProductView(productId, productName, price) {
  AppgainSDK.logEvent("product_view", productId, {
    product_name: productName,
    price: price,
    category: "electronics"
  });
}

// Track add to cart
function trackAddToCart(productId, quantity, price) {
  AppgainSDK.logEvent("add_to_cart", productId, {
    quantity: quantity,
    price: price,
    timestamp: new Date().toISOString()
  });
}

// Track purchase completion
function trackPurchase(orderId, total, items) {
  AppgainSDK.logPurchase("Order " + orderId, total, "USD", "website_purchase");

  // Log individual items
  items.forEach(item => {
    AppgainSDK.logEvent("purchase_item", item.id, {
      product_name: item.name,
      price: item.price,
      quantity: item.quantity
    });
  });
}

User Onboarding Flow¶

// Track user registration
function trackUserRegistration(userData) {
  AppgainSDK.updateUser(userData);
  AppgainSDK.logEvent("user_registration", "completed", {
    source: "website",
    registration_method: "email"
  });
}

// Track onboarding steps
function trackOnboardingStep(stepNumber, stepName) {
  AppgainSDK.logEvent("onboarding_step", stepName, {
    step_number: stepNumber,
    completion_percentage: (stepNumber / totalSteps) * 100
  });
}

Testing & Debugging¶

Development Testing¶

// Enable debug mode
const debugConfig = {
  ...appgainConfig,
  debug: true
};

// Test SDK methods
async function testSDKMethods() {
  try {
    // Test user update
    await AppgainSDK.updateUser({ name: "Test User" });

    // Test event logging
    await AppgainSDK.logEvent("test_event", "test_action", { test: true });

    // Test purchase logging
    await AppgainSDK.logPurchase("Test Product", 10.00, "USD", "test_campaign");

    console.log("All SDK methods tested successfully");
  } catch (error) {
    console.error("SDK test failed:", error);
  }
}

Production Monitoring¶

Monitor SDK initialization success rates
Track API call performance and error rates
Implement analytics for user engagement metrics
Set up alerts for critical SDK failures

System Architecture? → Common Knowledge
Foundation Knowledge? → Foundation Courses
Learning Resources? → Learning Resources
Support? → Support & Contacts

🎨 Frontend Engineers create engaging and responsive user interfaces that deliver exceptional user experiences across all our platforms.

← Back to Home | ← Previous: Common Knowledge

🎨 Frontend Engineer - Complete Guide¶

🎯 Role Overview¶

Primary Responsibilities¶

Key Technologies¶

🛠️ Development Environment Setup¶

Prerequisites¶

Project Setup¶

Development Tools¶

📱 Platform-Specific Development¶

1. Admin Dashboard¶

2. Mobile Web Applications¶

3. Landing Pages & Marketing Sites¶

🔧 Development Workflow¶

Component Development¶

State Management¶

API Integration¶

🎨 UI/UX Best Practices¶

Design System¶

Responsive Design¶

Performance Optimization¶

🔗 Integration Points¶

Backend APIs¶

External Services¶

🧪 Testing Strategy¶

Unit Testing¶

Integration Testing¶

Performance Testing¶

🚀 Deployment Process¶

Build Process¶

Deployment Pipeline¶

Environment Configuration¶

🔧 Troubleshooting¶

Common Issues¶

Debug Commands¶

📚 Learning Path¶

Week 1: Foundation¶

Week 2: Hands-on¶

Week 3: Advanced¶

Week 4: Production¶

🎥 Video Resources & Tutorials¶

Frontend Development Videos¶

Frontend Automation Journey¶

Appgain Web SDK Resources¶

Web SDK Training Videos¶

Shopify Development Videos¶

Shopify Website Development¶

🔌 Appgain Web SDK Integration¶

Overview¶

Key Features¶

Installation¶

For Multiple Pages Website¶

For Single Page Application (SPA)¶

Required Setup¶

SDK Methods¶

Update User Information¶

Log Purchases¶

Log Custom Events¶

Push Notification Management¶

Marketing Automation¶

Best Practices¶

Error Handling¶

Performance Optimization¶

Security Considerations¶

Integration Examples¶

E-commerce Integration¶

User Onboarding Flow¶

Testing & Debugging¶

Development Testing¶

Production Monitoring¶

🎯 Quick Navigation¶