Overview
This lecture covers step-by-step development of a beginner-friendly, full-stack cross-platform mobile notes app using React Native (with Expo), Supabase for backend, and DeepSeek for AI integration.
Mobile App Development Approaches
- Native development means building separate apps for iOS (Swift) and Android (Kotlin).
- Cross-platform frameworks allow building one app for both iOS and Android.
- Popular cross-platform frameworks include React Native (Meta), Flutter (Google), and Kotlin Multiplatform.
- React Native is recommended for more job opportunities and wider company adoption.
React Native & Expo
- React Native can be used via CLI or through Expo, which simplifies development, preview, and deployment.
- Expo Go app allows real-time testing on both iOS and Android devices without extra setup.
- Using Expo is especially helpful for Windows users who can't easily test on iOS locally.
Tools & Code Editors
- AI code editors like Cursor AI, Wind Surf, or VS Code with extensions (GitHub Copilot, Cody, etc.) assist with coding.
- Cursor AI is recommended for beginners due to its user-friendly interface and AI-powered assistance.
Tech Stack Overview
- Frontend: React Native (using Expo) with Tailwind CSS for UI design.
- Backend: Supabase for database and authentication (alternative: Firebase).
- AI Integration: DeepSeek API for adding AI features (alternatives: OpenAI, Claude).
- All documentation should be linked/tagged in your code editor for AI assistance.
Project Setup Steps
- Install Node.js, then install your chosen AI code editor (Cursor AI recommended).
- Create a new Expo project via terminal, give it a simple lowercase name, and install dependencies.
- Test the empty app on your physical device using the Expo Go app (after signing up at Expo.dev).
- Organize project files, especially
requirements.md to define the app's features and keep AI helpers informed.
Developing and Testing the App
- Use Cursor AI's composer to prompt UI creation and feature implementation.
- Accept AI-generated code suggestions, and handle any errors by pasting error logs back into the AI assistant.
- Run the app using
npm start and test features on both web and mobile devices.
Voice to Text Feature
- Add voice-to-text functionality using the appropriate React Native and Expo permissions.
- Ensure microphone permissions are handled correctly on both Android and iOS.
Backend with Supabase
- Sign up for Supabase, create a new project, and use the free tier for the first project.
- Obtain and add your Supabase project URL and API key to your project’s environment variables.
- Use SQL editor in Supabase to set up the required database tables.
- Integrate Supabase into the app so notes are saved to the backend.
AI Integration with DeepSeek
- Register at DeepSeek.com for an API key (or use alternatives like FireworksAI if DeepSeek is unavailable).
- Add API documentation links in your code editor and configure environment variables for the API key.
- Integrate DeepSeek API to enable AI features in your app.
Building and Publishing the App
- To create builds, log in to Expo.dev, follow Expo’s build documentation, and run specified commands for Android/iOS builds.
- Published builds are shown in your Expo account and can be accessed for distribution.
Key Terms & Definitions
- React Native — A framework for building native apps using JavaScript and React.
- Expo — A toolchain for easier React Native app development and testing.
- Tailwind CSS — A utility-first CSS framework for rapid UI building.
- Supabase — An open-source backend-as-a-service platform.
- DeepSeek — An AI API for adding advanced AI-powered features to applications.
- Cursor AI — An AI-powered code editor, similar to VS Code, optimized for beginners.
Action Items / Next Steps
- Install Node.js and selected AI code editor (e.g., Cursor AI).
- Create and test a new Expo app on your device.
- Set up Supabase account and configure backend tables.
- Obtain and add DeepSeek API key for AI functionality.
- Review Expo documentation for app building and publishing steps.