Spork Box

A full-stack web application built for a catering business in Portland, Oregon to facilitate the supply of box meals to local company employees. One of the significant challenges was to create custom eCommerce features to meet the unique business objectives.

View github repo Visit demo website

Employer:

Tim Taylor

Contributions:

UI and UX designFrontend developmentBackend development

Tools:

Next.jsNodeJSStripeS3 BucketSendGrid

Production URL:

https://www.sporkbox.app

Challenges

This project presented an array of intriguing challenges. One of them was to build a feature that allowed each employee to receive a specific meal reimbursement from their respective companies. This reimbursement had to be tracked meticulously, taking into account how much an employee had used on a given day and shift, how much remained, and any additional expenses they needed to cover personally.

Another complex challenge was to develop features that enabled administrators to schedule a restaurant for multiple shifts across multiple companies. Managing this intricate scheduling system required the creation of a highly efficient data structure. This structure had to facilitate easy identification of which restaurant was scheduled for a particular date, shift, and company.

Solutions

To address the first challenge, I developed a solution to retrieve all the restaurants scheduled for the specific shift an employee was ordering from. I also gathered data on past active orders. With these two pieces of information, I was able to perform calculations to determine the amount of reimbursement an employee had utilized and identify any remaining expenses they needed to cover for a particular order.

For the second challenge, I created a "schedules" schema nested within the "restaurant" schema to effectively keep track of the companies, dates, and shifts for which a restaurant was scheduled. This array of schedules was crucial in creating individual instances of the restaurant, each corresponding to a specific schedule. These instances were then presented in a user-friendly calendar view, allowing employees to easily select their preferred date and shift for orders.

Process

I built this application from the ground up, handling every aspect of its creation. This included the design of the user interface and the user experience, the development of the front end and back end, as well as the design of the database. In crafting the user interface and experience, I drew inspiration from various open-source resources, with the key objective of providing users with an effortless, seamless, and enjoyable experience.

The development process was organized into smaller, manageable sprints. Before each sprint, I engaged in client meetings to thoroughly discuss and comprehend the specific features they needed. To manage these sprints and facilitate feature development and bug tracking, we used Asana as our project management tool.

In terms of the technology stack, I selected TypeScript as the programming language, NextJS as the frontend framework, ExpressJS as the backend framework, and MongoDB as the database. To enhance maintainability and streamline development, I divided the entire application into smaller, reusable components.

Depending on the nature of the features in a given sprint, I followed different development sequences. For instance, I sometimes started working on a feature by building the user interface first and then the API, while in other instances, I reversed this order. I used an excellent VS Code extension called Thunder Client for API testing.

Finally, I integrated and rigorously tested the user interfaces with their respective APIs. Upon successful testing, I delivered the new features to the client for them to test further. Any identified bugs were promptly addressed, and once everything was functioning as expected, the features were rolled out to production.