This is an Expo project built for a live demo on how to go from idea to MVP quickly using React Native, Firebase, and a Movies API.
-
Install dependencies
npm install
-
Start the app
npx expo start
In the output, you'll find options to open the app in a:
- development build
- Android emulator
- iOS simulator
- Expo Go, a limited sandbox for trying out app development with Expo
- Multimedia Feed: Create posts with optional images or videos.
- Interactive Map: Tag posts with location and view global activity on an interactive Google Map.
- Social Graph: Follow/unfollow users and see a personalized feed of their activity.
- Deep User Profiles: View detailed user profiles including their post history, bio, and social stats.
- Movie Discovery: Search and explore movies using the OMDb API, now integrated as a primary tab.
- Real-time Updates: Live updates for likes, comments, and profile changes using Firestore onSnapshot.
- Cloud Storage: Seamless media handling via Firebase Storage.
- AI Integration: Dedicated AI tab for enhanced user interactions.
- Modern Navigation: Built with Expo Router for file-based routing.
app/
├── (tabs)/ # Main tab-based navigation (Feed, Map, Search, Movies, etc.)
├── auth/ # Authentication flow (Login, Signup)
├── user/ # Dedicated user profile views
├── post/ # Detailed post and comment views
└── movie/ # Movie detail views
services/ # Business logic and Firebase integrations (Auth, Firestore, Storage)
components/ # Reusable UI components and theme-aware elements
store/ # Redux state management (Auth)
hooks/ # Custom React hooks (Redux, Color Scheme)- Create a Firebase project in the Firebase Console.
- Enable Email/Password Authentication, Cloud Firestore, and Firebase Storage.
- Configure your credentials in services/firebase.ts.
- Home Feed: The central social hub where users create and view multimedia posts. Features real-time liking, commenting, and location tagging.
- Interactive Map: A Google Maps powered view showing the user's location and nearby post activity. Markers link directly to post details.
- Search: A dedicated screen for discovering other users. Supports prefix-based searching and direct navigation to user profiles.
- Movies Explorer: Integrated OMDb search engine to explore cinema data, browse posters, and view ratings.
- AI Assistant: A dedicated space for AI-driven features and user interactions.
- Task List: A personal productivity tracker with category filtering and image attachments for tasks.
- Profile Settings: View account statistics, manage your public bio, and handle application logout.
- User Profile Details: A deep-dive view of another user's profile, including their full post history, follower counts, and location.
- Post Details: Focused view of a single post with a real-time comment thread and high-fidelity media playback.
- Movie Details: Comprehensive information for a selected movie, including plot summaries, cast lists, and director info.
- Authentication: Secure entry point for the app, handling Login and Signup flows via Firebase.
- Framework: Expo (React Native)
- Database: Firebase Cloud Firestore
- Storage: Firebase Storage
- Auth: Firebase Authentication
- State Management: Redux Toolkit
- Maps: React Native Maps (Google Maps)
- Media: Expo ImagePicker & Expo AV
- Navigation: Expo Router (File-based)
Example of fetching data from the OMDb API:
const response = await fetch('https://www.omdbapi.com/?apikey=YOUR_KEY&s=batman');
const data = await response.json();
setMovies(data.Search);Display results using a FlatList and navigate to a details screen for more info.
Using React Navigation:
<Stack.Navigator>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>To learn more about developing your project with Expo, look at the following resources:
Join the community of developers building universal apps with Expo:
💡 Built for the talk: From Idea to App: Rapid MVP Development in React Native by Aaron Ramírez Lezama