Web app · Case study

How I built El Carot

I made a tarot deck as a side project. People loved it, but they could only read it when I was around. So I turned it into an app, and ended up building it myself.

El Carot web app with the card fan as the hero

Where it started

A deck I always had to carry

A few years ago I made El Carot, a tarot deck built from collages, as a personal project. It has the 22 major arcana, and every one of them is a character people recognize from everyday life. The Fool is Charly. The Chariot is Christopher Columbus. Death is Scarface.

People have a lot of fun with it. Someone pulls a card, sees who is on it, laughs, and then actually reads what it means. But there was one problem: the deck only existed when I had it with me. No deck, no reading.

So I wanted an app. Something anyone could open on their phone to pull a card, without depending on me.

El Carot card 0, El Loco, with Charly
CharlyEl Loco
El Carot card VII, El Carro, with Cristóbal Colón
Cristóbal ColónEl Carro
El Carot card XIII, La Muerte, with Cara Cortada
Cara CortadaLa Muerte
El Carot card XXI, El Mundo, with Chopra
ChopraEl Mundo
  1. Version 1My brother's siteThe cards fly by. You tap, one stays.
  2. Version 2The meaningsWritten with ChatGPT, loaded with Claude.
  3. Version 3CodeYamThe whole app, designed and built by me.

Version 1

My brother – the developer – version

I'm a designer, and I didn't know how to code. So the first version was made by my brother, who is a developer. It was very simple: all the cards flashed past on the screen, really fast, and when you tapped, the deck stopped and showed you one card.

There were no meanings, no text, nothing to read. But it already solved the main thing: people could pull a card without me.

The hard part was changing it. Every time I wanted something different, I had to ask my brother. It took his time and mine, and every small change was a lot of effort.

Version 2

Writing the meanings, and loading them myself

A card without its meaning is only half a reading. So I sat down and wrote a meaning for each of the 22 cards, with ChatGPT helping me shape the texts.

Then came the part I had never done: getting them into the site. This time I did it myself, with a friend sitting next to me showing me how to ask Claude for things. Not writing code, just asking the right questions and checking what came back.

Shout out to Andy Osinski, who sat next to me and showed me how to ask.

That was the first time I changed a website with my own hands. It was small, but it changed how I thought about what I could build.

Version 3

Building the whole thing myself, with CodeYam

A few months later I started using CodeYam, and El Carot was the first project I made with it. I wanted to see if I could build the full app on my own: not just add text to someone else's site, but design and make every screen.

This is the first message I wrote:

The brief

I want a tarot reading web app with our own deck, El Carot. Ask a question, get a message, or pull a card of the day, in Spanish and English.
my first message in CodeYam

Now El Carot is a calm, bilingual tarot app. You can ask a question and get the card that answers it, ask for a message with no question at all, or pull the card of the day. Every card, title and reading exists in Spanish and English, and switching language never loses your reading.

There are no accounts. It is a short ritual that works on your phone, which was the whole point.

How I designed it

I brought my own design. CodeYam kept it.

I always start by sketching in Figma. It gets a little chaotic, but that's part of the process. I took the frames I liked into Claude Design to prototype them and try little animations, and asked it to write a design system file with everything I needed. That file is what I brought to CodeYam.

1

I brought my design system

Colors, two fonts, six components and all 22 cards, in a single file made from my Figma frames.

The El Carot logo in its variants
Logo and labels, set in Maragsa Display
El Carot buttons
Buttons, in Josefin Sans
  • Charcoal#333333
  • Cream#e9d9c7
  • Sage light#afbca7
  • Sage#9aa693
  • Taupe#d5c3b2
  • Ink#353029
  • Red#b2402e
  • Ochre#d4a23a
Fonts

Maragsa Display for titles · Josefin Sans for everything else

Components
  • Button
  • TarotCard
  • StarDivider
  • ArcanaLabel
  • Logo
  • Comment
2

CodeYam built the app on top of it

It turned the handoff into real, tested components and used its exact colors, fonts and spacing on every screen. Nothing was redrawn from scratch.

The tarot card in the design system
Design systemIn the design systemThe tarot card component from the handoff
The tarot card in the app
The appIn the appThe same card on the reading screen
3

And I kept shaping it with screenshots

When I wanted a light version, I pasted a picture of the idea into the chat. CodeYam built the light mode to match, and it remembers your choice.

The light mode idea I pasted
ReferenceWhat I pastedA light, paper-colored version
El Carot home in light mode
Light modeWhat CodeYam builtHome in light mode
El Carot message screen in light mode
Light modeAnd kept itThe deck stays light on every screen

Scenarios

The app, screen by screen

Each scenario is a saved state of the app with its own data. You can open any of them in the editor, and they run again as tests whenever the code changes.

WelcomeCard of the DayQuestionMessageSpanishEnglishLong answerOffline
El Carot on desktop: a question and its answer
DesktopA question and its cardAsk anything and get the card that answers it.
El Carot: Home
HomeThree ways inThe deck fanned out, ready to draw from.
El Carot: Question
QuestionWrite your questionType the question you want answered.
El Carot: Answer
AnswerThe card you drewAnd what it says to you.
El Carot: Message
MessagePick a card, face downChoose one from the deck without looking.
El Carot: Card of the day
Card of the dayOne card for todayWith its date, new every morning.
El Carot: Gallery
GalleryAll 22 arcanaTap any card to read it.

Looking back

Each version needed a little less help

First my brother built it for me. Then a friend sat next to me while I changed it. Then I built the whole app on my own, starting from the design I already had in Figma.

Now, when I don't have the deck with me, I don't need it. Anyone can open elcarot.com and pull a card.

Install CodeYam for free and start building

Try CodeYam in your browser

Free, nothing to install, ready in a few minutes.

Launch in GitHub Codespaces ↗ Needs a free GitHub account
  1. 1Click Create codespace
  2. 2Wait while it sets itself up
  3. 3Open CodeYam when the terminal says it’s ready