Leveraging AWS Amplify to build a gamified web app that promotes buying low-carbon footprint local food
Hello folks, I’m excited to share with you my project for the #AWSAmplifyHackathon, hosted by Hashnode and AWS Amplify. In this article, I will tell you what inspired me to create this project, what problem it addresses, how I built it, what technologies I used, what features I implemented, what challenges I faced, what I learned, and what are the next steps for the project.
Inspiration
I have always been passionate about supporting local farmers and producers and buying fresh and organic food. I believe that buying local food is not only good for our health but also for our environment and our community. I also want to avoid GMO harms, as GMOs are genetically modified organisms that may have negative impacts on human health and biodiversity. However, I also realized that buying local food is not always easy or convenient. Sometimes, it is hard to find local farms or markets near me or to know the quality and origin of the products. Sometimes, it is also expensive or time-consuming to buy local food.
That’s why I decided to create a web application that connects users with local farmers and producers to buy fresh and organic food with carbon footprint using gamification, where users are rewarded when buying from the lowest carbon footprint farmers. My goal is to make buying local food easier, cheaper, and more fun for both users and farmers.
Problem
The problem that my web application addresses is the lack of access, awareness, and incentives for buying local food. According to a report by the Food and Agriculture Organization of the United Nations, buying local food can have many benefits, such as:
Reducing greenhouse gas emissions by shortening the distance between production and consumption
Preserving biodiversity and agroecological diversity by supporting small-scale and family farming
Enhancing food security and nutrition by providing fresh and diverse food
Strengthening social and economic ties between rural and urban areas by creating jobs and income opportunities
However, despite these benefits, buying local food is not very popular or widespread among consumers. According to a survey by Nielsen, only 28% of global consumers say they buy local food most of the time, while 57% say they buy it occasionally or rarely. Some of the reasons why consumers do not buy local food are:
Lack of availability: Consumers may not know where to find local farms or markets near them, or may not have access to them due to distance or transportation issues
Lack of information: Consumers may not know the quality or origin of the products they buy, or may not trust the labels or claims of the sellers
Lack of affordability: Consumers may perceive local food as more expensive than conventional food, or may not be able to afford it due to their budget constraints
Lack of motivation: Consumers may not value the benefits of buying local food, or may not be interested in changing their habits or preferences
Solution
Web app that connects local farmers to local buyers based on the lowest carbon footprint: https://awsamplify.mavrick.dev/
The solution that my web application provides is a platform that connects users with local farmers and producers to buy fresh and organic food with a carbon footprint using gamification, where users are rewarded when buying from the lowest carbon footprint farmers. My web application aims to solve the problem of buying local food by offering the following features:
Product catalog: Users can browse through a catalog of products offered by local farmers and producers near them. They can filter the products by category, price, rating, or carbon footprint. They can also see the details of each product, such as the name, description, image, price, quantity, location, distance, and carbon footprint.
Delivery service: Users can order products from their favorite farmers and producers and have them delivered to their doorstep. They can choose the delivery time and method that suits them best. They can also track their orders and receive notifications on their status.
Ratings and reviews: Users can rate and review the products they buy from local farmers and producers. They can also see the ratings and reviews of other users. They can also report any issues or problems they encounter with their orders.
Loyalty program: Users can earn points for buying local food from low carbon footprint farmers. They can redeem their points for digital rewards such as discount codes or physical gifts such as reusable bags or water bottles. They can also see their progress and ranking on a leaderboard.
Technologies
The technology that I used to build my web application is AWS Amplify Studio. AWS Amplify Studio is a web-based IDE that lets me visually create full-stack applications using pre-configured UI components and backend resources.
I chose AWS Amplify Studio because it offers many features and services that make building web applications easier and faster. Some of the features and services that I used are:
Authentication: I used AWS Amplify Auth to add authentication to my web application. I used Amazon Cognito as my identity provider and enabled sign-in and sign-up with email and password. I also enabled social sign-in with GitHub and Amazon.
GraphQL API: I used AWS AppSync to create a GraphQL API and database for my web application. I used AWS Amplify Studio to configure my GraphQL schema and resolvers. I also used AWS Amplify libraries to integrate my frontend with my backend.
Storage: I used AWS Amplify Storage to store product images and metadata for my web application. I used Amazon S3 as my storage service and enabled public access to my images. I also used AWS Amplify libraries to upload and download files from my front end.
Analytics: I used AWS Amplify Analytics to measure user satisfaction and feedback for my web application. I used Amazon Pinpoint as my analytics service and enabled event tracking, user segmentation, and campaign management. I also used AWS Amplify libraries to send and receive analytics data from my frontend.
Predictions: I used AWS Amplify Predictions to add AI and ML features to my web application. I used Amazon Rekognition, Amazon Comprehend, and Amazon Personalize as my predictions services and enabled image labeling, product classification, and price prediction. I also used AWS Amplify libraries to invoke predictions from my frontend.
Using AWS Amplify Studio, I was able to create my web application without writing any code or using any language. However, if I wanted to customize or extend my web application beyond the pre-configured UI components and backend resources, I could also edit the code in VS Code or any other code editor of my choice.
Features
The features that I implemented in my web application are:
Product catalog: Users can browse through a catalog of products offered by local farmers and producers near them. They can filter the products by category, price, rating, or carbon footprint. They can also see the details of each product, such as the name, description, image, price, quantity, location, distance, and carbon footprint.
Delivery service: Users can order products from their favorite farmers and producers and have them delivered to their doorstep. They can choose the delivery time and method that suits them best. They can also track their orders and receive notifications on their status.
Ratings and reviews: Users can rate and review the products they buy from local farmers and producers. They can also see the ratings and reviews of other users. They can also report any issues or problems they encounter with their orders.
Loyalty program: Users can earn points for buying local food from low carbon footprint farmers. They can redeem their points for digital rewards such as discount codes or physical gifts such as reusable bags or water bottles. They can also see their progress and ranking on a leaderboard.
Challenges
The challenges that I faced while building my web application are:
Integrating AWS Amplify Studio with VS Code: AWS Amplify Studio exports all UI and infrastructure artifacts as code that I could edit in VS Code or any other code editor of my choice. However, I had some difficulties in integrating AWS Amplify Studio with VS Code. Sometimes, the changes that I made in VS Code were not reflected in AWS Amplify Studio or vice versa. Sometimes, the code that was generated by AWS Amplify Studio was not formatted or structured well. I had to use tools such as Prettier or ESLint to help me format or lint the code.
Calculating carbon footprint: Calculating the carbon footprint of each farmer and product was not an easy task. I had to find a simple formula that takes into account the distance between the farm and the customer, the type of transportation used, and the type of product sold. I also had to find reliable data sources for the emission factors and product factors that are used in the formula.
Learnings
The learnings that I gained from building my web application are:
AWS Amplify Studio is a powerful and easy tool that lets me visually create full-stack applications using pre-configured UI components and backend resources. AWS Amplify Studio offers many features and services that make building web applications easier and faster, such as authentication, GraphQL API, storage, analytics, predictions, etc. AWS Amplify Studio also supports many frontend frameworks such as React, Angular, Vue, etc.
Buying local food is beneficial for our health, environment, and community. Buying local food can reduce greenhouse gas emissions, preserve biodiversity, enhance food security, and strengthen social and economic ties. Buying local food can also support local farmers and producers, who often face challenges such as low income, high costs, and market competition.
Next steps for future versions
The next steps for my web application project are:
Improve the user interface and user experience of my web application. I want to make my web application more attractive, responsive, and intuitive for my users. I want to add more UI components, such as maps, charts, or sliders, to display more information and options for my users. I also want to improve the navigation, layout, and design of my web pages.
Add more features and functionalities to my web application. I want to make my web application more useful, engaging, and fun for my users. I want to add more features, such as live search function, map view button, product bookmarking function, recipe function, etc. I also want to add more functionalities, such as social sign-in, in-app messaging, notifications, etc.
Test and debug my web application more thoroughly. I want to make sure that my web application works as expected and meets the quality standards of the hackathon. I want to test and debug my web application more thoroughly using various tools and methods. I also want to fix any bugs or errors that I find in my code or in my deployment.
Conclusion
I hope you enjoyed reading this article about my web application project for the #AWSAmplifyHackathon. I had a lot of fun and learned a lot from building this project with AWS Amplify Studio. I think this project is a great way to showcase my skills and creativity with AWS Amplify.
I would love to hear your feedback and suggestions on my project. You can leave a comment below or contact me on Twitter
Thank you for reading this article and supporting my project. I hope you will join me in supporting local farmers and producers and buying fresh and organic food with carbon footprint using gamification. Happy hacking! 🙌