Bit-By-Bit Taco Builder

My first tacos in CDMX

Tasty vegan tacos in Mérida

These are actually sopas - fried masa base

Homemade tacos, with a furry friend

Big, fancy tacos in Oaxaca City

Loaded tacos in Holbox

Bit-By-Bit Taco Builder was created as I travelled Mexico, starting from Mexico City and heading south into Oaxaca state, and then up through Chiapas to the Yucatan Peninsula, finally finishing up in Quintana Roo.

I stopped off in 10 cities/towns, and I tried to code in almost each one! There were numerous long bus journeys to make some solid headway (before the nausea kicked in), although one friend had their laptop stolen on one overnight bus so I had to be careful!

Chilled evenings at hostels in communal areas or my own little bed were also ideal places to focus on the repo, but my favourite was definitely the poolside coding, obviously!

On the bus from CDMX to Oaxaca - where it all began

Poolside coding in Puerto Escondido

Many a hostel dorm bed

More poolside debugging in Valladolid

Rooftop views in Holbox

Bit-By-Bit Taco Builder is a Next.js app that supports mobile and desktop.

Built using the atomic design principles and React frontend framework, it has start and end screens that sandwich 6 different layer options. This takes it to 8 separate steps, a nod to the 8-bit design I decided to play around with. I really enjoyed adding a retro game-style colour scheme and gimicky animations to add depth to the graphics using CSS. A special shoutout to Pixel It, a Javascript library that allowed me to pixelate all of the ingredients for each layer.

Each layer step has several ingredient choices, written in both Spanish and English, with information boxes able to be displayed for those local delicacy options which may be unfamiliar to some. At least one option must be selected before the user can proceed, with some layers requiring only one choice and others allowing multiple. I also added a 'none' option in some instances, which, when clicked, deselects any pre-selected boxes and enables the user to continue to the next step.

Towards the end of the project, I realised that a 'back' button would be a great addition for the user journey, so I ensured the logic for this was seamless and still enabled the user to see their previously selected choices.

I really wanted to present the user with their completed taco at the end, complimented by a lime, and the opportunity to go again!

Start screen

One of the layer screens with garnish choices

Information box shown

Finish screen

I am really happy with how this app turned out! I feel that it's intuitive and fun to use, while also teaching the user some basic Spanish and sharing information about local delicacies I came across. Building this also helped me learn some key Spanish food words myself, which is always handy when ordering!

If I had more time, I'd love to animate the taco folding up after completion, and also a lime squeeze, plus the ability to share the created taco would be great too I think. In addition, I would have loved to implement Jest tests for the components.

As always, drop me a message if you spot any bugs, have any improvement ideas, or have any suggestions for future country projects!