SS Menu: A simple orders mgt. app for restaurants

Posted on Leave a comment
SS Menu logo

More than 2 years ago, I created a lightweight point of sale system (POS) for our restaurant in Jalandhar called SkewerSpot (SS). I wrote the thing in under a week (cowboy coding, yodlee yodlee youdoo) in Ionic/Angular. Essentially, it’s a collection of hybrid mobile apps that allows a restaurant to manage orders in real-time via Firebase. The 3 apps in this collection are:

  1. SS Menu — to take orders
  2. SS Orders — to manage orders
  3. SS Stats — to view sales data

Nothing too complicated. The thing has been running quite reliably since 2.5 years. So why the rewrite?

Recently, Dad asked me to change a few things in SS Menu. When I got to working on the changes, I realized that my Ionic tooling had somehow become broken. I just couldn’t create new builds. I left it as is and informed Dad I didn’t have sufficient time to fix things around. But he insisted. So much that I finally decided to just rewrite the entire thing in a more modern mobile SDK — Flutter.

I donned my cowboy hat again and sat down to create the menu app from scratch using a skill I had just recently acquired. I think I was able to spit out a functional version of the app in 4-5 non-contiguous days. Creating in Flutter is such a blissful experience. I loved every bit of it.

Flutter makes it infinitely easy to create 100% custom interfaces inspired by designs at Dribbble. You are never crippled by the difficulty of customizing platform’s underlying UI controls. You are always in the driver’s seat.

— Me, after having created several Flutter apps based on designs at Dribbble

Unlike the last time, I created the app from day 1 with open-sourcing in mind. I also made sure that my git history was readable enough to help others starting in the world of Flutter learn quickly from my development experience.

But due to a lack of time, I had to make certain trade-offs: the code lacks automated tests, i18n, l10n and accessibility options. There’s also no iOS version as of now. What a bummer!

Check out the code and more details about the app on GitHub:

https://github.com/anuragbhd/ss-menu-app

Help me, if you can, take it to the next level by fixing the caveats and implementing TODOs.

Some screenshots to feast your eyes on:

Meetup: Enterprise JavaScript Version 2

Posted on Leave a comment
Enterprise JavaScript Version 2 poster

After 3 long months, we had the second edition of Enterprise JavaScript meetup. The first one was in June. It was an interesting meetup. 40-odd people signed up (RSVP’d) and 10 turned up. That’s a nearly 25% conversion rate. Not bad! Despite the small group size, we had a good time.

Enterprise JavaScript: Building Beautiful Modern UI/UX

In this second edition of our popular NCR meetup, we will learn to build elegant, professional and modern user interfaces and experiences. Do not miss out on the opportunity to hear from and interact with distinguished developers. Learn from real-world experiences of the speakers.

Meetup.com: Enterprise JavaScript – Version 2

Unlike the last time’s conference-style schedule, we had this time only 2 sessions:

Building Enterprise-ready Web Applications With OpenUI5 and Fiori by Nitish Mehta

Creating Beautiful Cross-Platform Apps With Flutter by Anurag Bhandari (me)

A relatively short schedule allowed us to go deeper into our respective topics and entertain more questions from the audience. Talking about the audience, we had a decently diverse group of enthusiasts and learners from undergrads to junior devs to project managers. They were all just lovely. We even had a foreign guest: a nice guy from South Korea 🇰🇷. That means we have international reach now, haha.

As usual, Nitish’s session was well-prepared and touched most aspects of this topic, OpenUI5. I personally learned a lot since (surprisingly) I had never heard of this UI framework before. Too much Bootstrap hypnotism?

As for the Flutter session, it was my first-ever attempt at teaching and evangelizing it in public. I loved doing that as much as I loved coding my showcase app. Oh yeah, it was a mostly hands-on session where we spun up a beautiful Health App in just over 60 mins (including learning Flutter and Dart stuff on the way). The full source code and tutorial of the app is in my GitHub repository.

