Activity: Ship Your First App in 60 Minutes

🎯 Activity Objectives

Put your learning into practice by:

• Setting up your complete React Native development environment
• Building and customizing your first mobile app
• Testing your app on a real device
• Sharing your creation with others

🏃‍♂️ Quick Start Challenge (15 minutes)

Challenge One: Environment Setup Race

Time Limit: 10 minutes

1. Install Required Tools:

   bash

   # Install Node.js (if not already installed)
   # Download from nodejs.org
   
   # Install Expo CLI
   npm install -g @expo/cli
   
   # Verify installation
   expo --version
   

2. Expo Account Setup:

   • Create account at expo.dev
   • Install Expo Go app on your phone
   • Log in to both

3. AI Assistant Configuration:

   • Set up Cursor or your preferred AI coding assistant
   • Test code completion with a simple JavaScript snippet

✅ Checkpoint: Share a screenshot of your successful setup!

Challenge 2: First App Creation (5 minutes)

Time Limit: 5 minutes

# Create your app
npx create-expo-app MyFirstApp --template blank
cd MyFirstApp

# Start the development server
npx expo start

✅ Checkpoint: QR code appears and app loads on your phone!

💪 Main Activity: Build "About Me" App (35 minutes)

Part One: Basic Structure (15 minutes)

Replace the contents of App.js with your personalized "About Me" app:

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, ScrollView } from 'react-native';

export default function App() {
  const [showFacts, setShowFacts] = useState(false);

  const funFacts = [
    "I'm learning React Native!",
    "This is my first mobile app",
    "I built this in under 60 minutes",
    // Add your own fun facts here!
  ];

  return (
    <ScrollView style={styles.container}>
      {/* Your code goes here */}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 20,
    paddingTop: 50,
  },
  // Add your styles here
});

Your Mission:

1. Add your name as the main title
2. Include a placeholder for your photo
3. Add a brief bio section
4. Create a button to toggle fun facts

Part 2: Styling Challenge (10 minutes)

Make your app beautiful with:

• Custom colors that reflect your personality
• Rounded corners and shadows
• Proper spacing and typography
• A gradient background (bonus!)

Styling Inspiration:

const styles = StyleSheet.create({
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
    color: '#2c3e50',
  },
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 12,
    padding: 20,
    marginVertical: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
});

Part 3: Interactive Features (10 minutes)

Add these interactive elements:

1. Tap Counter: Count how many times users tap your name
2. Color Theme Toggle: Switch between light and dark themes
3. Random Fact Generator: Show a different fun fact each time

Code Challenge:

const [tapCount, setTapCount] = useState(0);
const [isDarkMode, setIsDarkMode] = useState(false);

const handleNameTap = () => {
  setTapCount(tapCount + 1);
  // Add fun animation or feedback here!
};

🎨 Customization Challenges

Beginner Level:

• Change the app's background color
• Add your favorite emoji to the title
• Include your hometown or current city
• Add a "Contact Me" section with your email

Intermediate Level:

• Add smooth animations when buttons are pressed
• Create a skills section with progress bars
• Implement a simple image carousel
• Add haptic feedback for button presses

Advanced Level:

• Integrate with a weather API to show local weather
• Add a mini-game (like rock-paper-scissors)
• Implement local storage to remember user preferences
• Create custom icons using SVG

📱 Testing & Sharing Challenge (10 minutes)

Device Testing Checklist:

• App loads correctly on your phone
• All buttons respond to touch
• Scrolling works smoothly
• Text is readable on your device
• App doesn't crash when rotating screen

Share Your Creation:

1. Take Screenshots: Capture your app in action
2. Create a Screen Recording: Show the interactive features
3. Share the Expo Link: Let others try your app
4. Write a Mini-Review: What was challenging? What was fun?

🏆 Bonus Challenges

Speed Challenge:

• Can you recreate your app from scratch in under 30 minutes?
• Try building the same app with a completely different design

Feature Challenge:

• Add a "Surprise Me" button that does something unexpected
• Implement a simple quiz about yourself
• Create an animated welcome screen

Code Quality Challenge:

• Break your code into reusable components
• Add helpful comments explaining your logic
• Implement error boundaries for better user experience

📊 Success Metrics

Completed Successfully If:

• ✅ App runs on your physical device
• ✅ Contains at least 3 interactive elements
• ✅ Has custom styling that reflects your personality
• ✅ You can explain how each part of your code works
• ✅ App is responsive and doesn't crash

🤝 Collaboration Ideas

1. Buddy System: Partner with a classmate and review each other's code
2. Feature Swap: Implement a cool feature you saw in someone else's app
3. Design Challenge: Vote on the most creative "About Me" app design
4. Code Review: Share your code and get feedback on improvements

📝 Reflection Questions

1. What surprised you most about React Native development?
2. Which part of the development process felt most natural?
3. What feature would you add next if you had more time?
4. How does building mobile apps compare to web development (if you have experience)?
5. What mobile app idea are you most excited to build next?

🔗 Next Steps

• Save your project to GitHub
• Start thinking about features for your next app
• Explore the Expo documentation
• Join React Native communities for inspiration

Time Investment: 60 minutes total Difficulty Level: Beginner Prerequisites: Basic JavaScript knowledge helpful but not required Tools Needed: Computer, smartphone, internet connection