SS Menu

A fast, slick and modern menu app for taking restaurant orders.

Table of contents

• History
• Current Design
• Features
• Caveats
• Why You Should Use It?
• Getting Started
• Building
• Distributing
• Screenshots
• Credits
• Contact

History

This app was originally written in Ionic/Angular for a small cafe in Jalandhar (Punjab, India) called SkewerSpot. It was primarily meant to enforce some kind of a token system to keep track of active orders (and to keep anxious customers in check 😜).

Menu App was only one of a trio of apps, the other two being Orders App (list of open orders; meant for kitchen) and Stats App (sales data; meant for owners). With daily usage, it soon became a quick and reliable way to keep track of sales, which arguably is the favorite metric for most business owners.

The way Menu App stores data in Firebase allows, apart from displaying daily and monthly sales data, to show basic analytics such as:

• top selling items
• hot item categories
• popular combinations of items
• average ticket size
• (and many more mind-blowing actionable insights)

Current Design

Two years later, the original Ionic tooling became old and broken on developer's (my) laptop, making further changes to the app impossible. Fixing the tooling would be too much work. Instead, the developer (I) decided to rewrite the entire app using a newly acquired skill: Flutter.

This new, rewritten app is based on the beautiful designs by Ben Tortorelli on Dribbble:
https://dribbble.com/shots/7039032-Food-Delivery-App

I made some creative liberties, especially with theme colors and app screens. The result is a performant and cute-looking app that works well on old hardware.

Features

• Support for multiple outlets of the same restaurant
• Fast and performant
• Easy to navigate large menus
• Support for inputting detailed customer data
• Ability to add customizable items (variants, addons, syrups, sauces, toppings)
• The convenience of taking orders from a mobile device
• Works well on old devices (tested on HTC One series and Xiaomi Redmi phones)
• Well-documented code

Caveats

As there's good, so there's bad. The app is far from perfect. Here I list down just a few bad things that come to mind:

• Data models can further be improved (yeah, I'm lazy)
• There are a bunch of TODOs waiting to be implemented
• There's a whole bunch of hardcodings (currency unit, menus, outlets, etc.)
• iOS version is missing
• Several parts of UI/UX have rooms for improvement
• No special arrangements for accessibility
• Missing i18n (internationlization) and l10n (localization)
• No automated tests (bummer!)
• No CI/CD

Why You Should Use It?

With all its quirks, is it good enough? Well, let's see some usecases that may fit your particular case.

1. You want a quick and dirty solution for your own or client's restaurant.
2. You want to create a better solution using this one as your base.
3. You want to learn to create Flutter apps with some kind of state management, integration with Firebase, and highly custom UI/UX. This repo's commit history is pretty well-structure for this purpose.

Getting Started

1. Install Flutter (read the official docs). Ensure Android SDK support: let flutter doctor help you with that.
2. Install Flutter/Dart support in your IDE. I use Visual Studio Code.
3. Clone this repo locally.
4. Open the repo directory in your IDE. It should ideally automatically fetch missing dependencies (packages) for you. If not, run the command flutter pub get.
5. Create a new Firebase realtime database. Follow the steps for adding an Android app. Download google-services.json file and add it under android/app folder. (skip the parts about adding Firebase SDK)
6. Run the app (press F5) in Android Simulator (API 28; Google APIs Intel x64 image).
7. Tada! It's up and running.
8. Drop me a line if you face an issue. (contact details below)

Building

flutter build apk

This produces a 'fat' APK (Android app archive with support for lots of CPU architectures). To keep the file size small, create targeted APKs using:

flutter build apk --split-per-abi

Distributing

Once the APK is built, install it on your/client's/friend's Android phone either via adb install or by sharing a download link to your APK.

Screenshots

Credits

• Logo icon made by Freepik from www.flaticon.com
• Design mockup by Ben Tortorelli from Dribbble

Contact

Anurag Bhandari, 2019
✉️ab@anuragbhandari.com