Okay, I am done blabbering. Here are some pics:

Flutter experiments

Posted on Leave a comment

During my time spent on App Brewery’s Flutter course, I created not one, not two, but 12 (twelve) apps. That’s a bunch! All apps are simple, nothing complicated, except the last 2-3 ones which have slightly complex widget trees. Creating in Flutter is fun, I have said that before. It’s fast and enjoyable. I will continue this journey by creating at least a couple of real-world apps.

Here’s a list of all my Flutter experiments so far:

  • I Am Rich — replica of the eponymous sensation of bygone era; dead simple and 100% static
  • Mi Card — your professional contact card, as an app; another static one
  • Dicee — simulates rolling of 2 dice; introduces state
  • Magic Ball 8 — a magic ball simulator; takes the concept of stateless and stateful widgets further
  • Xylophone — simple app with beautiful sounds; introduces Flutter packages and playing audio
  • Quizzler — a pretty quiz app; introduces modularizing & organizing code
  • Destini — a Bandersnatch-style decision-based game; solidifies OOP concepts
  • BMI Calc — a body mass index calculator; introduces routing and solidifies creating beautiful UIs
  • Clima — a weather app; introduces using network & location APIs and solidifies routing
  • Bitcoin Ticker — displays exchange rates for popular cryptocurrencies; solidifies what we learned with Clima
  • Flash Chat — a real-time chatting app; introduces Firebase as a backend and adding authentication
  • Todoey — a simple TODO app; introduces complex state management using Provider pattern

SelectableText widget and structured error messages in Flutter 1.9

Posted on Leave a comment

Flutter 1.9 is out. As one may guess from this post’s title, my favorite changes are:

  • SelectableText widget
  • Structured error messages (enabled via VS Code or Android Studio settings)

Structured error message support was proposed 8 months ago! I find Flutter’s current approach to displaying error/exception messages are pretty useful as they are. Adding more structure certainly doesn’t hurt. When I started programming more than a decade ago, I had always imagined a future where a developer would not need to leave their IDE to find help in fixing their errors. Now that it’s finally here, I wonder what took it so long 🤔. I think both React and Flutter have done a wonderful job here.

Here’s a short video about what’s new:

The joy of creating in Flutter

Posted on 1 Comment

I am now officially in love with Flutter. What started as a crush has turned into something palpable. For the past 2 weeks, I have been heavily invested in learning Flutter from App Brewery’s bootcamp-style course. If there’s one takeaway from the course, it is this: Flutter+Dart is a lethal combination. I have now come to truly appreciate the ‘promised’ language for frontend and the frontend itself.

I must confess, though. I did not hold the same feelings for Flutter in the beginning. At a couple of meetups, I have called Flutter all sorts of blasphemous things — difficult to learn, highly inconsistent, and a confused approach — all without closely working with it. I, however, assure you that Flutter is none of the above. On the contrary:

  • its composition-over-inheritance approach makes it easy for beginners,
  • its Widget-oriented design makes it consistent, and
  • Dart’s succinct and familiar (JavaScript-like) syntax makes things less confusing

The App Brewery course I mentioned before has been an eye-opener. The course itself is pretty long and exhaustive, but rewarding. Since it’s geared toward absolute beginner programmers, I was able to go through it at 1.5x playback speed and even skipped a few sections. I am currently at 64%, hoping to complete it by the next weekend.

During this time, I customized my VS Code quite a bit to my liking (this post’s featured image), so much so that creating Flutter apps in Code is a far more pleasant experience as compared to officially recommended Android Studio. This, of course, is made possible by the awesome Flutter team who does not want to tie developers to Google’s ecosystem.

If you are curious about the source code of the app seen in this post’s featured image, here’s the GitHub link. It’s an app called BMI Calculator that I created as part of the course. Go ahead and explore my commit history to see how easy Flutter makes creating beautiful-looking mobile apps.