DEV Community: Artem Gontar

Backend Implementation: From 'It Works on My Machine' to Production-Ready API

Artem Gontar — Fri, 05 Sep 2025 12:06:00 +0000

Time to build the brain of our Purchase Tracker! While our React Native app looks pretty, it needs something to talk to — enter our Node.js TypeScript backend. Think of it as the reliable friend who remembers everything and never loses your receipts.

Why Node.js + TypeScript? Because Type Safety is Life 🌍

With Node.js + TypeScript, we get JavaScript everywhere plus compile-time error catching. No more "undefined is not a function" surprises in production.

Our stack:

Node.js + Express + TypeScript 🕷️ — Type-safe web framework
AWS Cognito 🛡️ — Authentication superhero
PostgreSQL + Prisma 🗄️ — Relational database with modern ORM
AWS S3 + Textract ☁️ — Cloud storage and OCR
Jest + Supertest 🧪 — Testing squad

The Architecture 🏗️

Frontend (React Native) → Backend (Node.js/Express/TypeScript)
├── 🔐 AWS Cognito (Authentication)
├── 📸 AWS S3 (File Storage)  
├── 👁️ Textract (OCR)
└── 🗄️ PostgreSQL + Prisma (Database)

Quick Setup 📁

npm init -y
# Core dependencies
npm install express cors helmet morgan dotenv joi multer prisma @prisma/client
npm install @aws-sdk/client-s3 @aws-sdk/client-textract aws-jwt-verify

# TypeScript setup
npm install -D typescript @types/node @types/express tsx nodemon jest

Project structure:

backend/src/
├── controllers/     # Request handlers
├── middleware/      # Auth, validation
├── routes/         # API endpoints
├── services/       # Business logic
├── config/         # Settings
├── types/          # TypeScript definitions
└── utils/          # Helpers

Authentication: AWS Cognito Magic 🏋️‍♂️

No more password hashing nightmares. Cognito handles auth so we focus on business logic.

// src/services/cognitoService.ts
import { CognitoJwtVerifier } from 'aws-jwt-verify';

class CognitoService {
  private verifier = CognitoJwtVerifier.create({
    userPoolId: config.aws.cognito.userPoolId,
    tokenUse: 'access',
    clientId: config.aws.cognito.clientId,
  });

  async verifyToken(token: string): Promise<any> {
    return await this.verifier.verify(token); // ✨ Magic
  }

  async getOrCreateUser(cognitoPayload: any): Promise<any> {
    const { sub: cognitoId, email, given_name, family_name } = cognitoPayload;

    let user = await prisma.user.findUnique({ where: { cognitoId } });
    if (!user) {
      user = await prisma.user.create({
        data: { cognitoId, email, firstName: given_name, lastName: family_name }
      });
    }
    return user;
  }
}

File Upload: S3 Made Simple 📸☁️

// src/services/s3Service.ts
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

class S3Service {
  private s3Client = new S3Client({ /* config */ });

  async uploadFile(file: UploadedFile, key: string): Promise<string> {
    const command = new PutObjectCommand({
      Bucket: config.aws.s3.bucket,
      Key: key,
      Body: file.buffer,
      ContentType: file.mimetype,
    });

    await this.s3Client.send(command);
    return `https://${config.aws.s3.bucket}.s3.amazonaws.com/${key}`;
  }

  generateFileKey(userId: string, originalName: string): string {
    const timestamp = Date.now();
    const sanitized = originalName.replace(/[^a-zA-Z0-9.-]/g, '_');
    return `receipts/${userId}/${timestamp}_${sanitized}`;
  }
}

Simple workflow: Upload → Generate unique key → Store in S3 → Return URL 🎉

OCR Magic: Textract Reads Receipts 👀📄

// src/services/textractService.ts
import { TextractClient, AnalyzeDocumentCommand } from '@aws-sdk/client-textract';

class TextractService {
  private textractClient = new TextractClient({ /* config */ });

  async analyzeExpense(s3Key: string): Promise<any> {
    const command = new AnalyzeDocumentCommand({
      Document: { S3Object: { Bucket: config.aws.s3.bucket, Name: s3Key } },
      FeatureTypes: ['FORMS', 'TABLES'],
    });

    const response = await this.textractClient.send(command);
    return this.parseExpenseData(response);
  }

  private extractTotalAmount(blocks: TextractBlock[]): number | null {
    const patterns = [/total.*?[\$]?(\d+\.\d{2})/i, /[\$](\d+\.\d{2})/];

    for (const block of blocks.filter(b => b.BlockType === 'LINE')) {
      for (const pattern of patterns) {
        const match = block.Text?.match(pattern);
        if (match) return parseFloat(match[1]);
      }
    }
    return null; // Sometimes receipts are mysterious 🤷‍♂️
  }
}

Database: PostgreSQL + Prisma = Type Safety + Reliability 😊

// prisma/schema.prisma
model User {
  id        String   @id @default(cuid())
  email     String   @unique
  cognitoId String   @unique
  firstName String?
  lastName  String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  receipts  Receipt[]
  purchases Purchase[]
}

model Receipt {
  id           String        @id @default(cuid())
  userId       String
  originalName String
  s3Key        String        @unique
  s3Url        String?
  status       ReceiptStatus @default(UPLOADED)
  extractedData Json?        // OCR results
  createdAt    DateTime      @default(now())

  user     User      @relation(fields: [userId], references: [id])
  purchase Purchase?
}

enum ReceiptStatus {
  UPLOADED | PROCESSING | PROCESSED | FAILED
}

