20L - SMARTFAMPANTRY

System Architecture Diagram

Inspiration

The inspiration behind SmartFamPantry stemmed from common frustrations experienced in many households: the chaotic pantry, forgotten groceries leading to food waste, and the constant "what do we need?" questions among family members. We envisioned a centralised, collaborative platform that simplifies household inventory and grocery planning, ensuring everyone is on the same page and nothing goes to waste. Our main goal is to reduce food wastage.

What it does

SmartFamPantry is a cross-platform mobile application designed to streamline household inventory and grocery management for families. It allows users to:

Create and Join Families: Easily set up a new family hub or join an existing one, bringing all members onto a shared platform.

Manage Shared Inventory: Keep a real-time, digital record of items in their pantry, fridge, or freezer. This helps prevent duplicate purchases and track expiring goods.

Collaborative Grocery Lists: Maintain a shared grocery list that all family members can view and update in real-time. Items can be added directly from the inventory or manually.

Facilitate Communication: Reduce miscommunication and ensure everyone knows what's needed and what's available at home

How we built it

SmartFamPantry was built with a modern, scalable architecture leveraging both frontend and backend technologies:

Frontend (Mobile App): Developed using React Native with Expo. This enabled rapid cross-platform development, allowing the app to be deployed seamlessly to both iOS and Android devices from a single codebase.

Backend (Core Services): We utilised Google Firebase for robust core backend services:

Firebase Authentication: For secure user signup, login, and session management.

Firestore Database: A flexible NoSQL database storing family data, user profiles, shared inventory items, and grocery lists. This provides real-time data synchronisation across all devices.

Backend (Custom API): For specific business logic and integrations (like managing groceries via specific endpoints), we built a custom API using Python FastAPI. This backend interacts with Firestore using the Firebase Admin SDK.

Communication: The frontend communicates with the custom FastAPI backend using Axios for HTTP requests, sending and receiving JSON data.

Deployment & Infrastructure: Google Compute Engine (GCE) VM Instance: A virtual machine in Google Cloud where the backend API is hosted, providing a dedicated and customizable environment.

Challenges we ran into

Developing SmartFamPantry presented several significant challenges:

Firebase Security Rules: Crafting granular and secure Firestore rules was particularly complex. We had to ensure users could only access data relevant to their family, allow family members to see each other's profiles, and critically, enable the creation of new family documents while maintaining strong access control. This required careful use of get() and request.resource.data within the rules.

The seamless synchronisation of the frontend, backend, and database posed numerous hurdles for us and required some gradual learning.

Frontend-Backend Integration (CORS): Ensuring seamless communication between the Expo frontend and the deployed FastAPI backend, including handling Cross-Origin Resource Sharing (CORS) policies, was crucial.

Project Structure Management: Separating the React Native frontend and Python FastAPI backend into distinct project directories while ensuring proper communication and deployment workflows.

Google Cloud VM Backend Deployment Complexity Multi-Phase Setup: The process involved numerous steps: VM instance creation, Python environment setup, code transfer, dependency installation, Nginx configuration as a reverse proxy, SSL certificate setup with Certbot, and finally, robust process management with systemd. Each step had its own specific commands and potential configuration errors.

Firewall Rules: Ensuring the correct ports (8000 for FastAPI, 80 for HTTP, 443 for HTTPS) were open in the Google Cloud firewall was a recurring point to check for connectivity issues.

Expo/EAS Deployment Workflow Transition to eas update: Adapting from the older expo publish command to the modern EAS workflow (eas update), understanding that eas-cli needs to be globally installed and the project needs to be configured with EAS.

Accomplishments that we're proud of

Barcode Scanning: Allow users to add or remove items by scanning barcodes for faster inventory management with API

Shared data collection within families so it remains private and secure.

Functional Collaborative Ecosystem: Successfully implemented a working system where multiple family members can sign up, create or join a family, and collaboratively manage pantry items and grocery lists in real-time.

Robust Backend Deployment: Successfully deployed a custom Python FastAPI backend to a serverless environment (Google Cloud Run), demonstrating proficiency in modern cloud deployment practices.

Secure Data Handling: Implemented secure Firebase Authentication and carefully crafted Firestore Security Rules to protect user and family data, alongside securely handling sensitive Firebase Admin SDK keys.

Cross-Platform Accessibility: Delivered a single app capable of running on both iOS and Android devices, maximising reach and usability.

Effective Debugging & Problem-Solving: Systematically diagnosing and resolving complex issues that span multiple layers, from frontend rendering errors to backend deployment and network connectivity challenges.

Utilising Modern Technologies: Successfully integrating a powerful and relevant tech stack (React Native, Expo, FastAPI, Firestore, Firebase Auth, Google Cloud) demonstrates proficiency in contemporary web and mobile development.

What we learned

This project provided invaluable learning experiences:

Deep Dive into Firebase Security Rules: Gained a much deeper understanding of how to write complex, production-grade security rules for Firestore, especially concerning user roles and multi-user data access patterns.

Cloud-Native Deployment: Learned the intricacies of deploying a containerised application to a serverless platform (Google Cloud Run), including Dockerization, environment variables for secrets, and the gcloud CLI workflow. This highlighted the benefits of serverless over traditional VM management.

Frontend-Backend Communication Best Practices: Reinforced the importance of proper API design, secure communication (HTTPS), and CORS handling for client-server interactions.

Monorepo-like Project Management: Understood the nuances of managing separate frontend and backend projects within a single repository, and their distinct build and deployment processes.

Importance of Environment Variables: Realised the critical role of environment variables for managing configuration and sensitive data across different development and production environments.

Deployment: FastAPI backend on Google Cloud Run, a serverless platform that automatically scales with demand and offers a publicly accessible API endpoint.

What's next for SmartFamPantry

For the future of SmartFamPantry, we envision several enhancements:

Smart Suggestions (Machine Learning Integration): Leveraging the "20ML" in our project name, we plan to integrate machine learning models for features like:

Automated replenishment suggestions: Based on consumption patterns.

Recipe recommendations: Utilising available inventory.

Food Wastage: Track the usage and inventory to give families a rough estimate of how much food they are wasting

Shopping Cart Optimisation: Integrate features like sorting grocery lists by aisle or preferred store.

Community Features: Potentially allow sharing recipes or tips among family members or even a broader community.