Skip to content

Mobile Application for Grocery Shoppers using React Native, AppSync, GraphQL API.

Notifications You must be signed in to change notification settings

hmisonne/Amplify_GroceryApp

Repository files navigation

ListBee - Grocery List App

This project was made for all the grocery shoppers that needs a tool to organize their shopping list and share it among friends.

🛠 Built with React Native, Expo, GraphQL, AWS Amplify, Amplify DataStore, AWS AppSync

Platform Compatibility

Android iOS
✔️ ✔️
Play Store Listing App Store Listing

Screenshots

Features

  • 👮‍ Authentication
  • 🔥 Serverless back end
  • 🚀 GraphQL
  • 👻 Offline and delta sync capabilities

Architecture Overview

To deploy the backend of this app, I chose to use Amplify.

AWS Amplify is an end-to-end solution that enables mobile and front-end web developers to build and deploy secure, scalable full stack applications, powered by AWS.

With Amplify, I was able to add Authentification to my app with AWS Cognito, build a GraphQL API that interacts with DynamoDB and add DataStore to offer offline synchronization.

Here is an overview of the architecture deployed to allow offline synchronization: Architecture

This architecture allowed me to only interact with the DataStore API using standard JavaScript function invocations.

GraphQL Schema

This app has 3 models Product, GroceryList and User.

  • A user can add to his/her dashboard multiple grocery lists which can be shared among multiple users.
  • After creating a new grocery list, products can be added to a specific list. This is a one-to-many relationship.
type Product @model 
@key(name: "productByGroceryList", fields: ["groceryListID"])
{
  id: ID!
  groceryListID: ID!
  name: String!
  checked: Boolean!
  unit: String!
  quantity: Int!
  category: String!
  toBuy: Boolean
}

type GroceryList @model {
  id: ID!
  name: String!
  description: String
  products: [Product] @connection(keyName: "productByGroceryList", fields: ["id"])
  shoppers: [String]
}

type User @model 
@auth(rules: [{ allow: owner }])
{
  id: ID!
  sub: String!
  username: String
  groceryLists: [String]
}

Deploy the App

Prerequisites

In order to run this app, make sure the following dependencies are installed in your computer:

Deploy the back end

  1. Clone the repo & install the dependencies
~ git clone https://github.com/hmisonne/Amplify_GroceryApp.git
~ cd Amplify_GroceryApp
~ npm install
  1. Initialize the Amplify project

Run the following commands and make sure you have access to an AWS account:

~ amplify init
? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor: <YOUR_EDITOR_OF_CHOICE>
? Do you want to use an AWS profile? Y
  1. Deploy the backend to your AWS account
~ amplify push
? Are you sure you want to continue? Y
? Do you want to generate code for your newly created GraphQL API? N
> We already have the GraphQL code generated for this project, so generating it here is not necessary.

Update the API and models

  1. Update the amplify project
~ amplify update api
~ amplify push
  1. Update the DataStore
~ npm run amplify-modelgen

Run the front end on your local machine

Start the app

~ npm start

Current limitations:

This rule limit which individuals or groups should have access to create, read, update, or delete data on your types by specifying an @auth directive

To allow users to share multiple lists with multiple users, I am using Selective Sync to prevent the DataStore from downloading the entire content of the cloud database and only get a subset of the data by defining a predicate. This predicates, in my case is the list of grocery list id that is stored per user under 'groceryLists'.

Resources