Why PostgreSQL + Prisma rocks:

✅ Strong typing — Catch errors at compile time
✅ Relational integrity — Proper foreign keys
✅ Type-safe client — Auto-generated TypeScript types
✅ Migration system — Version control for schema

API Routes: Clean & RESTful 🛣️

// src/routes/receipts.ts
import { Router } from 'express';
import receiptController from '@/controllers/receiptController';
import cognitoAuth from '@/middleware/cognitoAuth';
import { upload } from '@/middleware/upload';

const router: Router = Router();

router.post('/upload', cognitoAuth, upload.single('receipt'), receiptController.uploadReceipt);
router.get('/', cognitoAuth, receiptController.getReceipts);
router.get('/:id', cognitoAuth, receiptController.getReceiptById);
router.delete('/:id', cognitoAuth, receiptController.deleteReceipt);

export default router;

Clean endpoints:

POST /api/receipts/upload — Upload receipt image
GET /api/receipts — List all receipts
GET /api/receipts/:id — Get specific receipt
GET /api/purchases — List purchases
GET /api/users/profile — User profile

Error Handling: When Things Go Wrong 💥

// src/middleware/errorHandler.ts
import { Request, Response, NextFunction } from 'express';

const errorHandler = (error: any, req: Request, res: Response, next: NextFunction): void => {
  console.error('Error:', error);

  if (error instanceof AppError) {
    res.status(error.status).json({
      success: false,
      code: error.code,
      message: error.message,
      timestamp: new Date().toISOString()
    });
    return;
  }

  // Prisma errors
  if (error.code?.startsWith('P')) {
    const status = error.code === 'P2002' ? 409 : 404; // Duplicate : Not found
    res.status(status).json({
      success: false,
      code: error.code === 'P2002' ? 'DUPLICATE_RECORD' : 'RECORD_NOT_FOUND',
      message: 'Database operation failed',
      timestamp: new Date().toISOString()
    });
    return;
  }

  // Default error
  res.status(500).json({
    success: false,
    code: 'INTERNAL_ERROR',
    message: 'Something went wrong',
    timestamp: new Date().toISOString()
  });
};

Testing: Proving It Works 🧪

// tests/routes/receipts.test.ts
import request from 'supertest';
import app from '@/app';

describe('POST /api/receipts/upload', () => {
  test('should upload receipt successfully', async () => {
    const response = await request(app)
      .post('/api/receipts/upload')
      .set('Authorization', `Bearer valid-token`)
      .attach('receipt', 'tests/fixtures/receipt.jpg')
      .expect(201);

    expect(response.body.success).toBe(true);
    expect(response.body.data).toHaveProperty('id');
  });

  test('should reject unauthorized upload', async () => {
    await request(app)
      .post('/api/receipts/upload')
      .attach('receipt', 'tests/fixtures/receipt.jpg')
      .expect(401);
  });
});

What we test: Happy paths, error cases, auth flows, edge cases.

Deployment Checklist 🌐

✅ Environment variables configured
✅ Database migrations run  
✅ TypeScript compilation successful
✅ AWS services configured
✅ Tests passing
✅ SSL enabled
✅ CORS configured

Key environment variables:

NODE_ENV=production
DATABASE_URL=postgresql://user:pass@host:5432/db
AWS_COGNITO_USER_POOL_ID=us-east-1_xxxxxxxxx
AWS_S3_BUCKET=purchase-tracker-receipts
AWS_REGION=us-east-1

What We Built ✨

A backend that:

✅ Scales (handles real traffic)
✅ Type-safe (catches errors early)
✅ Secure (Cognito handles auth)
✅ Reliable (proper error handling)
✅ Maintainable (clean structure + TypeScript)
✅ Fast (optimized queries + caching)

TL;DR: Node.js + TypeScript + AWS + PostgreSQL + Prisma = Backend that makes you look like a rockstar 🎸

Stack: Node.js, Express, TypeScript, AWS Cognito, S3, Textract, PostgreSQL, Prisma, Jest

Architecture: Type-safe RESTful API with JWT auth, file processing, OCR integration, and modern best practices. 🚀

Expo: The Swiss Army Knife of React Native (And How to Test Your App Everywhere)

Artem Gontar — Thu, 04 Sep 2025 11:05:29 +0000

Welcome to the wonderful world of Expo! If React Native is the engine of your app, then Expo is the entire garage — complete with tools, spare parts, and a really nice coffee machine. Today we're diving into what makes Expo magical and how to test your Purchase Tracker app on every device imaginable (including that old iPad your mom still uses).

What the Heck is Expo? 🤔

Think of Expo as React Native with superpowers and a really good UX team. It's a platform that makes building, deploying, and testing React Native apps feel less like rocket science and more like... well, regular science. The fun kind with fewer explosions.

Expo gives you:

