Appetite Lover: An entry to Appwrite x Hashnode Hackathon 2023

Team Details

• Kevin Jake Casala

• Sheena Magalong

Description of Project

Appetite Lover is an open-source platform for every food lover out there dedicated to gathering and sharing food feedback and finding the top 10 best food in Metro Manila, Philippines. By creating this, we believe that the feedback provided by the users will not only benefit fellow food enthusiasts but also help restaurant owners, chefs and even a small food cart in their continuous efforts to enhance their offerings and create exceptional eating experiences and of course promote their businesses as well.

Using this platform users will be able to search for a specific location in Metro Manila, Philippines or select from the map to find the Top 10 best food.

Users can provide feedback or recommend the restaurant, cafe or eatery to other food lovers as well.

Each "food spot" - as we call it, listed on the platform will have its dedicated page, showcasing key information such as reviews, menu and location. This page will display aggregated reviews and ratings from users, allowing visitors to gain insights into the overall customer sentiment.

Inspiration for the Application

The idea of the application came up while we are eating at a Ramen restaurant. We have thought of the problem that when you are new to a place you usually find yourself having a hard time finding an eating place. This is where we started to conceptualize a community-based-driven food review application that will showcase the top eating spots in a specific area.

The UI experience is heavily inspired by a recent viral open-source web project in the Philippines: Philippines Travel Level. This site shows a simple map of the Philippines and will just let visitors of the map select a region and mark it once they have been there. Then it will import an image filled with colors of places the visitor has been through. This image can then be shared across all social media platforms.

Our idea is to use the same map but it would take us time in the data-gathering process. This is where we have decided to start small and focus on Metro Manila for now.

Our goal in this project is to provide food enthusiasts with a platform where they can discover and share the top eating spots in specific areas.

Statement of the Problem

In the bustling city of Metro Manila, renowned as the capital of the Philippines. This place offers lots of dining experiences. Most of the time we encounter difficulties and spent a lot of time locating the satisfying best place to eat especially if we are in a hurry or unfamiliar places.

As food lovers like ourselves, we are very particular about the feedback of the customers because we believed that customer reviews are the reflection of the quality of service and food experiences.

Therefore, we come up with the platform "Appetite Lover" as a solution to the problem.

The Solution to the Problem

Introducing the features and functionality of Appetite Lover:

1. Landing Page

   This page is where the user will be able to see the top 10 food spots based on the selected location on the map or in the dropdown list.

2. Food Spot Page

   

   On this page, users can view the photo of the food spot and other details on the tabs below. The like and dislike buttons and review data entered on this page will update the rankings of the food spot on the website.

3. Reviews

   

   On this screen, the users can leave reviews or recommend certain restaurants, cafes or eateries. The user can edit or delete the review it created.

4. Menu

   

   This page will display available menus and its price on the selected restaurant. The user can only be able to add a menu if the user is the creator of the food spot.

5. Location

   

   On this page, the location of the selected food establishment will be shown based on google maps.

6. Add or Edit food Spot

   

   

   Once the user already registered on the website, the user can add food spots, and menus and make a review of that food establishment based on the selected location. The user can also edit or delete a food spot if that user is the one who submitted it on the platform.

7. Search food spot

   

   On this page, a user can search for a food spot that is not listed on the Top 10 lists.

Tech Stack

In this project, Appwrite and Next.js 13 is a new technology for us and we found that it is a good opportunity to learn new stuff while having fun.

Next.js 13 + React

We have already developed some React projects using MERN (MongoDB, Express, React, NodeJS). The React framework we are used to is Vite, but with the increasing popularity of Next.js we also jumped on the bandwagon and tried using it. We also found server-side rendering for a blog site will make it more responsive and have better performance.

Other Frontend packages

• Tailwind CSS - frontend UI styling

• Google Maps API - for the google maps in displaying map location of a food spot

• Yup and Formik - forms validation

• react-hot-toast - library for toast messages

Appwrite

Appwrite provides an easy and faster route to developing the application. Due to our experience in developing applications before using NodeJS. Appwrite does all the backend development jobs for you. All you just need to do is integrate it into your Frontend. At first, we were intimidated by it since we are thinking that we would not be able to do what we usually do on NodeJS. But along the journey we found ourselves having fun while learning it. Of course, comparisons will always be there. In our opinion, if you are to develop an application with a faster turnaround, backend-as-a-service products should be your go-to solution. As for Appwrite, its good documentation and support make it easier to learn. This is reflected in the application as we are using all of Appwrite's services on our application.

Authentication

We used the authentication service to register and log in to our users. We even enabled Google and Facebook sign-in for a seamless register and login process for our users.

Database

This service is used to store reviews, food spots, food menus and other related data to the application. Some database collections have also enabled Document Security option for user-based or role-based creating, updating and deleting of data.

Function

The function service has been used on our application to apply our custom algorithm for computing the ratings and ranking of each food spot. This is done on Appwrite functions to isolate its process into the backend for security and performance optimization purposes.

Storage

We created one bucket for the storage service of Appwrite. This is where the users will store the food spot and food menu images and this is also where the application will get its image resources.

Appwrite CLI

The constant testing of the application needs to have a set of data as this is a data-driven app. This needs us to also repeatedly refresh data on the database and make sure that we are not having a bug on the application due to dirty data. Creating and deleting bulk data can be done in various ways but we have chosen to use Appwrite CLI. We just used the CLI along with the API key generated on our project and used a simple bash script to recreate the database whenever we need to.

Sample code snippet from the script:

# area
appwrite databases createCollection --databaseId "$database" --collectionId "$areaCollection" --name area --permissions "read(\"any\")" 
appwrite databases createStringAttribute --databaseId $database --collectionId $areaCollection --key areaName --size 255 --required true
appwrite databases createStringAttribute --databaseId $database --collectionId $areaCollection --key areaShape --size 5000 --required false
appwrite databases createIndex --databaseId $database --collectionId $areaCollection --key areaName --type 'key' --attributes 'areaName'

if [[ collection -eq 'area' ]]
then
    while IFS=, read -r id areaName areaShape ; do 
        echo "Inserting $areaName"
        trueShape=$(echo $areaShape | sed "s/'//g")
        dataInString=$(jq -n --arg name "$areaName" --arg shape "$trueShape" '{"areaName": $name, "areaShape": $shape}')
        appwrite databases createDocument --databaseId "$database" --collectionId "$areaCollection" --documentId "unique()" --data "$dataInString"
    done < areas.csv
fi

Challenges We Faced

Frontend Challenge

Since Next.js 13 is new to us, we have some challenges in understanding client-side and server-side rendering. Before Next.js we only understand React as a client-side Javascript framework. We have no idea when to use client-side and server-side components. But with a lot of persistence of trial and error and reading the Next.js App documentation and also a little bit of AI we think we have made our best in optimizing our frontend components.

Appwrite Challenge

Appwrite's challenge to us is figuring out what each of its services does. We started first by watching YouTube tutorials and reading sample projects on GitHub.

The learning part of this becomes easier through Appwrite's documentation and Discord support. We usually join office hours to check for updates and also get insights from other Appwrite users. We also utilize the Discord support channel and ask questions there if we experience some blockers and the members and Appwrite team are very responsive even on Weekends! Kudos to the team!

You can join Appwrite's Discord channel here: Appwrite Discord

Public Code Repo

Appetite Lover Github Repository

Demo Link

Disclaimer: Some data of the site came from Google Reviews and Google Maps, and other dummy data on the site were made up ourselves. Reviews and restaurant names are not 100% accurate.

Appetite Lover Demo