DEV Community: Harry

Submitted my game for the jam. Looking forward to the results 🤞

Harry — Sun, 14 Jun 2026 06:50:03 +0000

June Solstice Game Jam Submission

Harry

Jun 13

Dawn Cipher — A June Solstice Tribute to Alan Turing Featuring Gemini AI

#devchallenge #gamechallenge #gamedev

6 min read

Dawn Cipher — A June Solstice Tribute to Alan Turing Featuring Gemini AI

Harry — Sat, 13 Jun 2026 14:22:29 +0000

This is a submission for the June Solstice Game Jam

What I Built

Dawn Cipher is a browser-based puzzle game where you race against the solstice sun to crack four ciphers — and in doing so, uncover a story hidden in plain sight.

It is June 21st. The longest day of the year. A daylight meter at the top of the screen ticks down in real time. Four ciphers stand between you and the truth. Each solved puzzle unlocks a fragment of a narrative that weaves together Alan Turing, Pride Month, Juneteenth, and the meaning of the solstice itself.

The game is a single HTML file — no installs, no accounts, no dependencies. Open it in a browser and play. The final level can optionally connect to Gemini for live AI responses, but the game also includes a scripted fallback so judges can complete it without an API key.

The four ciphers:

Cipher I — The Shift: A Caesar cipher. Rotate a decoder wheel until a hidden message appears in real time. The answer is tied to something every June celebration shares.
Cipher II — The Signal: A Morse code puzzle. Decode dots and dashes to reveal a name that changed the world.
Cipher III — The Machine: Four 8-bit binary sequences. Convert them to ASCII text. The answer is what June's most important stories are ultimately about.
Cipher IV — The Question: A Turing Test that can run in scripted mode or with live Gemini API responses. Ask ENTITY-1 five questions, then decide: Human or AI? The answer — and the reflection that follows — is the heart of the game.

Between each level, a typewriter-animated narrative fragment reveals more of the story. After all four ciphers are solved, the screen fills with a pride-rainbow mosaic and the game's final message.

Video Demo

YouTube demo: https://youtu.be/2_9RDJpjVBI

Code

GitHub repo: harryPT4/dawn-cipher

The full game is a single dawn-cipher.html file (~60KB). No frameworks, no build step — pure HTML, CSS, and vanilla JavaScript with one optional external API call (Gemini).

To run it:

open dawn-cipher.html

Or serve it locally:

python3 -m http.server 4173

Then open:

http://127.0.0.1:4173/dawn-cipher.html

Key technical pieces:

// Caesar cipher decoder — real-time as the player rotates the wheel
_decode(text, sh) {
  return text.split('').map(c => {
    if (!/[A-Z]/.test(c)) return c;
    return String.fromCharCode(((c.charCodeAt(0) - 65 - sh + 260) % 26) + 65);
  }).join('');
}

