The code is available on GitHub.
The project has a minimal package.json. This file declares dependencies, scripts, and some config for compilation and linting. The only steps needed to work in the app are to clone it, run
npm install to install dependencies, then run
npm run dev to develop.
npm run verify can additionally be run to check builds, linting, and tests. Once a pull request is merged into master,
npm run stage is run to deploy the latest code to a test release URL; if everything looks good,
npm run release is run to tie the latest deployment to the
The project has three directories:
The static directory holds static files (like favicons and raster images). When the app is deployed, these can be accessed at
/static/*. This functionality works by default with Next.js.
The components directory holds generic components used across app pages. These are ES2015 modules that export React components, things like Icons, Buttons, Headings etc.
The pages directory holds app pages. A page is just a component, but it is special because Next.js wires up the file path to the matching route (ie
https://trevordmiller.com/projects/guitar-lessons). This functionality works by default with Next.js. The page components generally just compose the generic components in the
components folder to create a page.
Files are organized in
SomeFile named directories with an
index.js for the entry point. This allows them to have sub-components or utilities that are referenced with a relative path for easy extraction into an npm published package.
The project uses a module for a style guide. This is the source for shared styles like colors, spacing (padding/margin), font sizes, etc. The color scheme is Nova, which I use across my projects and tools - so the style guide module simply maps colors to the
nova-colors npm package values.
I'm happy with how this has turned out. It seems to be easy to maintain and add-to. Let's see how it does going forward :)