Little bit of context

My parents are now owners of a bar inside a pet friendly place called Cachorrodromo. The bar sells beers, hamburguers and sandwiches and they're in need of an app that has their menu and where they could create client's orders with these itens.

And since I'm a web developer I told them that I could do something like that for them.

Here's the list of requirements

• The cashier needs to be able to choose the products and create and order with them.
• It must be possible to choose the same product more than once
• The order price should be clearly visible on the screen
• It must be possible to add a discount above the total price of the order
• The products should be categorized like this
  • Chopp: big or small
  • Skewers: chicken; meat...
• Some products can be customized
  • Hamburguers: additionals like cheese and bacon
  • Sandwich: with mayo...
• Every order should have a number
• It should have two types of visualization: one to create the order and other one that just visualize them
  • To create the order, the cashier will have a tablet in hands
  • To visualize the order list, it will be visible on a mobile

My first steps

Well, so I already have the requirements and can start to visualize what it needs to be done. But I don't have a reference on how it could be done. So, I went to dribble, a particularly good website where you can search for a specific term and find amazing design references for your ideas.

I searched for restaurant's menu and food order apps and other stuff related to that, but in the end, what was the best term for what I was looking for it was Point of sale and with that I created this reference list for my app.

With these references I could visualize better what I can create and where to start from. And most the important thing from that list is that I could create a simple wireframe to take the idea out of my head and put it on document.

Creating a wireframe

There are a lot of tools that enable you to create a good wireframe for your app ideas, like:

• Excalidraw: simple tool and very good to create fast and simple wireframes but I never used too much.
• Miro: very powerful tool that It's suited for a lot of things and one of them being creating wireframes.
• Pen and paper

I've chosen to use Miro since I'm already used to it but going with any other options is also good. The main idea is to get things out of your head and put them somewhere else. And here's my first wireframe for the cashier view of the app.

The idea behind it is that on the left side I have all the food categories created and when the user selects it, it will show the middle section with all the possibilites of that specific category. The right part of it is the order resume.

Right now, it doesn't cover all the app possibilities and use cases but it's a start and I can already see what my next goals are.

Next goals

• Define if I'm going to use Firebase for it and if yes, I will need to draw a simple database schema so I can understand better what kind of challenges I will face
• Start to configure the codebase with login and registration pages
• Make the first version of the app with cashier module working on it

Future

I will continue to write here my path through the making of this project and my process of thinking and coding the things that I'm doing. And I hope that whoever is reading this has found something useful to apply ✌

Thanks for reading it and if you want to see more, follow me on my Twitter