Skip to content

React: WordStack (part 1)

This is the first part of a series of blogs as I explore building a small web app in React, with a modern workflow.

Background: WordStack is based on a really simple user story: Tracking daily writing progress via writing sprints. The idea of writing sprints comes from NaNoWriMo—the annual writing challenge where writers across the world attempt to first-draft an entire novel (each) in a month. It sounds like madness. It is (I’m one of those writers). To hit the goal (50,000 words, 1 month) you need to write 1600 words a day, or more if you skip days or miss targets.

One great way to achieve these is to set micro-targets and write in sprint. That is, set a small arbitrary time and write uninterrupted until that time expires. Tracking this is somewhat random. Via FaceBook chat, or the NaNoWriMo forums, or Slack. Many writers use a similar process outside the intensity of November. There is a very simple tracking tool on the NaNoWriMo web site, but it’s only really useful during the competition. This led me to thinking:

Wouldn’t it be cool if there was a tool to help with this?

Wires

First pass of this app needs to be really simple. First, because it’s part a experiment in learning to build production-level React code, part because I want to follow good agile practice and release small and often (MVP).

Screenshot of wireframe for initial application
Early wires in Sketch

I’m not too worried about the desktop layout for this version, so here we have the most basic process: Select your sprint style > visualise the sprint countdown > complete sprint > view progress. I’m not concerned with storing this yet.

Workflow

As this is much an experiment with workflow as React, I’m tracking progress of the project through a GitHub Project.

Screenshot of Kanban tracking for project on GitHub
GitHub project Kanban

The project itself follows standard Gitflow practice (develop branch with feature and release branches) and committed to GitHub.

Screenshot of GitHub
GitHub

IDE

To go with the new technology stack, I’ve switched out my usual dev tools for a fresher, more modern stack set: Atom (with some customisation, plus plugins), Hyper (a very nice, customisable terminal) and Chrome. As I’m focused on mobile for the prototype, it all fits nicely on a MacBook screen.

Screenshot of development environment
Atom, Chrome and Hyper, a great dev combination.

Getting started

Screenshot of directory structure
Directory structure

To get out the door, I started with Create React App and followed the basic setup. It was great for getting a bare-bones React app running. I quickly adapted this to use SCSS (via node-sass) and implemented a folder structure for components that more closely matched the in-house pattern library at my day-job.

Well, it doesn’t look great right now. But that’s not the point. Start small, see what works (and how it could work), iterate:

Screenshot of WordStack

Dev Notes

I’ve been spending a little time with React, and I like it. I’m not a fan of jsx… Mixing JS and markup and CSS into an unholy pot of mystery code just didn’t feel right. Surely this thing would taste awful. I persisted. It tastes pretty good.

Leave a Reply

Your email address will not be published. Required fields are marked *