📦 Pre-built modules (camera, notifications, etc.)
🔄 Over-the-air updates (push fixes without app store delays)
🎯 Easy testing (scan QR code, boom, app runs)
☁️ Build services (build iOS apps without owning a Mac!)
🛠️ Developer tools (debugging that doesn't make you cry)

It's like having a full development team, but they never complain about the office coffee.

The Expo Ecosystem: Your New Best Friends 👥

Expo CLI: The Command Center 💻

Your terminal's new favorite command:

npx expo start  # Starts the development server
npx expo start --tunnel  # For when your network is being difficult
npx expo build  # Builds your app for production
npx expo publish  # Pushes updates to existing apps

Expo Go: The Magic Portal 📱

This little app turns any phone into a testing device. Download it from:

App Store (iOS)
Google Play (Android)

Scan the QR code from your terminal, and BOOM — your app appears. It's like Uber, but for apps.

Expo SDK: The Toolbox 🧰

Pre-built modules for common tasks:

// Camera access
import * as ImagePicker from 'expo-image-picker';

// File system
import * as FileSystem from 'expo-file-system';

// Notifications
import * as Notifications from 'expo-notifications';

// And literally hundreds more...

Testing Environments: The Greatest Hits Tour 🎵

1. Web Browser: The Quick Preview 🌐

Best for: UI tweaks, layout testing, showing off to your cat

npm run web
# Opens http://localhost:19006

Pros:

Instant feedback
Easy screenshots
DevTools access
Works on any computer

Cons:

No native features (camera, notifications)
Different layout engine
Not exactly how users will see it

2. iOS Simulator: The Apple Experience 🍎

Best for: iOS-specific testing, App Store screenshots

Requirements:

macOS only (sorry, Windows folks)
Xcode installed

npm run ios
# Or press 'i' in the Expo terminal

Pros:

Exact iOS behavior
Multiple device sizes
iOS-specific testing
Perfect for screenshots

Cons:

Mac only
Slower than real devices
No real camera/sensors

3. Android Emulator: The Google Galaxy 🤖

Best for: Android testing, Play Store prep

Requirements:

Android Studio
A computer that can handle emulation (aka not a potato)

npm run android
# Or press 'a' in the Expo terminal

Pros:

Works on any OS
Multiple Android versions
Various screen sizes
Google Play services

Cons:

Can be slow
Resource hungry
Setup can be tricky

4. Real Devices: The Ultimate Truth 📱

Best for: Everything! Performance, real user experience, actual testing

Setup:

Download Expo Go
Connect to same WiFi as your computer
Scan QR code
Marvel at the magic ✨

Pros:

Real performance
Actual camera/sensors
True user experience
Can test anywhere

Cons:

Requires physical device
Network dependent
Limited debugging

Network Connectivity: When WiFi Gets Moody 📶

Sometimes your phone and computer can't talk to each other. Here's how to fix it:

Solution 1: Tunnel Mode (The Nuclear Option)

npx expo start --tunnel

Routes through Expo's servers. Slower but works everywhere.

Solution 2: LAN Mode (The Ideal World)

npx expo start --lan

Uses your local network. Faster but pickier about network setup.

Solution 3: Localhost (The Fallback)

npx expo start --localhost

Only works with simulators/emulators on the same machine.

Development Workflow: The Daily Grind ☕

Here's how a typical development session looks:

# 1. Start the server
npm start

# 2. Open on your preferred platform
# Web for quick UI checks
# Real device for real testing
# Simulator for specific OS testing

# 3. Make changes
# Hot reload kicks in automatically

# 4. Test features
# Shake device for developer menu
# Console.log appears in terminal

# 5. Debug issues
# Press 'j' for debugger
# Press 'm' for developer menu

# 6. Repeat until perfect
# (or until deadline, whichever comes first)

Pro Testing Tips: Level Up Your Game 🎮

1. Test Early, Test Often

Don't wait until the end to test on real devices. That's like only trying on your wedding dress on the wedding day — technically possible, but risky.

2. Use Multiple Devices

Test on:

Different screen sizes (phone, tablet)
Different OS versions (iOS 14, 15, 16+)
Different performance levels (new flagship, old budget phone)

3. Network Conditions Matter

Test on:

WiFi (fast and slow)
4G/5G mobile data
Airplane mode (for offline functionality)

4. Real User Scenarios

Use the app while walking
Test with sweaty fingers
Try it in bright sunlight
Test with one hand while drinking coffee

5. Performance Monitoring

# Check bundle size
npx expo export --public-url https://expo.dev

# Monitor performance
# Use React DevTools
# Check for memory leaks
# Test on older devices

Debugging: When Things Go Wrong (Spoiler: They Will) 🐛

Common Issues and Fixes

"Could not connect to server"

# Try tunnel mode
npx expo start --tunnel

# Check same WiFi network
# Restart Expo Go app
# Clear Expo cache

"Module not found"

# Clear node modules
rm -rf node_modules package-lock.json
npm install

# Clear Expo cache
npx expo start --clear

"Build failed"

# Check Expo compatibility
npx expo doctor

# Update dependencies
npx expo install --fix

Debug Tools Arsenal 🛠️

Console logs appear in terminal
React DevTools for component inspection
Network tab for API debugging
Performance monitor for optimization
Expo DevTools for everything else

Testing Our Purchase Tracker: The Checklist ✅

Here's what to test across all platforms:

Core Functionality

[ ] App launches without crashes
[ ] Navigation works (Home, Scan, Profile tabs)
[ ] Purchase cards display correctly
[ ] "Take Photo" generates new purchases
[ ] Purchase details show on tap
[ ] Pull to refresh works

Platform-Specific

[ ] iOS: Proper safe areas, native feel
[ ] Android: Back button behavior, material design
[ ] Web: Responsive layout, keyboard navigation

Performance

[ ] Smooth animations
[ ] Fast list scrolling
[ ] Quick app startup
[ ] Memory usage reasonable

Edge Cases

[ ] No internet connection
[ ] Very long store names
[ ] Large number of purchases
[ ] Different screen orientations

The Future: Beyond Expo Go 🚀

As your app grows, you might need:

Custom Development Builds

For when you need native modules not in Expo SDK:

npx expo run:ios
npx expo run:android

Production Builds

For app store submissions:

npx expo build:ios
npx expo build:android

Over-the-Air Updates

Push fixes without app store review:

npx expo publish

Why Expo Rocks for MVP Development 🎸

Speed: From idea to testing in minutes
Simplicity: Less config, more coding
Compatibility: Works everywhere out of the box
Community: Amazing docs and support
Free tier: Perfect for MVPs and side projects

Building Components: From Boring Buttons to Receipt-Chomping Cards

Artem Gontar — Mon, 01 Sep 2025 08:12:55 +0000

Building Components: From Boring Buttons to Receipt-Chomping Cards 🧱🎨

Time to add some meat to our React Native skeleton! Today we're building the core components that'll make our Purchase Tracker actually track purchases (revolutionary, I know). Think of this as interior decorating, but for apps — and way more fun than picking out throw pillows.

The Component Cast: Meet Your New Best Friends 🎭

We're building three main characters for our app:

PurchaseCard 💳 — The star of the show, displays purchase info
CameraView 📸 — The receipt scanner (currently fake, but it has dreams)
Navigation 🧭 — The GPS for our app (gets you where you need to go)

Let's dive in!

PurchaseCard: The Receipt Whisperer 🧾✨

This little beauty turns boring purchase data into eye candy. It's like Marie Kondo for your receipts — everything has its place, and it sparks joy (or at least doesn't spark rage).

