This project was really valuable to helping me learn how to build a full-stack application using VanillaJS, HTML, and CSS. It was also my first attempt at creating a full-stack web app that had a real back-end that could in theory, scale up to a larger user-base, as opposed to mock backends with limited extensibility.

www.yummybuy.ca (Click on Sloth to Enter)

Key Features:

• SMS auth
• Orders & user management
• Data persistence using Cloud Firestore
• Cross-platform native CMS dashboard
• Inventory management
• Business analytics baked into admin view

Technical Details:

• SMS verification (no email or password required)
• Database: Cloud Firestore & Storage (Spark Plan Tier)
• Landing Page: Made with P5.js
• Loading Animation: Created with Google Veo2 (circa April 2025)

Landing Page

A P5.js animation created with the help of AI. I learned a lot about P5.js while tweaking the foundation generated by AI. For example learning to calculate shapes by accounting for base pixel size and transformations, and pre-configuring each text and number for use in the drawing.

SMS Auth

I explored several options for SMS Auth, including Mailgun, but settled on Firebase SMS Auth as it was more natively integrated with my database. This taught me about authentication flows and how to handle phone number verification in a production environment.

Place Order

The primary challenge here was learning to configure Firebase in my Javascript modules so that I could successfully pass the data from the product order page to my Firestore documents table.

Manage Customer Orders

The order management required some thinking around the schema design, like what data I wanted to track, and how I would pass that and maintain it in the backend.

Manage Product Release Status

This was a feature that I thought would be quite simple, but actually took some work because it required a single trigger that affected several updates in the backend, like product status, and in the frontend, like rendering the filtered array of products.

Add and Delete Products

Similar to the product release feature, adding and deleting products helped me tighten up the logic in several places of my code, exposing bugs that I had not caught before.

Surprisingly, one of the more difficult parts of this was implementing a multi-image "carousel", which really tested my ability to work with Javascript DOM manipulation.

Now that I have a better grasp of React, I'd definitely rewrite all of this to be modular using React components, but at the time of building this app, I actually affected each change by updating innerHTML! (the horror.)