Scaling Social Fashion App to 300+ Beta Users on Mobile

// App.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Provider } from 'react-redux';
import { store } from './store';
 
import FeedScreen from './screens/FeedScreen';
import RacksScreen from './screens/RacksScreen';
import CameraScreen from './screens/CameraScreen';
import CirclesScreen from './screens/CirclesScreen';
import ProfileScreen from './screens/ProfileScreen';
 
const Tab = createBottomTabNavigator();
 
export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={{
            tabBarStyle: {
              backgroundColor: '#000',
              borderTopColor: '#333',
            },
            tabBarActiveTintColor: '#fff',
            tabBarInactiveTintColor: '#666',
            headerShown: false,
          }}
        >
          <Tab.Screen 
            name="Feed" 
            component={FeedScreen}
            options={{
              tabBarIcon: ({ color }) => <HomeIcon color={color} />
            }}
          />
          <Tab.Screen 
            name="Racks" 
            component={RacksScreen}
            options={{
              tabBarIcon: ({ color }) => <RackIcon color={color} />
            }}
          />
          <Tab.Screen 
            name="Post" 
            component={CameraScreen}
            options={{
              tabBarIcon: ({ color }) => <PlusIcon color={color} />
            }}
          />
          <Tab.Screen 
            name="Circles" 
            component={CirclesScreen}
            options={{
              tabBarIcon: ({ color }) => <CircleIcon color={color} />
            }}
          />
          <Tab.Screen 
            name="Profile" 
            component={ProfileScreen}
            options={{
              tabBarIcon: ({ color }) => <ProfileIcon color={color} />
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

// services/imageService.ts
import * as ImageManipulator from 'expo-image-manipulator';
import * as FileSystem from 'expo-file-system';
import axios from 'axios';
 
interface CompressOptions {
  maxWidth: number;
  maxHeight: number;
  quality: number;
}
 
class ImageService {
  /**
   * Compress and upload image
   * 
   * Steps:
   * 1. Resize to max dimensions (1080x1920 for feed)
   * 2. Compress with quality setting
   * 3. Generate thumbnail (320x320)
   * 4. Upload both to S3 via presigned URL
   */
  async uploadOutfitPhoto(uri: string, userId: string): Promise<{
    fullUrl: string;
    thumbnailUrl: string;
    uploadTime: number;
  }> {
    const startTime = Date.now();
 
    try {
      // Step 1: Compress full-size image
      const compressed = await this.compressImage(uri, {
        maxWidth: 1080,
        maxHeight: 1920,
        quality: 0.8
      });
 
      // Step 2: Generate thumbnail
      const thumbnail = await this.generateThumbnail(uri);
 
      // Step 3: Get presigned URLs from backend
      const { fullPresignedUrl, thumbPresignedUrl } = await this.getPresignedUrls(userId);
 
      // Step 4: Upload in parallel
      await Promise.all([
        this.uploadToS3(compressed.uri, fullPresignedUrl),
        this.uploadToS3(thumbnail.uri, thumbPresignedUrl)
      ]);
 
      const uploadTime = Date.now() - startTime;
 
      return {
        fullUrl: fullPresignedUrl.split('?')[0], // Remove query params
        thumbnailUrl: thumbPresignedUrl.split('?')[0],
        uploadTime
      };
    } catch (error) {
      console.error('Image upload failed:', error);
      throw new Error('Failed to upload image');
    }
  }
 
  private async compressImage(
    uri: string,
    options: CompressOptions
  ): Promise<{ uri: string; width: number; height: number }> {
    const manipResult = await ImageManipulator.manipulateAsync(
      uri,
      [
        {
          resize: {
            width: options.maxWidth,
            height: options.maxHeight
          }
        }
      ],
      {
        compress: options.quality,
        format: ImageManipulator.SaveFormat.JPEG
      }
    );
 
    return manipResult;
  }
 
  private async generateThumbnail(uri: string): Promise<{ uri: string }> {
    // Square crop and resize to 320x320 for thumbnails
    const result = await ImageManipulator.manipulateAsync(
      uri,
      [
        {
          resize: {
            width: 320,
            height: 320
          }
        }
      ],
      {
        compress: 0.7,
        format: ImageManipulator.SaveFormat.JPEG
      }
    );
 
    return result;
  }
 
  private async uploadToS3(localUri: string, presignedUrl: string): Promise<void> {
    // Read file as binary
    const fileInfo = await FileSystem.getInfoAsync(localUri);
    
    if (!fileInfo.exists) {
      throw new Error('File does not exist');
    }
 
    // Upload to S3
    const blob = await fetch(localUri).then(r => r.blob());
    
    await axios.put(presignedUrl, blob, {
      headers: {
        'Content-Type': 'image/jpeg'
      }
    });
  }
 
  private async getPresignedUrls(userId: string): Promise<{
    fullPresignedUrl: string;
    thumbPresignedUrl: string;
  }> {
    const response = await axios.post('/api/images/presigned-urls', {
      userId,
      count: 2 // Full + thumbnail
    });
 
    return response.data;
  }
 
  /**
   * Progressive upload with retry logic
   * 
   * For poor network conditions, retry failed uploads
   */
  async uploadWithRetry(
    uri: string,
    userId: string,
    maxRetries: number = 3
  ): Promise<{ fullUrl: string; thumbnailUrl: string }> {
    let attempt = 0;
    let lastError;
 
    while (attempt < maxRetries) {
      try {
        return await this.uploadOutfitPhoto(uri, userId);
      } catch (error) {
        lastError = error;
        attempt++;
        
        if (attempt < maxRetries) {
          // Exponential backoff
          await new Promise(resolve => 
            setTimeout(resolve, Math.pow(2, attempt) * 1000)
          );
        }
      }
    }
 
    throw lastError;
  }
}
 
export default new ImageService();

// screens/FeedScreen.tsx
import React, { useState, useEffect, useCallback } from 'react';
import {
  FlatList,
  RefreshControl,
  ActivityIndicator,
  View,
  Text,
  StyleSheet
} from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
 
import PostCard from '../components/PostCard';
import { fetchFeed, refreshFeed } from '../store/feedSlice';
 
const POSTS_PER_PAGE = 20;
 
interface Post {
  id: string;
  userId: string;
  username: string;
  profilePicture: string;
  imageUrl: string;
  thumbnailUrl: string;
  caption: string;
  likes: number;
  comments: number;
  createdAt: string;
  isLiked: boolean;
}
 
export default function FeedScreen() {
  const dispatch = useDispatch();
  const { posts, loading, hasMore, page } = useSelector(state => state.feed);
  
  const [refreshing, setRefreshing] = useState(false);
 
  useEffect(() => {
    // Initial load
    loadFeed();
  }, []);
 
  const loadFeed = useCallback(async () => {
    try {
      await dispatch(fetchFeed({ page: 0, limit: POSTS_PER_PAGE }));
    } catch (error) {
      console.error('Failed to load feed:', error);
    }
  }, [dispatch]);
 
  const handleRefresh = useCallback(async () => {
    setRefreshing(true);
    try {
      await dispatch(refreshFeed({ limit: POSTS_PER_PAGE }));
    } catch (error) {
      console.error('Failed to refresh:', error);
    } finally {
      setRefreshing(false);
    }
  }, [dispatch]);
 
  const handleLoadMore = useCallback(() => {
    if (!loading && hasMore) {
      dispatch(fetchFeed({ page: page + 1, limit: POSTS_PER_PAGE }));
    }
  }, [loading, hasMore, page, dispatch]);
 
  const renderPost = useCallback(({ item }: { item: Post }) => (
    <PostCard post={item} />
  ), []);
 
  const renderFooter = useCallback(() => {
    if (!loading) return null;
    
    return (
      <View style={styles.footer}>
        <ActivityIndicator size="small" color="#fff" />
      </View>
    );
  }, [loading]);
 
  const renderEmpty = useCallback(() => (
    <View style={styles.empty}>
      <Text style={styles.emptyText}>No posts yet. Start sharing!</Text>
    </View>
  ), []);
 
  return (
    <View style={styles.container}>
      <FlatList
        data={posts}
        renderItem={renderPost}
        keyExtractor={item => item.id}
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.5}
        ListFooterComponent={renderFooter}
        ListEmptyComponent={renderEmpty}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={handleRefresh}
            tintColor="#fff"
          />
        }
        maxToRenderPerBatch={10}
        windowSize={10}
        removeClippedSubviews={true}
        initialNumToRender={10}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  footer: {
    paddingVertical: 20,
    alignItems: 'center',
  },
  empty: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 100,
  },
  emptyText: {
    color: '#666',
    fontSize: 16,
  }
});