// src/components/PurchaseCard.tsx
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import { Purchase } from '../types';

interface PurchaseCardProps {
  purchase: Purchase;
}

export const PurchaseCard: React.FC<PurchaseCardProps> = ({ purchase }) => {
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  const handlePress = () => {
    // Show purchase details in a popup
    const itemsList = purchase.items
      .map(item => `${item.quantity}x ${item.name} - $${item.price.toFixed(2)}`)
      .join('\n');

    Alert.alert(
      `${purchase.storeName} - $${purchase.total.toFixed(2)}`,
      `Date: ${formatDate(purchase.date)}\n\nItems:\n${itemsList}`,
      [{ text: 'OK' }]
    );
  };

  return (
    <TouchableOpacity style={styles.card} onPress={handlePress}>
      <View style={styles.header}>
        <Text style={styles.storeName}>{purchase.storeName}</Text>
        <Text style={styles.total}>${purchase.total.toFixed(2)}</Text>
      </View>
      <Text style={styles.date}>{formatDate(purchase.date)}</Text>
      <Text style={styles.itemCount}>
        {purchase.items.length} item{purchase.items.length !== 1 ? 's' : ''}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    padding: 16,
    marginHorizontal: 16,
    marginVertical: 8,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3, // Android shadow
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  storeName: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  total: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#2196F3',
  },
  date: {
    fontSize: 14,
    color: '#666',
    marginBottom: 4,
  },
  itemCount: {
    fontSize: 12,
    color: '#999',
  },
});

What makes this card special?

Tappable! (Shows purchase details)
Pretty shadows (because flat is boring)
Smart date formatting (no more ISO timestamp nightmares)
Responsive design (works on tiny and huge screens)

CameraView: The Fake-It-Till-You-Make-It Scanner 📸🎬

This component pretends to be a camera until we hook up the real thing. It's like a stunt double for our actual camera functionality — looks the part, does the job (sort of).

// src/components/CameraView.tsx
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

interface CameraViewProps {
  onTakePhoto: () => void;
  isLoading?: boolean;
}

export const CameraView: React.FC<CameraViewProps> = ({ 
  onTakePhoto, 
  isLoading = false 
}) => {
  return (
    <View style={styles.container}>
      <View style={styles.cameraPlaceholder}>
        <Text style={styles.cameraText}>📸</Text>
        <Text style={styles.instructionText}>Point camera at receipt</Text>

        {/* The viewfinder frame */}
        <View style={styles.frame}>
          <View style={styles.corner} />
          <View style={[styles.corner, styles.topRight]} />
          <View style={[styles.corner, styles.bottomLeft]} />
          <View style={[styles.corner, styles.bottomRight]} />
        </View>
      </View>

      <TouchableOpacity 
        style={[styles.captureButton, isLoading && styles.captureButtonDisabled]} 
        onPress={onTakePhoto}
        disabled={isLoading}
      >
        <Text style={styles.captureButtonText}>
          {isLoading ? 'Processing...' : 'Take Photo'}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cameraPlaceholder: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
  },
  cameraText: {
    fontSize: 64,
    marginBottom: 16,
  },
  instructionText: {
    color: '#fff',
    fontSize: 16,
    marginBottom: 32,
  },
  frame: {
    width: 250,
    height: 350,
    position: 'relative',
  },
  corner: {
    position: 'absolute',
    width: 30,
    height: 30,
    borderColor: '#2196F3',
    borderWidth: 3,
    // Each corner has different border sides
  },
  // ... more corner styles for positioning
  captureButton: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 40,
    paddingVertical: 16,
    borderRadius: 50,
    marginBottom: 50,
  },
  captureButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

Why this works:

Looks legit (corners like a real camera app)
Loading states (because users need feedback)
Accessible (clear instructions and big buttons)
Dark theme (because cameras are moody)

Navigation: The App's GPS System 🗺️

Bottom tabs are the SUV of mobile navigation — practical, reliable, and everyone knows how to use them.

// src/navigation/AppNavigator.tsx
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import { HomeScreen } from '../screens/HomeScreen';
import { ScanScreen } from '../screens/ScanScreen';
import { ProfileScreen } from '../screens/ProfileScreen';

