Today I challenged myself to create 30 projects in 30 days. Every day for the next month, I'll be building one web-development-related project from scratch and pushing them to this repo in order to track my progress and keep myself honest. Will I succeed? Will I fail? Will I survive? It's too early to tell. But as of right now I'm excited to get started.
I've accumulated a little over 30 ideas in my "project-bank"––each one belonging to one of several categories: 
I'll include a brief overview of each project as I complete them below and provide a more detailed write-up in each individual project's directory.
| Day | Project | Type | Tech Stack |
|---|---|---|---|
| 1 | Wheel. Of. Something. | |
   |
| 2 | tableme.js | |
|
| 3 | BFS Pathfinding Visualization | |
|
| 4 | Pixel Battle | |
|
| 5 | Equation Solver | |
  |
| 6 | Tic-Tac-Toe Engine | |
  |
| 7 | Weather Color | |
|
| 8 | Keyword Extractor | |
|
| 9 | RGBordle | |
|
| 10 | Theme Explorer | |
|
| 11 | Solar System Visualization | |
|
| 12 | My Timers | |
 |
| 13 | Random Dictionary Domain | |
|
| 14 | Hello, Match! | |
|
| 15 | GitHub LaTeX | |
|
| 16 | Type a Book | |
|
| 17 | Theme Explorer | |
|
| 18 | Notes App | |
 |
| 19 | DevToolsConsole.js | |
|
I'll start simple with a fun "spin" on a Random Number Generator: a Spin the Wheel app. The app takes a list of possible outcomes, puts them on a wheel, and can be spun to randomly select one outcome.
Going forward, each day I'll load the wheel with projects from my project-bank and spin it to determine which project I'll be working on.
Try it out here, or check out the detailed write-up.
JavaScript
HTML
CSS
- canvas-confetti
tableme.js is a simple JavaScript table library. It takes a JSON object array and renders a sortable, searchable, and paginatable table in the container of your choice. The components can be styled as desired, but a default theme is included.
Try it out here, or check out the documentation.
A simple Breadth-First Search algorithm implemented in JavaScript used to locate the shortest path between two points. Users can add and remove "blockers" (cells that the algorithm cannot traverse) and select from several grid dimensions.
Try it out here, or check out the detailed write-up.
A simple webapp that simulates a pixel battle. Users can add up to 8 different "forces" and customize each one's color or name. Each force will fight to control the 200 x 200 pixel battlefield until only one is left standing.
Try it out here, or check out the detailed write-up.
A REST API used to parse, simplify, or evaluate expressions. Expressions can be formatted as either plain text or LaTeX expressions.
Try it out here, or check out the documentation.
Node.js
Express.js
- math.js
A Tic-Tac-Toe implementation where users can play against multiple engine difficulties while receiving real-time move analysis, position evaluation, and suggestions.
Try it out here, or check out the detailed write-up.
React
Sass
- chart.js
A single-page weather app that generates a gradient animation using the weather, temperature, and time of day in the user's current location.
Try it out here, or check out the detailed write-up.
- stripe-gradient.js
- TinyColor
- GeoJS
- Open-Mateo
A webapp that analyzes prominent keywords within text. Users can upload .pdf and .txt files or paste text directly.
Try it out here, or check out the detailed write-up.
- PDF.js
- Tesseract.js
- winkNLP
A wordle-esque game where players try to guess RGB colors in 6 tries or less.
Try it out here, or check out the detailed write-up.
A simple Chrome Extension that allows users to explore any webpage's theme styles. The extension grabs any CSS variables defined on the current page's :root and body and organizes them into several "views" to be explored by the user.
Check out the project page here for installation and usage.
A true to scale visualization of our solar system using scrolling.
Try it out here, or check out the detailed write-up.
- Sweet Scroll
A time management app where users can add and remove timers. Both active and paused timers persist session to session using local storage.
Try it out here, or check out the detailed write-up.
Vue.js
A simple REST API that attempts to find a random dictionary domain available for purchase.
Try it out here, or check out the documentation.
- Axios
- compromise
A simple card-flip memory game with a developer twist: match the programming language with the "Hello, World!" code!
Try it out here, or check out the detailed write-up.
- Highlight.js
- canvas-confetti
A simple API that allows you to embed inline LaTeX expressions like 
, or display expressions like
into GitHub READMEs, or any GitHub flavored markdown.
Check out the documentation here for installation, usage, and examples.
- Axios
An app that allows users to practice typing while reading a classic novel.
This app started as a simple typing visualization, but as I was looking for bodies of text for the user to type I had the idea of using entire novels start to finish. In testing, I found that typing your way through a novel provides a really new and interesting way to experience a book.
Try it out here, or check out the detailed write-up.
A simple Chrome Extension that auto-renders raw *.md files to GitHub-styled HTML.
The extension aims to render GitHub flavored markdown as similarly to GitHub's markdown rendering engine as possible in order to accurately visualize how the markdown will render on GitHub.
Check out the project page here for installation and usage.
- Showdown
- starry-night
- MathJax
A React / Redux notes app loosely based on Apple's Notes app.
Try it out here, or check out the detailed write-up.
Redux
- Quill
Have you ever wished you could embed Chrome's DevTools console into an application? No? Well this library does it anyway.
Try it out here, or check out the documentation.