Homebrewery 🍺🧙♂️
I'm Scott
- Developer for over 20 years
- Primarily build for the web
- Founder / early-stage for most of my jobs
Oh, hello
- Love automation and solution design
What is Homebrewery?
A site that allows you to create beautiful homebrew D&D content with just Markdown
D&D?
Dungeons and Dragons - Shared story telling and improv game
Markdown?
Human friend text that turns into HTML
Brief project timeline
V1
-
Weekend project
-
Just Editor and PDF exporting
-
Launched on Heroku
-
Weekend project
-
Just Editor and PDF exporting
-
Launched on Heroku
-
Shared to smaller subreddit
-
Lots of positive feedback
-
Tons of suggestions
Result?
V2
-
Lots of positive feedback
-
Added DB (still no accounts)
-
Dual key system for editing and viewing
-
Expanded the markdown parser
-
Improved Styling
-
Allowed HTML
-
Huge usage uptick
-
Shared to main subreddit
-
Lots and lots of bugs/issues
Result?
V3(ish?)
-
Added accounts (no email! 😭)
-
Added main site (bad idea)
-
Expanding Markdown syntax even more
-
Trolling/hacking
-
Backwards compatibility issues
-
Community issues: Legal, reddit mods, support
Result?
How it Works
Editor + Preview
- Codemirror as editor + custom syntax highlighter
- Very custom CSS styling for the D&D look
- React.js as UI framework
- Fontawesome for icons
- Less for styling, no style frameworks
- Partial Page rendering
- Use of print media queries
Hosting and Infrastructure
- Heroku for server
- Autodeploys from Github master to staging
- Manual promotion to production
- MongoDB for database. Two table system.
- Logging via Papertrail (lots of trail and error)
- Heroku handled traffic spikes
Frontend Tooling
- Vitreum: a react.js build system we developed at Thalmic Labs.
- Uses Browserify, React, and LiveReload
- React component => Bundle.js + HTML
- Allows for custom transforms such as css and images
- LiveReload built in, watches project + hotreloads changed files via websockets
Backend Tooling
- Express.js for server
- Simple scripts for compiling Less styling
- Salted hashed passwords