// backend/server.ts
import express from 'express';
import mongoose from 'mongoose';
import cors from 'cors';
import helmet from 'helmet';
import rateLimit from 'express-rate-limit';
 
import authRoutes from './routes/auth';
import postRoutes from './routes/posts';
import userRoutes from './routes/users';
import imageRoutes from './routes/images';
 
const app = express();
 
// Middleware
app.use(helmet());
app.use(cors());
app.use(express.json({ limit: '10mb' }));
 
// Rate limiting
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100 // limit each IP to 100 requests per windowMs
});
app.use('/api/', limiter);
 
// Routes
app.use('/api/auth', authRoutes);
app.use('/api/posts', postRoutes);
app.use('/api/users', userRoutes);
app.use('/api/images', imageRoutes);
 
// MongoDB connection
mongoose.connect(process.env.MONGODB_URI!, {
  useNewUrlParser: true,
  useUnifiedTopology: true
})
.then(() => console.log('MongoDB connected'))
.catch(err => console.error('MongoDB connection error:', err));
 
// Start server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

// backend/services/feedService.ts
import { Post } from '../models/Post';
import { User } from '../models/User';
import { Follow } from '../models/Follow';
 
interface FeedOptions {
  userId: string;
  page: number;
  limit: number;
}
 
class FeedService {
  /**
   * Generate personalized feed
   * 
   * Algorithm:
   * 1. Get posts from followed users (70%)
   * 2. Get trending posts from network (20%)
   * 3. Get discover posts (random popular) (10%)
   * 4. Sort by engagement score + recency
   */
  async getFeed(options: FeedOptions): Promise<Post[]> {
    const { userId, page, limit } = options;
 
    // Get user's social graph
    const following = await Follow.find({ followerId: userId }).select('followingId');
    const followingIds = following.map(f => f.followingId);
 
    // Build weighted feed
    const feedPosts: Post[] = [];
 
    // 70% from following
    const followingLimit = Math.floor(limit * 0.7);
    const followingPosts = await this.getFollowingPosts(followingIds, page, followingLimit);
    feedPosts.push(...followingPosts);
 
    // 20% trending from extended network
    const trendingLimit = Math.floor(limit * 0.2);
    const trendingPosts = await this.getTrendingPosts(userId, followingIds, page, trendingLimit);
    feedPosts.push(...trendingPosts);
 
    // 10% discovery
    const discoverLimit = limit - followingPosts.length - trendingPosts.length;
    const discoverPosts = await this.getDiscoverPosts(userId, page, discoverLimit);
    feedPosts.push(...discoverPosts);
 
    // Score and sort
    const scoredPosts = feedPosts.map(post => ({
      ...post.toObject(),
      score: this.calculateEngagementScore(post)
    }));
 
    scoredPosts.sort((a, b) => b.score - a.score);
 
    return scoredPosts.slice(page * limit, (page + 1) * limit);
  }
 
