Lesson 5: Building a Prototype

From Concept to Prototype

In this final lesson, we'll bring together everything we've learned to build a complete prototype. We'll use Cursor's AI capabilities to rapidly develop a functional application that demonstrates our concept.

Video Lesson

Finalizing Your App Prototype

Let's dive into the final steps of building our MealSnap app prototype and preparing it for demonstration or production.

Step 1: Polishing the User Interface

A well-designed UI is crucial for user adoption and can make or break your prototype:

Let's enhance our app's appearance using AI assistance:

// Generating a theme with Cursor
import { StyleSheet } from 'react-native';

export const COLORS = {
  primary: '#4361EE',
  secondary: '#3A0CA3',
  accent: '#F72585',
  background: '#F8F9FA',
  card: '#FFFFFF',
  text: '#212529',
  border: '#E9ECEF',
  notification: '#FF4D4F',
  success: '#52C41A',
  warning: '#FAAD14',
  error: '#FF4D4F',
  info: '#1890FF',
};

export const SIZES = {
  base: 8,
  small: 12,
  font: 14,
  medium: 16,
  large: 18,
  extraLarge: 24,
  padding: 16,
  radius: 12,
};

export const SHADOWS = {
  small: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  medium: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  large: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.1,
    shadowRadius: 16,
    elevation: 8,
  },
};

Step 2: Creating a Photo Upload Screen

The core feature of our app is capturing meal photos and analyzing them:

// AddMealScreen.js
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Image, StyleSheet, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { storage, db, auth } from '../services/firebase-config';
import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
import { collection, addDoc, serverTimestamp } from 'firebase/firestore';
import { COLORS, SIZES, SHADOWS } from '../constants/theme';

const AddMealScreen = ({ navigation }) => {
  const [image, setImage] = useState(null);
  const [uploading, setUploading] = useState(false);
  
  const pickImage = async () => {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    
    if (status !== 'granted') {
      Alert.alert('Permission Denied', 'We need camera roll permission to upload meals');
      return;
    }
    
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 0.8,
    });
    
    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };
  
  const takePicture = async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    
    if (status !== 'granted') {
      Alert.alert('Permission Denied', 'We need camera permission to take pictures');
      return;
    }
    
    let result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      aspect: [4, 3],
      quality: 0.8,
    });
    
    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };
  
  const uploadImage = async () => {
    if (!image) {
      Alert.alert('No Image', 'Please select an image first');
      return;
    }
    
    setUploading(true);
    
    try {
      // Implement image upload to Firebase Storage
      // Then analyze with AI Vision model
      // Save result to Firestore
      
      // For now, we'll simulate this with placeholder data
      const mealData = {
        userId: auth.currentUser.uid,
        name: 'Sample Meal',
        calories: 450,
        protein: 25,
        carbs: 50,
        fat: 15,
        date: serverTimestamp(),
        imageUrl: 'https://example.com/placeholder.jpg',
      };
      
      await addDoc(collection(db, 'meals'), mealData);
      
      Alert.alert('Success', 'Meal uploaded and analyzed');
      navigation.navigate('MealsScreen');
    } catch (error) {
      console.error('Error uploading meal:', error);
      Alert.alert('Error', 'Failed to upload meal');
    } finally {
      setUploading(false);
    }
  };
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Add a New Meal</Text>
      
      <View style={styles.imageContainer}>
        {image ? (
          <Image source={{ uri: image }} style={styles.mealImage} />
        ) : (
          <View style={styles.placeholderImage}>
            <Text style={styles.placeholderText}>No image selected</Text>
          </View>
        )}
      </View>
      
      <View style={styles.buttonRow}>
        <TouchableOpacity style={styles.button} onPress={takePicture}>
          <Text style={styles.buttonText}>Take Photo</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={pickImage}>
          <Text style={styles.buttonText}>Select from Gallery</Text>
        </TouchableOpacity>
      </View>
      
      <TouchableOpacity 
        style={[styles.uploadButton, !image && styles.disabledButton]}
        onPress={uploadImage}
        disabled={!image || uploading}
      >
        <Text style={styles.uploadButtonText}>
          {uploading ? 'Analyzing...' : 'Upload and Analyze'}
        </Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  // Styles generated by AI
});

Step 3: Connecting to an AI Vision Model

For a production app, we would connect to a real AI vision model to analyze meal photos. For our prototype, we can simulate this:

// visionService.js
export const analyzeMealImage = async (imageUrl) => {
  try {
    // In a real app, this would call an AI vision API like:
    // const response = await fetch('https://api.vision.ai/analyze', {
    //   method: 'POST',
    //   body: JSON.stringify({ image_url: imageUrl }),
    //   headers: { 'Content-Type': 'application/json' }
    // });
    // const data = await response.json();
    
    // For now, we'll use simulated data
    return {
      name: 'Chicken Salad',
      calories: 350,
      macros: {
        protein: 28,
        carbs: 15,
        fat: 20
      },
      confidence: 0.92
    };
  } catch (error) {
    console.error('Error analyzing image:', error);
    throw error;
  }
};

Step 4: Preparing for Production

Before sharing your app with stakeholders or deploying to production, take these final steps:

1. Clean up unused code and console logs
2. Optimize assets and bundle size
3. Implement error handling and fallbacks
4. Add loading states and user feedback
5. Test on multiple devices

Practice Exercise

User Testing Your Prototype

Once you have a working prototype, it's crucial to get user feedback:

From Prototype to Product

Once your prototype has been validated, you can use Cursor to help transition it into a production-ready application:

Course Summary

Congratulations on completing the AI Developer Productivity Course! Throughout these five lessons, you've learned:

These skills will help you dramatically increase your development productivity and create better applications faster.