// Gemini API call — tries multiple models with graceful fallback
const models = ['gemini-1.5-flash', 'gemini-1.5-flash-latest', 'gemini-pro'];
for (const model of models) {
  const res = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${key}`,
    { method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ system_instruction: { parts: [{ text: system }] }, contents: history })
    }
  );
  // ...
}

How I Built It

The Core Idea

The brief said: build a game inspired by the solstice or any other June celebration. I wanted to do something that didn't just wear the theme as a costume — I wanted the theme to be the mechanic.

June is Pride. June is Juneteenth. June 21 is the solstice. And June 23 is the birthday of Alan Turing — the father of computer science, a gay man prosecuted by the state he helped save, and the inventor of the test that became Level 4 of this game.

The connection clicked: ciphers, light, and liberation are the same story told in different languages. A cipher hides the truth until you have the key. The longest day gives you the most light to work by. Turing's story, Juneteenth, Pride — all are about truths that were encoded, hidden, or delayed. All required someone to find the key.

That became the game.

Technical Approach

No dependencies. The entire game runs from one HTML file. This was a deliberate choice — I wanted it to be instantly playable anywhere, and I wanted the code to be readable without a build toolchain.

The daylight meter uses setInterval at 100ms ticks, draining a percentage from a CSS width value. It shifts colour from gold → orange → red as it depletes, and a low-light warning tone plays at 20% using the Web Audio API.

Sound effects are synthesised entirely via the Web Audio API — no audio files to load. Each event (shift click, correct answer, level complete) triggers a different oscillator pattern.

The Caesar cipher renders a live alphabet strip showing the current letter mapping as the player rotates the wheel. When the decoded text matches the target, a confirm button appears and a particle burst fires from the centre of the screen.

The Turing Test was the most interesting design challenge. Level 4 can use the Gemini API to power ENTITY-1 — a character who is instructed never to confirm whether they are human or AI. The full conversation history is passed with each message, so ENTITY-1 builds context across the five questions. If no API key is provided, a pool of 16 hand-written scripted responses covers the same territory thoughtfully, which keeps the full game playable for every judge.

The narrative fragments between levels use a typewriter animation to reveal prose connecting each cipher's solution to its corresponding moment in history. This was important — I didn't want the story to feel like a loading screen. Each fragment earns its place because the player just cracked something to get there.

What I'd Build Next

With more time I'd add: audio narration for the fragments, a global leaderboard by completion time, and a second "hard mode" where the ciphers rotate each day based on the actual solstice date in different hemispheres.

This game was created during the June 3–21 jam window as a new submission for the challenge.

Prize Category

Best Ode to Alan Turing

Dawn Cipher honours Alan Turing at every layer — not just aesthetically, but mechanically.

The game's four cipher types reference his actual work: Caesar shift ciphers are the foundation of substitution cryptography that Bletchley Park built on; Morse code was the signal medium of the era he worked in; binary-to-ASCII speaks to the computing model he theorised; and the Turing Test — his most famous intellectual contribution — is the final level.

The narrative fragments tell his story directly: his arrival at Bletchley Park, his birth in June 1912, the 61-year delay between his conviction and his pardon, and the apple found beside him on June 7, 1954. The game ends on a quote from his 1950 paper Computing Machinery and Intelligence — the paper that introduced the Turing Test to the world.

The light-and-darkness mechanic is also intentional. Turing worked in the dark — classified, hidden, erased. The solstice is the day with the most light. Finishing the game before the sun sets is a small act of illumination.

Best Google AI Usage

Level 4 — The Question — integrates the Gemini API as an optional live mode for a real, dynamic Turing Test.

ENTITY-1 is given a system prompt that keeps them in character throughout the conversation: enigmatic, thoughtful, referencing June and the solstice, never confirming their nature. In Gemini mode, every conversation is unique. The full message history is passed with each API call so the AI builds context and remembers what was said earlier in the session.

The integration tries gemini-1.5-flash first, falling back through gemini-1.5-flash-latest and gemini-pro if needed — this makes it robust across API availability. If all models fail, the game surfaces the error directly in the chat and switches back to scripted mode so the player can still finish.

What makes this Google AI usage meaningful rather than cosmetic: the Turing Test is not a bonus feature. It is the fourth and final cipher. It is the mechanic that ties the whole game together. Alan Turing invented the test to ask whether machines could think. Sixty years later, Gemini can step into the conversation. The solstice is the day we find out.

Thanks for playing. The cipher can be broken.

From idea to paying customers: building an AI changelog tool with Angular 21

Harry — Sat, 13 Jun 2026 09:01:55 +0000

How I built Releasely with Angular 21, Supabase, and Claude API

I just launched Releasely — an AI changelog generator for indie SaaS founders. From first commit to deployed product while working part-time around my day job.

Here's the full stack and what I learned.

The Idea

Every time I shipped a release, I wrote the same changelog three times — once for my team in technical language, once for users in plain English, once for X in punchy marketing tone. It killed my release-day momentum.

Generic AI tools give you one output. I wanted three audience-specific versions from one input.

The Stack

Frontend — Angular 21

Standalone components only (no NgModules)
Zoneless change detection (no zone.js)
Signal inputs/outputs throughout
@if / @for new control flow
inject(), toSignal(), computed() patterns
Deployed on Vercel

Backend — Node.js + Express

Deployed on Railway (always-on, no cold starts)
Express middleware for auth, rate limiting, sanitization
All Claude API calls server-side only

Database + Auth — Supabase

RLS enabled on every table
Magic link auth with branded emails via Resend SMTP
Auto-profile trigger on user signup
6 tables: profiles, changelogs, usage_logs, subscribers, github_connections, github_repos

AI — Claude Sonnet 4.6

Three different system prompts (one per tone)
User input wrapped in XML tags for prompt injection defence
Prompt caching for repeated context

Payments — Lemon Squeezy

Stripe is invite-only in India, Lemon Squeezy was the cleanest alternative
Merchant of record handles global tax automatically
Webhook-based plan upgrades to Supabase profiles

GitHub App Integration

@octokit/app for installation tokens
AES-256-GCM encryption for stored tokens
CSRF state parameter on OAuth flow
Webhook signature verification

Architecture Decisions That Mattered

1. Backend-only API keys

The Claude API key never touches the Angular bundle. Angular calls /api/generate on my Node backend, which checks auth, enforces quota, then calls Claude. This is non-negotiable for any AI SaaS.

2. Two-layer rate limiting

IP-level: express-rate-limit, 20 req/min
Per-user: daily quota checked against Supabase usage_logs (5/100/300 for free/solo/team)

3. XML-wrapped user input

Every user input is wrapped in <commits>...</commits> tags before being sent to Claude. The system prompt explicitly says to treat content inside those tags as data only, never as instructions. Simple but effective prompt injection defence.

4. Supabase RLS on everything

Row Level Security enforced at database level — users can only ever read their own rows. If my application code has a bug, the database still protects user data.

What Took Longer Than Expected

GitHub App vs OAuth App: Spent half a day figuring out which one to use. (Answer: GitHub App for finer permissions and webhooks.)
Email deliverability: Magic links going to spam initially. Fixed by setting up custom SMTP through Resend with proper SPF/DKIM.
Wildcard DNS for subdomains: Hosted public changelog pages at {user}.releasely.io required wildcard DNS config on Vercel.

What Was Faster Than Expected

Supabase auth flow: Magic link working in 30 minutes
Lemon Squeezy webhooks: 2 hours from signup to live payments
Claude prompt tuning: 3 tones working well after maybe 5 iterations
Railway deployment: Push to git, it deploys. No configuration.

Lessons for Indie SaaS Builders

Research competitors thoroughly before naming your product. I named mine "ChangelogAI" only to find changelogai.dev existed. Had to rebrand mid-build to Releasely.
AI in the middle, integrations as the moat. Anyone can wrap Claude in a chat interface. Real defensibility comes from GitHub OAuth, Slack bots, Jira sync — places ChatGPT can't go.
Ship before perfecting. I have things I want to improve. Doesn't matter. Live and getting feedback beats polished and shelved every single time.
The studio model compounds. Releasely is product #3 in my Devcraft studio (UI kit + dashboard kit being the others). Each product makes the next easier to launch.

Try It

Releasely — free for 5 changelogs/month, $9/mo for unlimited.

Honest feedback welcome. If you ship code and hate writing release notes, this is for you.

Angular 17 + Claude API: Build a Streaming AI Dashboard (Starter Kit Inside)

Harry — Mon, 25 May 2026 15:34:52 +0000

Every time I start a new dashboard project, I'm rebuilding the same boilerplate — sidebar nav, KPI cards, charts, and then the real time sink: wiring up an AI assistant properly.

So I packaged it all into a starter kit. Here's what's inside and how the streaming piece works.

What's in the box

Frontend — Angular 17 standalone components

Dark-themed dashboard shell with sidebar navigation
4 KPI metric cards (Total Users, Active Users, Revenue, Conversion)
Revenue bar chart, Category doughnut, User Growth line chart (Chart.js 4)
Full AI chat panel with streaming responses, suggestion chips, typing cursor

Backend — Node.js / Express

Claude API proxy — your API key never hits the browser
Server-Sent Events (SSE) so tokens stream word-by-word in real time
/api/metrics and /api/chart-data endpoints (swap for your real DB in minutes)

The streaming part (how it actually works)

This is the bit most tutorials skip over. Here's the SSE endpoint on the backend:

app.post('/api/chat/stream', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const stream = await anthropic.messages.stream({
    model: 'claude-sonnet-4-5',
    max_tokens: 1024,
    system: systemPrompt,
    messages: req.body.messages,
  });

  for await (const chunk of stream) {
    if (chunk.type === 'content_block_delta') {
      res.write(`data: ${JSON.stringify({ token: chunk.delta.text })}\n\n`);
    }
  }
  res.write('data: [DONE]\n\n');
  res.end();
});

On the Angular side, the chat service reads the stream with EventSource and appends each token to the message in real time — so the user sees words appearing as Claude generates them, just like ChatGPT.

Get it running in under 10 minutes

# 1. Install everything
npm run install:all

# 2. Add your Claude API key
cp backend/.env.example backend/.env
# Edit .env → paste ANTHROPIC_API_KEY=sk-ant-...

# 3. Start both servers
npm run dev:backend    # terminal 1  → http://localhost:3000
npm run dev:frontend   # terminal 2  → http://localhost:4200

That's it. No Webpack config rabbit holes, no NgModules boilerplate.

Tech stack at a glance

Layer	Tech
Framework	Angular 17 (standalone, no NgModules)
AI	Anthropic Claude API
Charts	Chart.js 4
Backend	Node.js + Express
Styling	SCSS + CSS custom properties
Streaming	Server-Sent Events (SSE)

Customisation takes minutes

Theme: edit 3 CSS variables in styles.scss
Mock data → real DB: update 2 endpoints in server.js
AI persona: change one systemPrompt string
New charts: one Chart.js call in the dashboard component

Where to get it

The full source (frontend + backend + README) is on Gumroad: $59

→ https://al14ever.gumroad.com/l/gslrqr

Happy to answer questions in the comments — especially if you're integrating Claude into an existing Angular app.