← Back to web projects
Web Development • Restaurant & Brand

Tracy’s King Crab Shack

Tracy's King Crab Shack
Role
Designer & Developer
Type
Restaurant Website + CMS
Year
2026
Platform
Mobile-first Web
01Overview

Bering Sea bold: a website as loud as the line outside.

Tracy’s King Crab Shack is a Juneau, Alaska institution, with lines of cruise-ship visitors out the door. I rebuilt its website around the brand’s “Bering Sea Bold” attitude, restyled its Shopify store to match, and built an admin CMS so the team can update the menu, hours, reviews and jobs themselves.

The signature piece is the QR Story Portal: a phone-sized, swipe-through story guests open from a QR code while they wait in line: seven full-screen video chapters with dot navigation, sharing and deep links.

DeliverablesWebsite redesign, QR story portal, admin CMS, Shopify theme restyle
ToolsFigma, VS Code, Shopify
StackVite • Tailwind v4 • Firebase • Shopify Liquid
02

Design System

Color

Harbor Light
#B71029Crab Red
#A30021Red Hover
#1A2E3EDeep Navy
#5A6B7BSoft Navy
#C9A878Gold
Neutrals & Accents
#FAF7F2Cream
#EFE6D6Sand
#F5EFE4Mist
#F2C94CBuoy Yellow
#8CB4B0Seafoam

Typography

Epilogue · Headlines
GET MESSY. STAY AUTHENTIC.
Black 900 Black Italic 900
Manrope · Body
The quick brown fox jumps over the lazy dog
Regular 400 Medium 500 Bold 700 ExtraBold 800

Tech Stack

Vite 8
Vanilla ES Modules
Tailwind CSS v4
Firebase
Cloud Functions
Shopify Liquid
Brevo Newsletter
Vercel
03

Key Features

QR Story Portal

Seven snap-scrolling video chapters for guests in line, with dot navigation, deep-link hashes, native sharing, off-screen video pausing and reduced-motion support.

“What Should I Order?”

A four-question picker that scores the menu and recommends the top three dishes, with an offline fallback menu.

Live Menu

Served from Firestore with category pills, four price modes (single, tiers, market price, custom label) and “Crab 101” species pop-ups.

Admin CMS

Owner, admin and editor roles manage the menu, hours, reviews, gallery, job openings, applications and customer stories.

Careers & Crew Area

An open-positions grid with an application form, plus an access-code-gated crew handbook.

Email Capture

Sign-ups are tagged by source and mirrored to the newsletter automatically by a Firestore trigger.

04

Page Architecture

HM
Home
Hero, shack favourites, story teaser, what to expect, location, reviews
MN
Menu
Live menu with categories, price modes and the order picker
ST
Our Story
From a single pot to a Juneau staple
QR
Story Portal
Phone-first scroll story opened from a QR code
CR
Join the Crew
Open positions, application form and crew area
SH
Share
Customer story submissions
AD
Admin
Menu, hours, reviews, gallery, jobs, subscribers and users
05

Screenshots

Click to enlarge

Interested in working together?

Get in Touch →