Project Roulette / Projects

Frontend and Security projects

6 of 30 projects. Each has a stack, five features to ship, a difficulty, a time estimate, and a bonus challenge.

Frontend · Intermediate · 2 weeks

Accessible Design System & Component Library

A themeable library of accessible UI components (dialog, combobox, tabs, data table, toast) published to npm, with a documentation site where people can try every component live.

  • React
  • TypeScript
  • Storybook
  • Vitest
  • Testing Library
  • axe-core

Features

  1. 8–10 components with full keyboard support and correct ARIA roles
  2. Light and dark theming driven by design tokens
  3. Docs site with a live props playground for each component
  4. Automated accessibility tests that run in CI on every pull request
  5. Versioned releases to npm with a generated changelog

Bonus: Visual regression testing with Playwright screenshots that block a PR if any component changes unexpectedly.

Frontend · Intermediate · 1–2 weeks

Git Repo Time-Lapse Visualizer

Paste any public GitHub repository and watch its file tree grow over time as an animated treemap, with contributor activity and the files that change most often.

  • TypeScript
  • Vite
  • D3.js
  • GitHub REST API
  • Web Workers

Features

  1. Fetch and cache commit history with pagination and rate-limit handling
  2. Animated treemap playback with a timeline scrubber
  3. Contributor timeline and a churn heatmap of hot-spot files
  4. Heavy parsing moved into a Web Worker to keep animation smooth
  5. Shareable URLs that encode the repo and timestamp

Bonus: Export the playback as a WebM or GIF that people can drop straight into their own README.

Frontend · Intermediate · 2 weeks

Browser Logic Circuit Simulator

Drag gates, wires, clocks, and LEDs onto a canvas and watch signals propagate in real time. Build anything from a half adder to a tiny CPU in the browser.

  • TypeScript
  • Canvas 2D or SVG
  • Vite
  • Web Workers
  • Vitest

Features

  1. Drag-and-drop gates, switches, clocks, LEDs, and seven-segment displays
  2. Event-driven simulation with propagation delay
  3. Truth-table generator for any selected circuit
  4. Reusable custom components built from sub-circuits
  5. Save, load, and share circuits by link

Bonus: A waveform timing-diagram viewer that works like a logic analyzer for any wire you probe.

Security · Intermediate · 1–2 weeks

Git Secrets Scanner & GitHub Action

A CLI and GitHub Action that scans repositories, including full commit history, for leaked API keys, passwords, and private keys.

  • Go
  • Regex + entropy analysis
  • GitHub Actions
  • SARIF

Features

  1. Pattern and entropy-based secret detection
  2. Fast scanning of the full Git history
  3. Allowlist file to suppress false positives
  4. SARIF output that shows up in GitHub code scanning
  5. Pre-commit hook mode that blocks leaks before they happen

Bonus: A seeded test corpus that reports precision and recall, compared against an existing open-source scanner.

Security · Intermediate · 1–2 weeks

SSH Honeypot with Attack Dashboard

A fake SSH server on a cheap cloud VM that records the logins and commands real attackers try, shown on a live dashboard.

  • Python (asyncssh) or Go
  • Docker
  • PostgreSQL
  • Grafana
  • GeoLite2

Features

  1. Fake shell that imitates a Linux machine and logs every command
  2. Analytics on the most common passwords and commands
  3. World map of where attempts come from
  4. Strong isolation: its own VM, a container, and no outbound network
  5. Automatically generated weekly threat summary

Bonus: A write-up analyzing one week of real attack data, published alongside the repo.

Security · Advanced · 2 weeks

End-to-End Encrypted File Sharing

Share files by link, with encryption done in the browser so the server never sees file contents or keys.

  • TypeScript
  • Web Crypto API
  • Node.js or Go
  • S3-compatible storage

Features

  1. AES-GCM encryption in the browser, with the key kept only in the URL fragment
  2. Chunked streaming encryption for large files
  3. Links that expire or stop after a set number of downloads
  4. Optional password protection with proper key derivation
  5. A written threat model in the README

Bonus: A verification page that shows the stored ciphertext is unreadable without the link.