const Tab = createBottomTabNavigator();

export const AppNavigator: React.FC = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName: keyof typeof Ionicons.glyphMap;

          if (route.name === 'Home') {
            iconName = focused ? 'list' : 'list-outline';
          } else if (route.name === 'Scan') {
            iconName = focused ? 'camera' : 'camera-outline';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person-outline';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#2196F3',
        tabBarInactiveTintColor: 'gray',
        tabBarStyle: {
          backgroundColor: '#fff',
          borderTopColor: '#e0e0e0',
          height: 60,
        },
        headerStyle: {
          backgroundColor: '#2196F3',
        },
        headerTintColor: '#fff',
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Scan" component={ScanScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

The Mock Data Factory: Fake It Till You Make It 🏭

We need some fake purchases to test our components. Let's create a data service that pretends to be an API:

// src/services/mockData.ts
import { Purchase } from '../types';

export const mockPurchases: Purchase[] = [
  {
    id: '1',
    date: '2025-08-27T14:30:00Z',
    storeName: 'Carrefour',
    total: 15.67,
    items: [
      { name: 'Milk 1L', price: 1.20, quantity: 1 },
      { name: 'Bread', price: 0.80, quantity: 2 },
      { name: 'Apples 1kg', price: 2.50, quantity: 1 },
      { name: 'Chicken breast', price: 8.97, quantity: 1 }
    ]
  },
  // More mock data...
];

// Simulate API delay because real APIs aren't instant
export const fetchPurchases = (): Promise<Purchase[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([...mockPurchases]);
    }, 800); // Fake loading time
  });
};

Component Design Philosophy: KISS (Keep It Simple, Smarty) 💋

Our component rules:

Single responsibility — Each component does one thing well
Predictable props — Clear interfaces, no surprises
Accessible — Works for everyone, not just developers
Testable — Easy to test, easy to trust
Reusable — Write once, use everywhere

Testing Your Components (The Reality Check) ✅

Here's how to make sure your components actually work:

// Quick manual test checklist:
// ✅ PurchaseCard displays all info correctly
// ✅ Tapping shows purchase details
// ✅ CameraView looks like a camera
// ✅ "Take Photo" button responds
// ✅ Navigation switches between screens
// ✅ Loading states show properly

What We Built vs. What We'll Build 🏗️

Current status (MVP vibes):

Mock camera (looks real, acts fake)
Static purchase data (no backend yet)
Basic interactions (taps and alerts)
Pretty UI (because ugly apps make people sad)

Future upgrades (when we level up):

Real camera integration
Actual OCR processing
Cloud data storage
Push notifications
Dark mode (because we're fancy)

Pro Tips for Component Success 🎯

Start with mock data — Build the UI first, worry about APIs later
Use TypeScript — Catch bugs before they catch you
Think mobile-first — Thumbs are bigger than cursors
Test on real devices — Simulators lie sometimes
Keep it simple — Complex components are hard to debug

What's Next? 🚀

We've got our building blocks ready! Next up:

Putting these components together into real screens
Adding state management (when things get stateful)
Connecting to a real backend (when we're feeling brave)

Remember: great apps are just collections of well-designed components that play nice together. We're building the Avengers of components here! 🦸‍♂️

Component Status: ✅ Built and ready to assemble!

Next post: We'll explore the magical world of Expo and how to test this masterpiece on every device you own (and some you don't). Stay tuned! 📱✨

React Native Skeleton: From Zero to 'Hello World' Without Losing Your Sanity

Artem Gontar — Sun, 31 Aug 2025 09:34:35 +0000

So you want to build a mobile app? Welcome to the club! Today we're setting up the bare bones of a React Native project — think of it as the skeleton that'll eventually grow into our Purchase Tracker beast. Don't worry, this skeleton is friendly and won't haunt your dreams (unlike some dependency conflicts I've seen).

Why React Native? Because Life's Too Short for Two Codebases 🤷‍♂️

Let's be real: nobody wants to build the same app twice. React Native lets you write once and deploy everywhere — iOS, Android, and even web if you're feeling fancy. It's like having a universal remote for mobile development, except it actually works.

Plus, if you already know React, you're halfway there. If you don't... well, you're about to learn! 🚀

What We're Installing (The Shopping List) 🛒

Here's what we need to get our skeleton walking:

The Essential Trinity

# The holy trinity of mobile development
npx create-expo-app mobile --template blank-typescript
cd mobile
npm install @react-navigation/native @react-navigation/bottom-tabs

The Supporting Cast

# Because navigation without screens is just... confusing
npm install react-native-screens react-native-safe-area-context

# Icons, because nobody likes text-only buttons
npm install @react-native-vector-icons/ionicons

# Camera stuff (for when we actually want to scan receipts)
npm install expo-image-picker

The Hello World That Actually Says Hello 👋

Forget the boring "Hello World" — let's make something that has personality:

// App.tsx - The main character of our story
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export default function App() {
  const [greetingCount, setGreetingCount] = React.useState(0);

  const greetings = [
    "Hello, World! 👋",
    "Sup, Universe! 🌍",
    "Hey there, Developer! 👨‍💻",
    "Greetings, Human! 🤖",
    "What's up, Code Warrior! ⚔️"
  ];

  const handlePress = () => {
    setGreetingCount((count) => (count + 1) % greetings.length);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Purchase Tracker</Text>
      <Text style={styles.subtitle}>MVP in Progress... 🚧</Text>

      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.greeting}>
          {greetings[greetingCount]}
        </Text>
      </TouchableOpacity>

      <Text style={styles.hint}>
        Tap the greeting to cycle through messages!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#2196F3',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 40,
  },
  button: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 30,
    paddingVertical: 15,
    borderRadius: 25,
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  greeting: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
  },
  hint: {
    fontSize: 14,
    color: '#999',
    textAlign: 'center',
  },
});

