Tiny Traditions Engineering Case Study

Behind the Build of a Lightweight E-Commerce Platform

How I designed, built, deployed, and measured a real storefront using HTML, CSS, JavaScript, Git, Netlify, Google Sheets, WhatsApp, and Google Analytics.

Engineering Tiny Traditions

Tiny Traditions is a small e-commerce brand run by kids, focused on handcrafted cultural products. As CTO, I was responsible for building the website from the ground up: the storefront, shopping flow, inventory system, customer communication path, analytics layer, and deployment workflow.

My goal was to build something that felt simple for customers but smart behind the scenes. I wanted the site to load fast, work well on mobile, be easy to update, and support real customer orders without requiring a heavy backend or expensive infrastructure.

I also used AI tools during development, including Claude, Gemini, and GitHub Copilot. Claude was strong for fast coding help and understanding context, Gemini helped with brainstorming and longer conversations, and Copilot was useful inside VS Code because it could suggest code directly while I worked.

HTML5 CSS3 JavaScript Git Netlify Google Sheets WhatsApp Google Analytics

Technical Architecture

Frontend-first build

I used HTML, CSS, and vanilla JavaScript to keep the site fast and easy to maintain. This helped avoid unnecessary framework overhead while still supporting real e-commerce interactions.

Git + Netlify deployment

I used Git for version control and Netlify for hosting. This created a clean workflow where code changes could be tracked, tested, and deployed reliably.

Google Sheets inventory

Google Sheets acted as a lightweight inventory layer. It made product updates easier because stock and product information could be edited without changing website code.

WhatsApp conversion path

WhatsApp was added as a direct communication channel, giving customers a quick way to ask questions, confirm orders, and move from browsing to buying.

Core Features Engineered

Shopping cart system

I built a JavaScript-powered cart that stores product selections and updates dynamically as users shop. The goal was to make the buying flow feel smooth without needing a full backend.

Checkout flow

The checkout experience was designed to be direct and low-friction. Instead of forcing users through a complicated account system, the site moves users toward order completion and communication quickly.

Responsive design

I designed the site mobile-first so it works on phones, tablets, and desktops. Layouts, spacing, images, and content all adjust to keep the experience clean across screen sizes.

Analytics tracking

Google Analytics was added to measure visitors, traffic sources, page views, user engagement, and checkout activity. This turned the website into something I could improve using real data.

Challenges & Solutions

Challenge 01

Building e-commerce features without a traditional backend

A normal e-commerce platform usually depends on a backend server, database, payment system, admin dashboard, and authentication layer. For Tiny Traditions, I wanted to keep the system lightweight and easy to operate, which meant I had to design a shopping experience without relying on a heavy backend architecture.

This created a real engineering problem: the site still needed to remember customer selections, organize product information, support checkout intent, and stay reliable across pages. Without careful planning, the cart could become confusing, product data could become hard to update, and the customer journey could break.

Solution

I solved this by using JavaScript for client-side cart logic and browser storage to preserve selected items during the shopping session. For product and inventory updates, I used Google Sheets as a lightweight inventory system. This gave the business a simple way to update product information while keeping the website fast and inexpensive to run.

Challenge 02

Creating a smooth path from product discovery to customer conversion

A big challenge was making sure visitors did not just browse the site and leave. Since Tiny Traditions sells handcrafted products, customers may want to ask questions, confirm availability, or clarify order details before buying. A normal contact form can feel slow, and account-based checkout can create too much friction for a small store.

I needed the website to feel human, fast, and easy to trust. The conversion path had to be simple enough for customers but structured enough for the business to handle orders clearly.

Solution

I integrated WhatsApp as a direct customer communication channel. This allowed customers to move from interest to conversation quickly. By connecting the shopping experience with a familiar messaging tool, I reduced friction, improved trust, and made the checkout process feel more personal and responsive.

Challenge 03

Keeping inventory easy to update for non-technical users

Product information changes often in a small store. Items can sell out, new designs can be added, and pricing or descriptions may need updates. If every change required editing HTML or JavaScript, the workflow would become slow and risky.

The challenge was creating an inventory process that felt simple for the business side while still being structured enough for the website to use.

Solution

I used Google Sheets as a smart inventory layer. This made the product system easier to manage because updates could happen in a spreadsheet-style interface instead of inside the codebase. It also separated business operations from website development, which made the platform easier to maintain and scale.

Challenge 04

Understanding real user behavior after launch

Launching the site was only the first step. Once people started visiting, I needed to understand what was actually happening: where users came from, which pages they viewed, whether they reached checkout, and how engaged they were.

Without analytics, improving the website would mostly be guessing. I wanted to make decisions based on real behavior instead of only design opinions.

Solution

I added Google Analytics to track visitors, page views, traffic channels, engagement events, and checkout-related activity. This gave me a clear picture of how users interacted with the platform. The analytics data showed which pages were strongest, which channels brought traffic, and where the customer journey could be improved.

Challenge 05

Maintaining performance while adding more systems

Every new feature adds weight. Inventory logic, analytics scripts, customer communication links, cart behavior, and responsive UI can all make a website harder to maintain if they are not organized carefully.

The risk was that the website could become slow, messy, or difficult to debug as more features were added.

Solution

I kept the architecture modular and lightweight. I avoided large frameworks, used native browser features, organized systems by purpose, and relied on Netlify for fast hosting. This allowed the website to grow in functionality while staying fast, readable, and stable.

Analytics: Measuring the Product in the Real World

After launch, Google Analytics helped me evaluate how the website was performing over the last 90 days. These numbers showed that the platform was not just built — it was being used.

Active users 417

People who actively used the website.

New users 416

Almost every active user was a new visitor.

Avg engagement 1m 32s

Users spent meaningful time interacting with the site.

Traffic sources

Direct traffic was the strongest channel, showing that many users reached the brand intentionally.

Top countries

The United States was the largest audience, with international visitors also reaching the site.

Top pages

The homepage and shop page were the strongest discovery points, which is exactly what an e-commerce site needs.

Event activity

Page views, scrolls, and engagement events showed that users were exploring the platform instead of leaving instantly.

Technical Takeaways

Conclusion

Tiny Traditions became more than a website. It became a real product system with storefront design, inventory management, customer communication, analytics, version control, and deployment.

As CTO, I made technical decisions around speed, simplicity, maintainability, and real-world customer behavior. This project strengthened my frontend engineering skills and taught me how to think like both a developer and a product builder.