Sketching the note taker

May 12, 2014

Hacker School has invited alumni (like me!) back for a “reunion week” — a brief reprise of the fun and learning that was Hacker School.

An overarching goal for this week is to get quicker at bringing web apps from idea to prototype. I’d like to consistently go from zero to working code that demonstrates my idea in 1-3 days — not weeks.

So my current project is a note taker app. Note Taker (I’ll come up with a cool name later) lets you quickly record unorganized info, sync it across devices and browse it by date or contents.

Here’s a crappy photo of my UI sketch:

I plan to use React for the UI. The Thinking in React blog post recommends starting by drawing boxes around each component and giving each box a name, so that’s just what I’ve done. The App component holds all interactive bits on the page, and its children fall into this hierarchy:

For the layout, I’m trying out Pure CSS, a small CSS lib from the YUI folks at Yahoo! that promises to be less opinionated and easier to build on than, say, Bootstrap. Pure CSS seems handy so far, and its grids are easy to get started with. Screenshots to come, soon!

You can follow me on Mastodon or this blog via RSS.

Creative Commons BY-NC-SA
Original text and images (not attributed to others) on this page are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.