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.

Monitoring a site with UptimeRobot

I’m late to this one, but there is a fantastic service called UptimeRobot for monitoring site uptime. A killer feature is the ability to add a simple status page via a subdomain to your site. Example: status.sheru.uk.

First, head over to UptimeRobot and sign up.

Uptime Robot sign-up page

  • There are no sites configured initially, so we need to add one

Adding a site

  • Now you need to decide what site(s) to monitor.

Adding a site to UptimeRobot

  • Once you’ve done this, you can create a custom status page. This can be accessed from clicking My Settings at the top of the page and scrolling down until you find the option for Add Public Status Page.

Adding a custom status Page

  • If you don’t want your public status page to be public, you can enter a password. I left mine blank.

Setup public status page

  • We want this status page to be available on a subdomain of an existing site (status.sheru.uk). Once the form is complete, we need to edit our DNS record (this will be either where you registered your domain, or your server host) and add a new CNAME record. We point this at stats.uptimerobot.com.

Updating DNS record

  • This should be available almost instantly. Visit the subdomain you created and you’ll see your new status page.

Example public status page

You can continue to add as many sites as you like to this status page, or go back and edit the settings if you decide you don’t want this information to be public. You can also create different status pages, with their own privacy settings –but you’ll need to use a different subdomain for each.

Animated CSS reveal on page load

I’m still playing with animations on page load and put together a little demo and some notes.

What do we want to animate?


@keyframes fadeinanimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Now we can apply the animation to our elements (the .fadein class):


  .fadedin {
    opacity: 0;
    animation: fadeinanimation ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-delay: .2s;
 }

See it in action:

http://codepen.io/shellbryson/pen/pRJqxj

Community site

With the migration to my new development server well under way, I was mulling over what to do with a place-holder page for the building I live in (because, buildings need sites too?)–then yesterday a notice board appeared in the shared hall. No excuses. So I replaced the site on the newly minted server with a hand-spun single page.

Features played with:

  • CSS animation on load
  • Google Maps API

NorthLeithMill.com (+git source)

Screenshot of NorthLeithMill.com
Updated community placeholder site