🍽️ FoodCodex

FoodCodex is a cross-platform mobile app built with Expo (React Native) that lets users discover, save, and create recipes in a clean and intuitive interface.
The app supports Firebase Authentication, local storage through SQLite (with AsyncStorage fallback for web), and TheMealDB API for fetching global recipes.

---

📚 Table of Contents

• 📚 Table of Contents
• 🚀 Live Demo
• 🧩 Features
• 🧠 Architecture Overview
• 📱 Screens Overview
• ⚙️ Installation and Setup
• 🌍 Environment Configuration
• 🌍 Web Export (Optional)
• 🧰 Technologies Used
• 💡 Future Improvements
• 👥 Contributors
• 🪪 License
• 📸 Screenshots
• 🏁 Summary

---

🚀 Live Demo

• 📱 Expo Go App: https://expo.dev/accounts/danypoz86/projects/foodcodex
• 📦 APK Build: https://expo.dev/accounts/danypoz86/projects/foodcodex/builds/ae676918-dd33-47b3-b539-76b5b56f005d
• 🌐 Web App: https://food-codex.netlify.app/
  Note: The web version has partial feature support. Some icons may not display correctly, and certain SQLite-based functionalities had to be adapted to run in the browser environment.

---

🧩 Features

• 🔐 Firebase Authentication – Login and register securely using Firebase.
• 🍳 Discover Recipes – Browse recipes from TheMealDB API by category or random discovery.
• ❤️ Favorites – Save recipes you like locally using SQLite or AsyncStorage.
• ✍️ Add Your Own Recipes – Create and store personal recipes with ingredients, instructions, and images.
• 📋 My Recipes – View, edit, and delete recipes you’ve added.
• 👤 Profile Page – Manage your account and clear all data when needed.
• 🌐 Offline Support – Data persistence with SQLite/AsyncStorage ensures offline use.
• 📱 Cross-platform – Works seamlessly on Android, iOS, and web (Expo web export).

---

🧠 Architecture Overview

Layer	Description
Frontend	React Native with Expo SDK 54
Backend	Firebase (Auth, Firestore, Storage)
Database (local)	SQLite with AsyncStorage fallback for web
API	TheMealDB API for external recipes
Deployment	Expo Go for live preview, EAS for builds, optional Netlify for web export

---

📱 Screens Overview

Screen	Description
SplashScreen	Initial screen with logo and loading animation
LoginScreen	Firebase-based login functionality
RegisterScreen	Create new account via Firebase Auth
DiscoverScreen	Explore recipes from TheMealDB API
RecipeDetailScreen	View full recipe details, including YouTube video if available
AddRecipeScreen	Add your own recipe (stored in SQLite/AsyncStorage)
MyRecipeScreen	Manage your custom recipes
FavoritesScreen	View and remove favorite recipes
ProfileScreen	User info, logout, and delete-all-data option
MainTabs.js	Bottom tab navigation setup (Discover, Favorites, My Recipes, Profile)

---

⚙️ Installation and Setup

1. Clone the repository:

   git clone https://github.com/<your-username>/FoodCodex.git
   cd FoodCodex

2. Install dependencies

   npm install

3. Run the app locally:

   npx expo start

   Scan the QR code with Expo Go (on Android or iOS) to open the app.

---

🌍 Environment Configuration

🧩 Local Development (Web)

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

EXPO_PUBLIC_API_KEY=your_api_key
EXPO_PUBLIC_AUTH_DOMAIN=your_auth_domain
EXPO_PUBLIC_PROJECT_ID=your_project_id
EXPO_PUBLIC_STORAGE_BUCKET=your_storage_bucket
EXPO_PUBLIC_MESSAGING_SENDER_ID=your_messaging_sender_id
EXPO_PUBLIC_APP_ID=your_app_id

📱 Mobile Build (EAS)

When building for Android/iOS with Expo Application Services (EAS), these environment variables must be defined in the EAS project configuration, since the local .env file is not included in remote builds.

You can add them either from the Expo Dashboard under
Project → Environment Variables,
or directly from the CLI using the new syntax:

npx eas env:create --name EXPO_PUBLIC_FIREBASE_API_KEY --value "your_api_key"

⚠️ Without defining these variables in EAS, Firebase will fail to initialize in production builds.

---

🌍 Web Export (Optional)

You can export the web version and host it via Netlify or Vercel:

npx expo export --platform web

---

🧰 Technologies Used

• React Native + Expo SDK 54
• Firebase Authentication & Firestore
• SQLite (for Android/iOS local storage)
• AsyncStorage (for web fallback)
• TheMealDB API (recipe data source)
• EAS Build / EAS Update
• React Navigation
• Expo Image Picker & Vector Icons

---

💡 Future Improvements

• Add cloud sync between Firebase Firestore and local recipes
• Implement push notifications for new recipe updates
• Dark mode theme and improved UI animations

---

👥 Contributors

Name
Daniel Pozzoli
Luka Raivisto
Mika Venäläinen

---

🪪 License

This project is licensed under the MIT License. Feel free to use and modify the code for educational or personal purposes.

---

📸 Screenshots

Create Account	Registration Success	Login Screen

Profile Screen	Delete Account Confirmation	Delete Account Success

Discover Recipes	Favorites Screen	My Recipes Screen

---

🏁 Summary

FoodCodex demonstrates how modern mobile apps can blend API integration, offline persistence, and cross-platform compatibility using a single Expo codebase — making it a complete and educational example of real-world React Native development.