Building a Web App


Ordering Lunch Sucks – We Fixed That

Every Friday we gather for a group lunch. Lunch is great, ordering for a large group of people sucks. What do you all want? Where should we order from? Who’s calling it in? That’s not too bad unless half the people want pizza and the other half want falafels. What if we built an app that listed all of the local restaurants and allowed our team to vote on a location and place their order. Ah ha! Perfect time to use our skills to plan, design, and build a web app. Let’s call it GrubGrab!

Treating this as a product we were building for a client, we started our process by asking questions about functional requirements, core features, quality of life features, user interface, and user experience. After getting input from across the team and some ideas of where we could take this in the future, we set out to build the prototype. Starting with the database with things like events, users, votes, restaurants, and orders. Then building out an API using the PHP Slim framework to interact with the database with actions to get events, submit votes, submit orders, etc. Then onto the front end of the application with very basic HTML, CSS, and Javascript for our AJAX to display our options and results and allow the user to submit their vote and orders.

GrubGrab Prototype
GrubGrab web application prototype.

Friday came around and we gave our prototype it’s first test run. Things went well overall, but there was plenty of room for improvement. Over the next couple weeks we fixed bugs, added some features, cleaned up the very basic UI and eventually landed on a prototype that worked and was laid out in an intuitive way. This is when we were ready to start building out the final product from our prototype.

The design was being worked on while development started on making the code more reusable and production ready. Adding in proper authentication, using Javascript templates with Handlebars, setting up proper error handling and logging, and cleaning up the code whenever possible. The beautiful design was ready to implement after some meetings to optimize the balance of function and design. Implementing the design required some updates to markup and a build out of the CSS and finally our app was ready!

GrubGrab production version
Production version of GrubGrab web app

We used this version of GrubGrab for more than a year. It served our purposes well for that time. But like all products, it wasn’t perfect and we slowly gathered our internal feedback over this time about the user experience. Some changes were minor and were implemented right away, others were much larger and we stashed them away for a larger iteration. About this time Javascript frameworks were becoming very big in the industry. It was the perfect time to solve these larger issues while learning and implementing one of these new frameworks.

In the next post, we’ll discuss our process for picking a framework, the hurdles we faced, and finally our success with React.

Join in the Discussion