Project Structure: Organized Chaos 📁

Here's how to keep your code from becoming a digital dumpster fire:

mobile/
├── src/                    # Where the magic happens
│   ├── components/         # Reusable UI bits
│   ├── screens/           # Full-screen components
│   ├── navigation/        # How users get around
│   ├── services/          # API calls and data stuff
│   ├── types/            # TypeScript definitions
│   └── utils/            # Helper functions
├── assets/               # Images, fonts, etc.
├── App.tsx              # The main boss
└── package.json         # Dependency party list

TypeScript: Because You Like Your Bugs Found Early ✅

We're using TypeScript because catching bugs at compile time > finding them in production at 3 AM. Trust me on this one.

Create a simple type file to get started:

// src/types/index.ts
export interface AppProps {
  title: string;
  subtitle?: string;
}

export interface User {
  id: string;
  name: string;
  email: string;
}

// More types will live here as we grow

Running Your Masterpiece 🏃‍♂️

# Start the development server
npm start

# Open on Android (if you have an emulator)
npm run android

# Open on iOS (if you're on macOS)
npm run ios

# Open in web browser (because why not?)
npm run web

Pro Tips for Skeleton Success 💀✨

Keep it simple: Start small, grow gradually
Use TypeScript: Your future self will thank you
Organize early: Good structure prevents headaches later
Test often: Run it early, run it often
Have fun: If you're not enjoying it, you're doing it wrong!

What's Next? 🚀

Now that we have a working skeleton, we can start adding flesh to these bones:

Navigation between screens
Real components with actual functionality
State management (when things get spicy)
API integration (when we connect to the real world)

Remember: every great app started as a simple "Hello World" — even Instagram was probably just a button that said "Take Photo" at some point!

Skeleton Status: ✅ Assembled and walking!

Next up: We'll build the actual components that make our Purchase Tracker tick. Stay tuned! 🎬

Building Purchase Tracker: The MVP That Eats Your Receipts (So You Don’t Have To)

Artem Gontar — Thu, 28 Aug 2025 11:35:21 +0000

Tired of juggling receipts, apps, and loyalty platforms from every store you visit? Me too. The real headache isn’t just the paper clutter — it’s trying to keep track of your purchases when every store has its own system, its own app, and its own way of showing you what you bought. Comparing your spending across stores? Practically impossible. That’s why I’m building Purchase Tracker — a minimal, cross-platform app that lets you snap a photo of any receipt and instantly see all your purchases in one place, no matter where you shop. Aggregation, not aggravation!

What’s the Big Idea? 💡

Purchase Tracker is all about simplicity:

Snap a paper receipt 📸
App runs OCR magic to extract the juicy details
Data is saved to the cloud (no more lost receipts!)
See your purchase history in a clean, minimalist feed

That’s it. No complicated onboarding, no 17-step setup, just point, shoot, and track. If you can take a selfie, you can use this app (and your receipts will look better, too).

Why Bother? (a.k.a. The MVP Goal) 🎯

Let’s be honest: most people don’t track their spending because it’s a pain. The goal here is to prove that if you make it ridiculously easy, people will actually do it. Plus, I want to see if modern OCR can handle the wild world of receipts (spoiler: some are weirder than others).

The Tech Stack: Simple, Not Boring 🛠️

React Native for the mobile app (because I like my code like my coffee: reusable and cross-platform)
AWS for the backend (S3, DynamoDB, Lambda, API Gateway, Cognito, and Textract for OCR)
Minimalist UI: just a feed of receipts, a scan screen, and a profile (with a logout button, for when you need a break from all that responsible adulting)

How Does It Work? (The 7-Step Dance)

User takes a photo of a receipt
App sends it to the cloud
Lambda stores the photo in S3
Textract does its OCR thing
Parser turns the text into structured data (store, date, items, total)
Data lands in DynamoDB
App fetches and displays your purchases

It’s like a conga line, but for your expenses.

The Data Model (a.k.a. The Nerdy Bit)

{
  "purchaseId": "uuid",
  "userId": "uuid",
  "date": "2025-08-27T12:34:56Z",
  "storeName": "Carrefour",
  "items": [
    { "name": "Milk", "price": 1.20, "quantity": 1 },
    { "name": "Bread", "price": 0.80, "quantity": 1 }
  ],
  "total": 2.00,
  "rawText": "original OCR text",
  "imageUrl": "s3://bucket/..."
}

What’s Next? 🚀

This is just the beginning! Next up:

Setting up the AWS infrastructure (wish me luck)
Building the React Native skeleton
Making sure the app doesn’t mistake your shopping list for a receipt (unless you want it to)

Stay tuned for more posts as I build this thing out, one receipt at a time. Got ideas, jokes, or horror stories about receipts? Drop them in the comments!

MVP = React Native app + AWS (Textract, S3, DynamoDB, Lambda, API Gateway, Cognito).

User → photo of receipt → OCR → JSON → display in purchase feed. Easy, right? 😎

WordPress-managed hosting based on containers

Artem Gontar — Tue, 21 Feb 2023 09:09:24 +0000

Disclosure: I may earn a commission from qualifying purchases made through links on this blog post. This means that if you click on a link and make a purchase, I may receive a commission at no extra cost to you. I only recommend products or services that I personally use or believe will add value to my readers.

