The summer of 2021 was my first step into the software engineering world with a university software project called FoodStack — a group food-ordering app.
It was about 6 pm and I was staying at my hostel when I got a message on my cluster group chat complaining about the McDonald’s delivery fee. This was when the idea of pooling deliveries struck my mind and I decided to turn this idea into my project with a friend. We called ourselves: Team APPetite 🤓. While working on the project, I picked up valuable software development skills using the numerous resources available online to create an app that solves a problem I was personally affected by.
Here’s a step-by-step guide to developing your own e-commerce app with Flutter and Firebase, including some useful resources to help you on your development journey.
(Note: This is just an educational project for beginners.)
FoodStack’s promotional poster 🍔
A. Proposal
To kick start your software project, you need to conduct some research and make some decisions about your app’s features before you start any coding.
1. Understand the requirements
This stage is quite similar to preparing your startup pitch deck.
-
Narrow down the **target audience **to understand their needs and brainstorm features
-
Research your competitors to learn the logistics of food ordering and the features currently available
Even if you’re building the app just for yourself, doing this will help you understand what novel features you can bring to the table, which can show your future employers how you are capable of working on features that haven’t been implemented before.
2. Write user stories
Put yourself in the user’s shoes and jot down a few stories of what you think users should be able to accomplish with your app. You can refer to the table below for the format and some examples:
Must-have user stories for FoodStack
After you’ve written a few, use them as a guide to pick the features for your app and create a development timeline around them.
Bonus: You can also create a user persona to help you emotionally connect with your target audience.
3. Decide the tech stack
To create an app for both iOS and Android in one go, we picked Flutter as our front-end framework. We managed the backend with Firebase services, mainly because of its ease of use and integration with Flutter, and its wide array of features like authentication, NoSQL database, and cloud functions.
Another popular cross-platform framework you can use is React Native, but we picked Flutter because it was similar to Java, which was our main programming language at university at that time. Whereas React Native is similar to the popular web development framework React.
B. Branding
Two takeaways from this stage include coming up with a brand name and **color scheme **for your app.
is a great resource to generate business names using AI by entering relevant keywords and choosing the randomness and name style.
Results for “food group order” on namelix
For the color scheme, you can use the basics of to come up with the most suitable theme colors for your app.
C. Proof-of-Concept
Milestone 1
For this stage, we had to turn our idea into a working system with a minimal feature such as login.
1. Design wireframes
It is best to start by designing wireframes around the features you have decided on to solidify your idea. Some great wireframing tools you can use include and . I personally prefer Balsamiq because it is specifically made for low-fidelity wireframes — you don’t have to worry about colors or precision at this stage — so Balsamiq lets you focus on what’s important with simple hand-drawn elements.
Our first Balsamiq wireframes!
After creating low-fidelity wireframes, you could also design high-fidelity prototypes that are closer to the real design of your app. However, we decided not to do so because we might have to change the app design later based on user feedback.
2. Setup your environment
If you have no prior experience with Flutter, you can get started with this by Angela Yu to learn how to install Flutter and use the Dart language for development.
When you’re ready to start coding, make sure you so that you can keep a record of changes and make collaboration easier if you’re working in a team.
3. Start with user authentication
Now it’s time to create an integrated backend and frontend. One of the first features you can work on is the** **login feature using Firebase’s authentication services. This by Andy Julow can help you learn the basics of creating user accounts, resetting passwords, and verifying emails. For creating the user interfaces, it’s a good idea to refer to to pick the perfect widgets and design the screens according to your wireframes.
(You can skip this part if your app does not require authentication).
Here’s a short preview of what our app looked like after the first milestone:
D. Minimum Viable Product (MVP)
Milestone 2
To build an MVP for a group food-ordering app, we decided on 3 main features:
-
Starting a new order
-
Joining existing orders
-
Viewing/editing user profiles
Your features may vary depending on the value proposition of your app.
However, for developing these basic features, there are some common things you would have to implement:
1. Firestore CRUD
First, design a NoSQL database schema model suitable for your app. You could work on online websites such as for this. Going through Firebase’s can guide you on how to structure your data.
FoodStack’s NoSQL database schema
After your schema is ready, you can get started with the Create-Read-Update-Delete of data on your app with this (parts 1 and 2).
One of the first things you can try is displaying a list of restaurants on your app. For our case, we used dummy restaurants and food items that we created directly on the Firebase console instead of creating them from within the app since we had not developed an admin app yet.
The same CRUD principles can be applied to carts, orders, payments, and much more.
2. Location services with Google Maps API
Displaying a functional map with Google Maps API 📍
A food-ordering app needs to know the user’s delivery address, so your app needs to have location services. You can integrate the free and reliable service of (Tutorial) for this. Apart from the user’s delivery address, storing the restaurant’s location as well can help you display restaurants in order of distance from the user.
3. Payments with PayPal and Cloud Functions
To make payments in your Flutter app, you can make use of Braintree’s services (owned by PayPal). This by Raja Yogan will teach you how you can make use of Firebase Cloud Functions and the Braintree Payments API to allow payments in Flutter. Using Cloud Functions is a paid feature of Firebase and requires the Blaze plan. To me, it costs about $0.03 per month to run my cloud functions.
Braintree’s Drop-in UI for payments 💳
You could also instead for the payments feature.
E. Extended Features
Milestone 3
For FoodStack, we chose to develop 6 extended features over the MVP to make the app more customer-friendly including:
-
Tracking orders
-
Saving favorite restaurants
-
Rating restaurants
-
Searching and filtering restaurants
-
Placing past orders again
-
Nearby order notifications
Here are some concepts you may need to develop such features:
1. Transactions
allow you to group multiple database operations into one, which can be useful in many situations that require consistency. For example, we can use transactions to for restaurants so that either both the average rating and number of ratings of the restaurant are updated or none are to ensure that calculations are accurate.
2. Searching and Filtering
Finding Pizza Hut 🍕
You can implement searching for restaurants with this simple by 1ManStartup. For sorting/filtering your data, should be helpful. You may have to create some for complex filter queries in your app.
3. Notifications with Firebase Cloud Messaging (FCM)
One special feature FoodStack has is to notify customers when their favorite restaurants are having customers nearby.
To develop this feature, we needed a which was set off by an onCreate of a new Order. For checking the proximity of customers we used . And finally, we needed to implement notifications with FCM for the potential order poolers .
Nearby order notifications on Android using FCM tokens 📲
You can use these resources too if your app has any similar features. However, for notifications to work on iOS, you will need to enroll in the .
4. Software Testing
Testing the code you have written is essential to verify your app’s correctness and functional behavior — and is known as Developer Testing. You can learn a lot about it from this by Flutter Explained.
In contrast, User Testing is where you distribute your product to a few real users to get their feedback and fix issues or improve the app in general before you release it to the public. The easiest way to do this is to for your app and make it available to a few members of the target audience, along with a suitable survey to gather their thoughts.
Bonus: Here’s a of all the videos I had referred to while developing FoodStack. This from my university could also serve you as a useful technical reference.
F. We’re done!
After you’ve developed the necessary features and tested them extensively, your app should be ready for its first release! 🤩
Working on FoodStack helped me learn a lot about UI/UX, programming, marketing, project management and so much more. Although it was challenging, the 3-month long project made me a stronger and more determined developer, motivated to take up more such projects in the future.
If you’re interested, here’s what our app looked like at the end of the project:
I hope the resources I’ve provided are of use to you and you’re determined to start your project. Good luck with your app and stay strong throughout!