Interactive Front-End Checklist

The Front-End Checklist was in the web development news back in November. Reading down the repo listing, I had the idea to create an interactive version of it with functional checkboxes and running tallies keeping track of outstanding issues. I decided to implement it in React as I wanted more practice with using React, and because it seemed like a fairly straightforward project. Well, it was until I realized I was going against the React grain, top-to-bottom for data, so had to rework the data flow some.

I was not far into my development when I found out the checklist author had done similarly in producing an interactive version. I decided I could still do my own take on it. I studiously avoided looking again at the original implementation until I was satisfied with my own.

The screenshot below shows a portion of the checklist. The summary table is updated whenever checkboxes are checked or unchecked, as are the respective section summaries.

Go see it in action!

The source code is available on GitHub.

Related Posts