In recent years, container technology has been gaining popularity in the world of web hosting. Convesio is one platform that has capitalized on this trend to offer a managed hosting solution for WordPress sites. In this article, we will explore Convesio and the benefits it offers over traditional hosting options.

What is Convesio?

At its core, Convesio is a managed hosting platform for WordPress sites, but what sets it apart is its use of container technology. Containers allow for the isolation of individual applications, ensuring that one site's issues do not impact another's. Additionally, containers allow for easy scalability, as more resources can be added as needed.

How Convesio Works?

Convesio operates by deploying containers, each containing an instance of WordPress. This approach offers numerous benefits, including easy scalability and a high level of reliability. Moreover, developers can easily deploy changes to the site through the Convesio platform, making it an excellent option for teams with frequent updates.

Features and Benefits of Convesio

Convesio offers a range of features that set it apart from other hosting solutions. Here are some of the best practices and technologies that Convesio employs for developing large-scale WordPress websites:

Containerization: Convesio uses a container-based architecture for its hosting platform. Each website is isolated in its own container, which provides greater security and makes it easier to scale resources as needed.
Load Balancing: Convesio's hosting platform includes load balancing capabilities, which distribute traffic across multiple servers. This helps prevent any one server from becoming overwhelmed and improves overall website performance.
Advanced Caching: Convesio uses advanced caching techniques to speed up website performance. They use a combination of object caching, page caching, and CDN caching to ensure that websites load quickly for visitors.
Auto Scaling: Convesio's platform is designed to automatically scale resources up or down based on traffic. This means that large-scale websites can handle sudden traffic surges without any intervention on the part of the website owner.
Continuous Integration/Continuous Deployment (CI/CD): Convesio's platform includes built-in CI/CD capabilities, which allow developers to easily test and deploy code changes to the website. This helps ensure that the website is always up to date-and performing at its best.

When You Should Use Convesio Over Other Hosting Options

While Convesio offers many benefits, there may be better fits for some use cases. For smaller sites with low traffic, shared hosting may be a more economical choice, while dedicated servers may be more suitable for sites with highly specialized needs. However, Convesio is an excellent option for larger areas with complex needs, such as e-commerce sites or those with high levels of traffic.

Pricing

If you're interested in trying Convesio, the company offers a free trial for new customers. With the trial, you can test out Convesio's platform and features for yourself and see if it's the right fit for your WordPress site. To get started, simply visit the Convesio website and sign up for a trial account.

Wrap up

Convesio offers a compelling hosting solution for WordPress sites, with numerous benefits that set it apart from traditional hosting options. Convesio provides an easily scalable, highly reliable, cost-effective hosting solution by leveraging container technology. While it may not be the right fit for every use case, it is an excellent option for more significant sites with complex needs.

An introduction to containerization and Docker

Artem Gontar — Sat, 31 Dec 2022 15:04:06 +0000

Introduction

Containerization is a technology that allows you to package and deploy applications in a self-contained and portable manner. This means that you can easily move your application from one environment to another, such as from your local development machine to a staging or production server, without worrying about dependencies or configuration differences.

One of the most popular tools for containerization is Docker. Docker is an open-source containerization platform that provides an easy way to package and deploy applications as containers. A Docker container is a lightweight, standalone, and executable package that contains everything an application needs to run, including the application code, system tools, libraries, and runtime.

How to start?

To use Docker, you need to install the Docker Engine on your machine. The Docker Engine is a daemon that manages the containers and provides the interface for interacting with Docker. You can install Docker on Windows, macOS, and Linux.

Once you have Docker installed, you can start working with containers. To create a Docker container, you need to create a Dockerfile. A Dockerfile is a text file that contains the instructions for building the container image. The image is a blueprint for the container, and it specifies what the container should contain, such as the operating system, libraries, and application code.

Here's an example of a simple Dockerfile that creates an image for a Node.js application:

FROM node:14-alpine

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 8080

CMD ["npm", "start"]

This Dockerfile starts with the FROM instruction, which specifies the base image for the container. In this case, it's using the node:14-alpine image, which is a minimalistic Node.js image based on the Alpine Linux distribution.

The WORKDIR instruction sets the working directory for the subsequent instructions. The COPY instruction copies the package.json file from the host machine to the /app directory in the container. The RUN instruction runs the npm install command, which installs the dependencies specified in the package.json file. The COPY instruction again copies the application code from the host machine to the /app directory in the container.

The EXPOSE instruction tells Docker that the container listens on the specified port at runtime. In this case, it's listening on port 8080. The CMD instruction specifies the command to run when the container is started. In this case, it's running the npm start command, which starts the application.

To build the image from the Dockerfile, you can use the docker build command:

docker build -t my-node-app .

This command builds the image and gives it the tag my-node-app. The . at the end specifies the context of the build, which is the current directory.

Once the image is built, you can use the docker run command to start a container from the image:

docker run -p 8080:8080 my-node-app

This command starts a container from the my-node-app image and maps the host's port 8080 to the container's port 8080. This means that you can access the application from your host machine at http://localhost:8080.

Docker provides many other useful commands for managing and interacting with containers. For example, you can use the docker ps command to list the running containers:

docker ps

This command will display a list of running containers, along with their ID, image, command, and status.

You can also use the docker stop command to stop a running container:

$ docker stop <CONTAINER_ID>

Replace with the ID of the container that you want to stop.

If you want to remove a container, you can use the docker rm command:

docker rm <CONTAINER_ID>

