CodeGuide Expo Firebase Starter

A modern cross-platform mobile application starter template built with Expo and Firebase, featuring authentication and real-time database integration.

Tech Stack

• Framework: Expo (SDK 52)
• Authentication: Firebase Authentication
• Database: Firebase
• Navigation: Expo Router
• UI Components: React Native with Expo's built-in components
• Icons: @expo/vector-icons
• Animations: React Native Reanimated

Prerequisites

Before you begin, ensure you have the following:

• Node.js 18+ installed
• Expo CLI installed globally
• A Firebase project for authentication and backend services
• Generated project documents from CodeGuide for best development experience
• (Optional) Expo Go app installed on your mobile device

Getting Started

1. Clone the repository

   git clone <repository-url>
   cd codeguide-expo-firebase

2. Install dependencies

   npm install

3. Environment Variables Setup

   • Copy the .env.example file to .env:

     cp .env.example .env

   • Fill in the environment variables in .env (see Configuration section below)

4. Start the development server

   npx expo start

5. Run the app:

   • Scan the QR code with Expo Go (Android)
   • Scan the QR code with Camera app (iOS)
   • Press 'i' for iOS simulator
   • Press 'a' for Android emulator

Configuration

Firebase Setup

1. Go to Firebase Console
2. Create a new project
3. Add an app to your project (iOS and Android)
4. Copy the Firebase configuration object
5. Set up the necessary Firebase services (Authentication, Firestore, etc.)

Environment Variables

Create a .env file in the root directory with the following variables:

# Firebase Configuration
FIREBASE_API_KEY=your_firebase_api_key
FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
FIREBASE_PROJECT_ID=your_firebase_project_id
FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
FIREBASE_APP_ID=your_firebase_app_id

Features

• 🔐 Firebase Authentication
• 📦 Firebase Realtime Database/Firestore
• 📱 Cross-platform (iOS & Android)
• 🎨 Modern UI with native components
• 🚀 File-based routing with Expo Router
• 🔄 Real-time Updates
• 📱 Responsive Design
• 💫 Smooth animations with Reanimated

Project Structure

codeguide-expo-firebase/
├── app/                # Expo Router pages
├── components/         # React Native components
├── constants/         # Constants and configurations
├── hooks/             # Custom hooks
├── assets/            # Static assets
└── documentation/     # Generated documentation from CodeGuide

Documentation Setup

The documentation folder contains all the generated markdown files from CodeGuide:

documentation/
├── project_requirements_document.md
├── app_flow_document.md
├── frontend_guideline_document.md
└── backend_structure_document.md

These documentation files serve as a reference for your project's features and implementation details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Learn More

To learn more about the technologies used in this project:

• Expo Documentation
• Firebase Documentation
• React Native Documentation
• Expo Router Documentation