  private async getFollowingPosts(
    followingIds: string[],
    page: number,
    limit: number
  ): Promise<Post[]> {
    return await Post.find({
      userId: { $in: followingIds }
    })
    .sort({ createdAt: -1 })
    .skip(page * limit)
    .limit(limit)
    .populate('userId', 'username profilePicture')
    .lean();
  }
 
  private async getTrendingPosts(
    userId: string,
    followingIds: string[],
    page: number,
    limit: number
  ): Promise<Post[]> {
    // Trending = high engagement in last 24 hours from extended network
    const oneDayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
 
    // Get followers of people you follow (extended network)
    const extendedNetwork = await Follow.find({
      followerId: { $in: followingIds }
    }).select('followingId');
    
    const extendedIds = extendedNetwork.map(f => f.followingId);
 
    return await Post.find({
      userId: { $in: extendedIds, $ne: userId },
      createdAt: { $gte: oneDayAgo }
    })
    .sort({ likes: -1, comments: -1 })
    .limit(limit)
    .populate('userId', 'username profilePicture')
    .lean();
  }
 
  private async getDiscoverPosts(
    userId: string,
    page: number,
    limit: number
  ): Promise<Post[]> {
    // Random popular posts from last week
    const oneWeekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
 
    return await Post.aggregate([
      {
        $match: {
          userId: { $ne: userId },
          createdAt: { $gte: oneWeekAgo },
          likes: { $gte: 10 } // At least 10 likes
        }
      },
      { $sample: { size: limit } }, // Random sample
      {
        $lookup: {
          from: 'users',
          localField: 'userId',
          foreignField: '_id',
          as: 'user'
        }
      },
      { $unwind: '$user' }
    ]);
  }
 
