Burger Tech | Restaurant Management Web Application

GIF
Point of Sale App
GIF
Customer Ordering App
GIF
QR Payment Feature
GIF
Stripe Payment Integration
qr codes to order. 1-6 starting from the left

Inspiration

Our team often goes out of school to eat during lunch. However, we always tend to realize that existing systems that many of the restaurants use were not user-friendly and digitalized to allow customers to interact with. Most of the time, the interfaces are just filled with text and there are no images used. This could be wordy and the person who uses the POS system might not feel very comfortable using it and sometimes they might press the button wrongly. Hence, this inspired us to come up with a POS system that not only looks good but still has the relevant functionalities to operate. Apart from that, we decided to work on a POS system as we felt that it would be slightly challenging given that we could expand the scope of the project if we wanted and there were many features which could be implemented such as the ordering system, staff management, sales dashboard, and even a loyalty program. This allows us to completely cover both customers' and employees' points of view when using our system.

How we built it

Built as a PERN Stack

Postgresql Database
Express backend
ReactJS Framework
NodeJS environment

Challenges we ran into

Titus

I guess one of the key challenges faced throughout this project was the integration of our code.This was one of the biggest mistakes we made for CA1 where we always committed to the main branch immediately which resulted in us facing many errors and clashes in terms of files and codes. Taking that into account for CA2, our team decided to create multiple branches by features which resulted in a more organized integration with minimal clashes.

Lincoln

One of the key challenges is that I have trouble trying to read my code sometimes due to the spacing as well as the linting between the codes. However, after installing ESlint as an extension, I am able to find out where my spacing and linting errors were which in turn helped me to improve the code quality. Therefore I learned that there are a lot of libraries out there that can help me in various situations such as code quality.

Hagen

The main challenge I encountered during CA2 was that when writing functions in React and JavaScript I realized that they were not very reusable and efficient hence I had to keep rewriting code and it made my codebase very long and redundant in CA1, with the help of my teammates and some self-directed learning on YouTube I manage to make my code more reusable and efficient and discover the power of React in CA2, hence with that new knowledge I am able to apply this by passing data into child components and using that data to dynamically query the database through props. Moving forward I would like to explore more react concepts such as Redux and ContextAPI for my next project.

Yee Chen

One of the key challenges I faced in CA2 was creating the in-app game. It was something like the T-rex Game which was built into Google Chrome. Inside the game, I suppose to allow the block to move from right to left at a certain period of time and pace in order to let the game continue. Besides, I would also need to estimate the timing for the object to move upwards to avoid hitting the block and the user will be losing the game. So, I went online to research and test it out myself. The process of creating this game required tests and errors in order to get the perfect timing and distance for the object and the block. After testing it out for times and online research, I was able to come out with a smooth in-app game.

Bryan

The main challenge I faced when doing my CA2 was utilizing React hooks. Being a relatively new language that I had only picked up recently, I found myself mainly using functions and variables due to the familiarity and experience that I have with JavaScript. However, I tried to focus on only using the hooks provided to make accessing and manipulating data and functions a lot easier. The state property “useState” was a hook I did not have a firm understanding of in the beginning but after learning and testing out the various ways of implementing this hook, I have become significantly more comfortable with using it in my code.

Accomplishments that we're proud of

Fuzzy Search Functionality
Stripe Payment Integration
Membership Functionality
Advertisement Algorithm

What we learned

We learnt to utilise the knowledge we had accumulated in Software Engineering Practice (SEP) during the initial planning stage as well as when we were making adjustments to the flow of our application and database design. One prominent skill we used was the implementation of the sequence diagram to understand and visualise how our system communicates with one another. The sequence diagram also puts into perspective possible use cases we could have missed if we were to just verbalise our ideas to one another as we did in CA1. Besides, our team did also hold weekly meetings in order to keep track of the progress of our assignment. It gives our team a chance to hold everyone else accountable for their part of the team effort by setting goals and pushing each other to reach them. Having a weekly meeting also helped our team members to have a clear idea what to do in the coming week and fix the bugs that we were having at that time. Our team members also helped each other whenever any of us faced issues when doing the assignment. This allows us to understand that each of the team members play a crucial role in developing the assignment as we all know that our system might not be working if someone’s part is missing and this is why teamwork is extremely important in this case.