Complete solution (100% reference)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
A comprehensive creative studio app built with React Native and Expo that allows users to create, edit, and share digital art, photos, and multimedia content.
This project implements the requirements from Project 01: My Creative Studio guidelines, creating a fully functional creative app with advanced features like AI-powered tools, real-time collaboration, and cloud storage integration.
Duration: 4-6 weeks
Difficulty: Intermediate
Technologies: React Native, Expo, AI APIs, Cloud Storage, Real-time Database
Clone the repository
git clone <repository-url>
cd my-creative-studio
Install dependencies
npm install
# or
yarn install
Start the development server
npm start
# or
expo start
Run on device/simulator
i for iOS Simulatora for Android Emulatorsrc/
├── screens/
│ ├── HomeScreen.js # Main dashboard with templates and quick actions
│ ├── CameraScreen.js # Advanced camera with photo/video capture
│ ├── EditorScreen.js # Comprehensive editing tools and filters
│ ├── GalleryScreen.js # Image gallery and management
│ ├── CommunityScreen.js # Social feed and sharing
│ └── ProfileScreen.js # User profile and settings
├── components/ # Reusable UI components
├── utils/ # Helper functions and utilities
└── assets/ # Images, icons, and other assets
// Advanced camera with multiple modes
const CameraScreen = () => {
const [type, setType] = useState(Camera.Constants.Type.back);
const [flashMode, setFlashMode] = useState(Camera.Constants.FlashMode.off);
const [isRecording, setIsRecording] = useState(false);
// Photo capture and video recording
const takePicture = async () => { /* ... */ };
const startRecording = async () => { /* ... */ };
};
// Comprehensive editing tools
const EditorScreen = () => {
const [selectedTool, setSelectedTool] = useState('adjust');
const [adjustments, setAdjustments] = useState({
brightness: 0,
contrast: 1,
saturation: 1,
});
// Apply adjustments using Expo Image Manipulator
const applyAdjustments = async () => { /* ... */ };
};
// Community feed with posts
const CommunityScreen = () => {
const [posts, setPosts] = useState([]);
const [newPostText, setNewPostText] = useState('');
// Create, like, comment, and share posts
const createNewPost = () => { /* ... */ };
const toggleLike = (postId) => { /* ... */ };
};
Create a .env file in the root directory:
# API Keys (for production)
OPENAI_API_KEY=your_openai_api_key
REMOVE_BG_API_KEY=your_remove_bg_api_key
STABILITY_AI_API_KEY=your_stability_ai_api_key
# Firebase Configuration
FIREBASE_API_KEY=your_firebase_api_key
FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_STORAGE_BUCKET=your_project.appspot.com
FIREBASE_MESSAGING_SENDER_ID=your_sender_id
FIREBASE_APP_ID=your_app_id
app.json# Build for Android
expo build:android
# Build for iOS
expo build:ios
# Build for web
expo build:web
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)This project is licensed under the MIT License - see the LICENSE file for details.
For support and questions:
Built with ❤️ using React Native and Expo
🏆 Success Tip: This app demonstrates advanced mobile development skills, AI integration, and creative problem-solving. It's portfolio-ready and showcases real-world app development capabilities!