  private calculateEngagementScore(post: any): number {
    const ageHours = (Date.now() - new Date(post.createdAt).getTime()) / (1000 * 60 * 60);
    
    // Decay factor: newer posts get boost
    const decayFactor = Math.exp(-ageHours / 24); // Decay over 24 hours
    
    // Engagement metrics
    const likeScore = post.likes * 1.0;
    const commentScore = post.comments * 2.0; // Comments worth more
    const saveScore = (post.saves || 0) * 3.0; // Saves worth most
    
    const engagementScore = likeScore + commentScore + saveScore;
    
    return engagementScore * decayFactor;
  }
}
 
export default new FeedService();

// backend/models/Post.ts
import mongoose, { Schema, Document } from 'mongoose';
 
export interface IPost extends Document {
  userId: string;
  imageUrl: string;
  thumbnailUrl: string;
  caption: string;
  tags: string[];
  brands: string[];
  category: string;
  likes: number;
  comments: number;
  saves: number;
  shares: number;
  views: number;
  isPublic: boolean;
  createdAt: Date;
  updatedAt: Date;
}
 
const PostSchema = new Schema({
  userId: {
    type: Schema.Types.ObjectId,
    ref: 'User',
    required: true,
    index: true
  },
  imageUrl: {
    type: String,
    required: true
  },
  thumbnailUrl: {
    type: String,
    required: true
  },
  caption: {
    type: String,
    maxlength: 500
  },
  tags: [{
    type: String,
    lowercase: true
  }],
  brands: [{
    type: String
  }],
  category: {
    type: String,
    enum: ['casual', 'formal', 'streetwear', 'athletic', 'vintage', 'other'],
    default: 'other'
  },
  likes: {
    type: Number,
    default: 0,
    index: true
  },
  comments: {
    type: Number,
    default: 0
  },
  saves: {
    type: Number,
    default: 0
  },
  shares: {
    type: Number,
    default: 0
  },
  views: {
    type: Number,
    default: 0
  },
  isPublic: {
    type: Boolean,
    default: true
  }
}, {
  timestamps: true
});
 
// Indexes for performance
PostSchema.index({ createdAt: -1 });
PostSchema.index({ userId: 1, createdAt: -1 });
PostSchema.index({ tags: 1 });
PostSchema.index({ brands: 1 });
 
// Text search index
PostSchema.index({ caption: 'text', tags: 'text' });
 
export const Post = mongoose.model<IPost>('Post', PostSchema);

// backend/services/cacheService.ts
import Redis from 'ioredis';
 
const redis = new Redis(process.env.REDIS_URL);
 