Again, replace with the ID of the container that you want to remove.

In addition to running individual containers, Docker also provides a way to manage multiple containers as a single unit using Docker Compose. Docker Compose is a tool for defining and running multi-container Docker applications. With Docker Compose, you can define the application's components and their dependencies in a single file, and then start and stop all the containers with a single command.

Here's an example of a docker-compose.yml file for a simple Node.js application with a MongoDB database:

version: '3'
services:
  app:
    build: .
    ports:
      - "8080:8080"
    depends_on:
      - db
  db:
    image: mongo:4.4
    ports:
      - "27017:27017"

This file defines two services: app and db. The app service is built from the current directory, and it depends on the db service. The db service uses the mongo:4.4 image, which is a MongoDB image.

To start the containers, you can use the docker-compose up command:

docker-compose up

This command will build the app image, start the db and app containers, and display their logs in the console.

To stop the containers, you can use the docker-compose down command:

docker-compose down

This command will stop the containers and remove them.

Summary

That's a brief introduction to containerization and Docker. I hope you found it helpful, and I encourage you to try out these examples on your own machine. Containerization and Docker can greatly simplify the process of developing, testing, and deploying applications, and they are widely used in the software industry.

About author

Artsiom Hontar is a software engineer, AWS solution architect, and Kubernetes admin certified. Hosting a blog about software engineering and related stuff.

Karpenter: Tool for Autoscaling Kubernetes Clusters

Artem Gontar — Thu, 29 Dec 2022 15:25:23 +0000

Kubernetes has become the de facto standard for container orchestration, but one of the challenges of running a Kubernetes cluster is ensuring that it is properly scaled to meet the demands of your workloads. This is where Karpenter comes in.

General Information

Karpenter is an open-source tool that automatically scales your Kubernetes cluster to meet the demands of your workloads. It works by monitoring the resource usage of your cluster and adding or removing nodes as needed to ensure that your applications have the resources they need to run smoothly.

Karpenter was developed by the team at OpenFaaS, a cloud native functions provider, and is designed to be easy to use and highly configurable. It can be run as a standalone tool or integrated into your existing Kubernetes cluster using the Kubernetes API.

How It Works

Karpenter works by continuously monitoring the resource usage of your Kubernetes cluster and comparing it to the configured resource limits. When the resource usage of a cluster exceeds the limits, Karpenter will automatically add additional nodes to the cluster to meet the increased demand. Similarly, when the resource usage falls below the limits, Karpenter will remove nodes from the cluster to save on resources.

Karpenter uses a variety of metrics to determine the resource usage of your cluster, including CPU and memory usage, as well as custom metrics that you can define. This allows you to fine-tune the autoscaling behavior of your cluster to meet the specific needs of your workloads.

Benefits Compared to Cluster-Autoscaler

One of the main benefits of Karpenter is that it is designed to be highly configurable, which allows you to tailor the autoscaling behavior of your cluster to meet the specific needs of your workloads. This is in contrast to the cluster-autoscaler, which is a Kubernetes native tool that is more limited in terms of customization.

Another benefit of Karpenter is that it is designed to work with a wide range of cloud providers, including AWS, GCP, and Azure. This makes it a good choice for organizations that use multiple cloud providers or that want the flexibility to switch between providers.

Finally, Karpenter is an open-source tool, which means that it is continuously being improved and updated by a community of developers. This can make it a more reliable and up-to-date solution compared to proprietary autoscaling tools.

How to Install Karpenter

Installing Karpenter is easy and can be done using a variety of methods. Here are a few options:

Option 1: Install Using Helm

The easiest way to install Karpenter is using Helm, a package manager for Kubernetes. To install Karpenter using Helm, you will need to have Helm installed on your machine. If you don’t already have Helm installed, you can follow the installation instructions on the Helm website.

Once you have Helm installed, you can install Karpenter by running the following command:

helm install karpenter openfaas/karpenter

This will install Karpenter into your Kubernetes cluster and create all the necessary resources, including a Deployment and a Service.

Option 2: Install Manually Using YAML Files

If you prefer to install Karpenter manually, you can use the provided YAML files to create the necessary resources in your Kubernetes cluster. To do this, you will need to have the kubectl command-line tool installed on your machine. If you don’t already have kubectl installed, you can follow the installation instructions on the Kubernetes website.

Once you have kubectl installed, you can use the following command to create the Karpenter Deployment and Service:

kubectl apply -f https://raw.githubusercontent.com/openfaas/karpenter/main/yaml/karpenter.yaml

This will create a Deployment and a Service for Karpenter in your cluster.

Option 3: Install Using Docker

If you prefer to run Karpenter as a standalone tool, you can install it using Docker. To do this, you will need to have Docker installed on your machine. If you don’t already have Docker installed, you can follow the installation instructions on the Docker website.

Once you have Docker installed, you can pull the Karpenter image from Docker Hub using the following command:

docker pull openfaas/karpenter

Then, you can run the Karpenter container using the following command:

docker run -d --name karpenter openfaas/karpenter

This will run Karpenter as a daemon in a Docker container.

Conclusion

Karpenter is a powerful and flexible tool for autoscaling your Kubernetes cluster to meet the demands of your workloads. Whether you want to run it as a standalone tool or integrate it into your existing cluster, Karpenter offers a range of installation options to suit your needs. Give it a try and see how it can help you optimize the performance and resource utilization of your Kubernetes cluster.

About author

Artsiom Hontar is a software engineer, AWS solution architect and Kubernetes admin certified. Hosting blog about software engineering and related stuff.