Case study

Wordle Clone

A Brazilian Portuguese Wordle in the browser: daily five-letter puzzle, curated word list, on-screen and physical keyboard, flip reveals, and a shareable emoji grid—static Angular app on GitHub Pages with zero backend.

Introduction

This is a Wordle-style game tailored for Portuguese: the same one-puzzle-per-day rhythm, but answers come from a hand-built dictionary of common five-letter words, so guesses and feedback feel natural in PT-BR. Everything runs client-side—Angular drives the board, keyboard, and game services; TypeScript holds the scoring rules; CSS handles layout and the tile flip animation. There is no server: state for the current game can live in sessionStorage so a refresh mid-round does not wipe progress, and the deploy is a static bundle on GitHub Pages.

Daily word tied to the calendar (same challenge for everyone each day)
Guess validation and feedback against a curated PT word list
On-screen and physical keyboard with disabled keys after they are ruled out
Flip animation and color states for correct / present / absent letters
Session-friendly persistence for an in-progress game
Shareable result grid (emoji blocks) without revealing the answer

Role — Solo developer and own UI: layout, motion, and interaction are implemented by hand in CSS. Scope stayed small on purpose so the hard part (evaluation logic and keyboard UX) could be done well.

Technologies — Angular, TypeScript, CSS

Purpose and Goal

I built it to practice Angular end to end—components, services, dependency injection, and deployment—using a game everyone understands so I could focus on correctness and polish instead of product discovery.

The outcome I wanted was a credible PT-BR Wordle: fair dictionary, reliable daily word, and a static site that loads fast and works offline once cached.

Planning stayed lightweight: pick the word source, nail the evaluation algorithm and keyboard flow first, then layer animations and sharing.

Spotlight

Every interaction hangs on guess evaluation: which letters are correct, present, or absent, especially when the same letter appears twice—tiny code, huge surface for bugs. Portuguese word constraints and duplicate-letter edge cases made it tempting to special-case forever. I pulled evaluation into pure functions tested outside Angular, wired a predictable keyboard state on top, and used CSS for the flip animations so the stack stayed small and the tricky logic stayed honest.

Lessons Learned

Angular services are a clean place to keep game logic testable.
Client-only games still need discipline around state and refresh behavior.
Shipping a small project end to end teaches deployment and UX polish, not just syntax.