class CacheService {
  /**
   * Cache feed for 5 minutes
   * 
   * Key: `feed:${userId}:${page}`
   * Value: Serialized posts array
   */
  async cacheFeed(userId: string, page: number, posts: any[]): Promise<void> {
    const key = `feed:${userId}:${page}`;
    await redis.setex(key, 300, JSON.stringify(posts)); // 5 min TTL
  }
 
  async getCachedFeed(userId: string, page: number): Promise<any[] | null> {
    const key = `feed:${userId}:${page}`;
    const cached = await redis.get(key);
    
    if (!cached) return null;
    
    return JSON.parse(cached);
  }
 
  async invalidateUserFeed(userId: string): Promise<void> {
    // Invalidate all pages of user's feed
    const keys = await redis.keys(`feed:${userId}:*`);
    if (keys.length > 0) {
      await redis.del(...keys);
    }
  }
 
  /**
   * Cache user profile for 10 minutes
   */
  async cacheUserProfile(userId: string, profile: any): Promise<void> {
    const key = `user:${userId}`;
    await redis.setex(key, 600, JSON.stringify(profile));
  }
 
  async getCachedUserProfile(userId: string): Promise<any | null> {
    const key = `user:${userId}`;
    const cached = await redis.get(key);
    
    if (!cached) return null;
    
    return JSON.parse(cached);
  }
}
 
export default new CacheService();

// Progressive JPEG upload
const uploadProgressively = async (uri: string) => {
  // 1. Upload thumbnail immediately (320x320, ~50KB)
  const thumb = await generateThumbnail(uri);
  await uploadToS3(thumb, 'thumbnail');
  
  // 2. Show post in feed with thumbnail
  await createPost({ thumbnailUrl });
  
  // 3. Upload full image in background
  const full = await compressImage(uri);
  await uploadToS3(full, 'full');
  
  // 4. Update post with full image
  await updatePost({ fullUrl });
};

// Compound index on userId + createdAt
db.posts.createIndex({ userId: 1, createdAt: -1 });
 
// Cache feed results
const feed = await cacheService.getCachedFeed(userId, page);
if (feed) return feed;
 
const freshFeed = await feedService.getFeed(userId, page);
await cacheService.cacheFeed(userId, page, freshFeed);

// Before: 6 steps
// 1. Email/password
// 2. Username
// 3. Profile picture
// 4. Bio
// 5. Interests
// 6. Follow friends
 
// After: 2 steps
// 1. Email/password + username
// 2. Import contacts (optional)
// Rest done lazily in-app

# Train style classification model
from tensorflow import keras
 
model = keras.Sequential([
    keras.layers.Conv2D(32, (3, 3), activation='relu'),
    keras.layers.MaxPooling2D((2, 2)),
    keras.layers.Conv2D(64, (3, 3), activation='relu'),
    keras.layers.MaxPooling2D((2, 2)),
    keras.layers.Flatten(),
    keras.layers.Dense(128, activation='relu'),
    keras.layers.Dense(10, activation='softmax')  # Style categories
])
 
# Recommend similar outfits
similar_outfits = model.predict(user_closet_images)

import { ARView } from 'react-native-arkit';
 
const VirtualTryOn = () => {
  return (
    <ARView>
      <ARClothingModel
        garmentUrl={selectedItem.modelUrl}
        position={userBodyTracking}
      />
    </ARView>
  );
};

// Deep link to brand product page
const handleBuyNow = (postId: string, brandId: string) => {
  const deepLink = `fitcheck://buy/${postId}?brand=${brandId}`;
  
  // Track affiliate conversion
  trackAffiliateClick(postId, brandId);
  
  // Open brand app or website
  Linking.openURL(brandLink);
};

import { LiveStream } from '@stream-io/react-native';
 
const LiveFashionShow = () => {
  return (
    <LiveStream
      streamId={eventId}
      onViewerJoin={handleViewerJoin}
      onComment={handleComment}
      features={['chat', 'reactions', 'polls']}
    />
  );
};