Swag Designer

Built 2017 · Status Retired · Stack Laravel 5.4, PHP 5.6, MySQL, p5.js, Intervention Image, Zazzle API

Swag Designer was a custom T-shirt generator. Someone picked a starter phrase, edited the text, and watched the design redraw on the product in the browser as they typed, then sent the finished design to Zazzle, which prints and ships customized items. I built it as the final project for my first semester at Harvard.

Purpose

The assignment set the shape of it: demonstrate all four CRUD operations, use at least two primary tables joined by a pivot table, validate the forms, and ship working migrations and seeders. I picked a T-shirt generator because it gave those requirements something real to sit in, and because it let me practice the part I actually wanted to learn, a front end that redrew continuously as the text was edited instead of on page load.

The product idea behind it was a Zazzle affiliate site. Zazzle prints and ships customized items with your own text or images, so the split was clean: my site handled the designing, and the finished text went to Zazzle for printing, payment, and shipping, with the affiliate link crediting the referral to me.

What it did

The data model carried a lot of the weight. A design was an "idea": it started from a reusable phrase, it belonged to the user who made it, and it carried tags. The phrase and the user were foreign keys on the ideas table, and the tags were a real many-to-many joined through an idea_tag pivot table, synced from a checkbox list on the design form. All of it was defined in Laravel migrations with seeders for sample data, so the schema and a working dataset could be rebuilt from an empty database in one command. Views were Blade templates, the create, read, update, and delete paths ran through Eloquent models rather than through ad hoc queries, and every design route sat behind Laravel's authentication middleware.

The front end was the other half of the exercise. The home page listed the enabled phrases as thumbnails. Picking one opened an editor whose text fields were generated to match that phrase, one to three lines depending on the layout, and every keystroke redrew a p5.js canvas that laid the text over a product mockup in a font loaded into the sketch. The mockups covered a t-shirt, a mug, and a pin button. jQuery wired the controls around the canvas, so what a user was looking at was the design itself and not a form that promised a design later.

Saving serialized the canvas to a base64 data URL and posted it to a Laravel route, which decoded it, wrote the image to disk, and generated a 200 by 200 pixel thumbnail with the Intervention Image library. Deleting a design detached its tags and removed both files.

The Buy Now button was the handoff. It assembled a Zazzle Create-a-Product URL from my affiliate ID, the product ID matching the chosen template, and the user's own lines of text, then opened the pre-filled Zazzle page in a new tab.

Features

Live preview, the design redrawn on a p5.js canvas every time the text changed, with no page reload.
Phrase templates, starter designs of one to three lines that set the layout and how many fields were editable.
Saved designs, create, read, update, and delete on a logged-in user's own designs, each one linked back to the phrase it started from.
Tagging, tags attached to a design through a pivot table and edited as checkboxes on the design form.
Server-side image handling, the canvas posted as base64, decoded, written to disk, and thumbnailed with Intervention Image.
Zazzle handoff, a Buy Now button that built a Zazzle Create-a-Product URL carrying the design text, the product ID for the chosen template, and my affiliate ID.
User accounts, Laravel authentication with saved designs that persisted between sessions.

Impact

It was coursework and it stayed coursework. It was built for one class, it never ran as a public storefront, and there are no sales or usage figures to quote. The lasting effect was on me rather than on anyone else: the Laravel patterns I worked out here are the ones I reached for in most of what I built over the next few years, including migrations, seeders, pivot tables, Blade templates, and Laravel's authentication scaffolding.