Apply your knowledge to build something amazing!
Design and build a comprehensive creative studio app that empowers users to capture, edit, and organize their digital content. Unlike following step-by-step tutorials, you'll research real user needs, investigate existing solutions, and make architectural decisions to create your own implementation.
Duration: 4 weeks
Difficulty: Intermediate
Focus: Problem-solving and discovery-driven development
Core Challenge: Build 7-screen architecture matching professional creative apps
This project transforms you from a tutorial follower into a solution architect. You'll face the same challenges professional developers encounter: understanding user needs, researching technologies, making trade-offs, and debugging real problems.
Success Metrics:
Creative apps like Instagram, VSCO, and PicsArt serve millions of users daily. Understanding their success requires investigating real user needs rather than copying features blindly.
Your Market Research Challenge:
User Interviews: Interview 3-5 people who use photo editing apps
Competitive Analysis: Deep-dive into 3 creative apps
Technical Landscape: Research mobile development constraints
Problem Statement to Define: Based on your research, articulate the specific problem your app will solve. This isn't "build a creative app" - it's understanding what gap exists and why your approach will address it.
📝 REFERENCE: The complete teacher implementation is available in M1-TemplateSolution-project-01-creative-studio.zip, showing one possible 65-70% solution. Study its architecture and modern SDK 53 patterns, but don't copy its code. Use it to understand the scope and complexity you're aiming for.
Research Question: How do professional apps handle camera integration without sacrificing user experience or device performance?
Your Investigation Tasks:
API Comparison Study
expo-camera vs expo-image-picker vs native camera APIsPermission Flow Design
Cross-Platform Considerations
Deliverable: Architecture Decision Record (ADR) documenting your camera integration approach with rationale.
Research Question: How do you provide responsive image editing on mobile devices with limited processing power?
Your Investigation Tasks:
Processing Library Analysis
User Experience Design
Performance Optimization
Deliverable: Performance testing report comparing different approaches with recommendations.
Research Question: How do people naturally think about organizing and finding their digital creations?
Your Investigation Tasks:
User Behavior Study
Information Architecture Design
Navigation Pattern Analysis
Deliverable: User journey map and information architecture diagram with supporting research.
Research Question: How do you architect a multi-screen app that maintains data consistency and smooth user flow?
Your Investigation Tasks:
State Management Strategy
Navigation Architecture
Error Handling Strategy
Deliverable: Technical architecture document with error handling strategy and data flow diagrams.
Your creative studio app must demonstrate these core capabilities:
7-Screen Architecture:
Technical Standards:
Usability Standards:
Accessibility Considerations:
// Basic project structure to consider
const ProjectStructure = {
screens: {
HomeScreen: 'Navigation and feature overview',
CameraScreen: 'Photo capture functionality',
EditorScreen: 'Image editing capabilities',
GalleryScreen: 'Photo browsing and selection',
AlbumsScreen: 'Collection organization',
ProfileScreen: 'User settings and preferences',
CommunityScreen: 'Sharing and social features'
},
coreLibraries: {
navigation: '@react-navigation/native',
imageHandling: 'expo-image-picker', // Based on sample analysis
imageProcessing: 'expo-image-manipulator',
storage: '@react-native-async-storage/async-storage'
},
dataFlow: {
imageCapture: 'CameraScreen → EditorScreen',
imageEditing: 'EditorScreen → GalleryScreen',
organization: 'GalleryScreen ↔ AlbumsScreen',
sharing: 'Any screen → CommunityScreen'
}
};
### Modern Expo SDK 53 Patterns
**Important API Updates**:
```javascript
// ✅ MODERN (SDK 53+): Use executionEnvironment
import Constants from 'expo-constants';
const isExpoGo = Constants.executionEnvironment === 'storeClient';
// ❌ DEPRECATED (SDK 54+): Old appOwnership API
const isExpoGo = Constants.appOwnership === 'expo'; // Don't use this anymore
Research Question: Why did Expo deprecate appOwnership?
Image Handling Strategy:
// Question to investigate: Why choose image picker over direct camera?
const imageSourceOptions = {
camera: 'Direct camera control with expo-camera (CameraView component)',
picker: 'System image picker with expo-image-picker', // Template choice
hybrid: 'Combination approach based on use case'
};
// Consider: Performance, UX, complexity, platform differences, Expo Go limitations
Modern Permission Handling:
// Research: Hook-based permission patterns (SDK 53)
import { useCameraPermissions, useMediaLibraryPermissions } from 'expo-image-picker';
const permissionStrategy = {
hookBased: 'Modern approach using permission hooks',
asyncBased: 'Traditional approach with requestPermissionsAsync()',
userExperience: 'How to ask for permissions without annoying users?'
};
Data Management Approach:
// Question to investigate: How do you maintain consistency?
const dataArchitecture = {
photos: 'How do you track photo metadata and relationships?',
albums: 'How do photos and albums connect?',
edits: 'How do you handle edit history and versions?',
state: 'How do screens share and update data?'
};
Performance Considerations:
// Question to investigate: How do you optimize for mobile?
const performanceFactors = {
imageSize: 'When and how do you resize images?',
processing: 'How do you handle long-running operations?',
memory: 'How do you prevent memory issues with large images?',
battery: 'How do image operations affect battery usage?'
};
Permission Problems:
// Common issue: Permission request timing
const permissionDebugging = {
issue: 'App crashes when accessing camera',
investigation: [
'Are permissions requested before camera access?',
'Are you using modern hook-based permission APIs?',
'How does app handle permission denial gracefully?',
'What happens on different OS versions (iOS vs Android)?',
'Does your permission flow match platform guidelines?'
],
modernApproach: 'Use useCameraPermissions() and useMediaLibraryPermissions() hooks',
testingStrategy: 'Test on multiple devices, OS versions, and permission states'
};
Navigation Issues:
// Common issue: Navigation state problems
const navigationDebugging = {
issue: 'Screen transitions feel broken or data is lost',
investigation: [
'How is data passed between screens?',
'Are navigation params properly structured?',
'What happens when users use back button?'
],
testingStrategy: 'Test all possible navigation paths'
};
Meeting Expectations (70%):
Exceeding Expectations (85%):
Outstanding Performance (95%):
Student Template (Start Here):
M1-Template-project-01-creative-studio.zip from your course platformcd project-01-creative-studionpm install --legacy-peer-depsnpx expo startTeacher Reference (Optional):
The complete implementation is available in M1-TemplateSolution-project-01-creative-studio.zip. Review this after attempting your own solution to compare approaches and learn modern SDK 53 patterns.
DO NOT DELETE existing template files:
package.json, app.json, or configuration filessrc/navigation/ONLY MODIFY files as needed to implement your features. The template provides a solid foundation-build on it, don't rebuild it.
Technical Documentation (SDK 53):
Research References:
Remember: The goal isn't to build a perfect app, but to demonstrate thoughtful problem-solving, user-centered design, and technical learning. Focus on the process as much as the product.
This project challenges you to think like a professional developer facing real-world constraints and user needs. Success comes from thoughtful research, clear decision-making, and continuous learning - not from perfect code or complete features.