Tech Stack

This web app was initialized from my open-source Github project called Create Your Stack App

Tech Stack

TechVersionPurpose
Next13.1Framework for building React-based web apps
React18.2Framework for creating component-based UIs
tailwindcss3.2CSS framework
react-markdown8.0Used to render blog posts
gray-matter4.0Extracts meta-data from markdown files
reading-time1.5Estimates the amount of time to read a markdown file
storybook7.0 Beta 15Framework from manually testing and documenting React components
cypress12.3Enables BDD testing
@badeball/cypress-cucumber-preprocessor15.1Enables BDD testing
jest29.3Provides framework for unit testing
eslint8.30Enforces a coding standard
prettier2.8Enforces a coding standard
husky8.0Provides git hooks

Features

  • Web App

    • Next JS 13
      • App Directory
      • SSR

  • UI Components

    • React
    • Atomic UI directory structure

  • CSS

    • Tailwind CSS
    • Tailwind Typography used for rendering Markdown

  • SEO

    • <meta> tags including "og" and "twitter"
    • Article Structured Data for blog posts
    • Static routes via Next SSR

  • Google Analytics Google Analytics

  • Google Lighthouse Analysis within Chrome Developer Tools: Lighthouse

    • .webp images for performance gains

  • Testing

    • Cypress for end-to-end BDD testing using Cucumber pre-processor

Cypress

  • Jest and React Testing Library for component and utility testing
  • Code Coverage results in /build directory

Code Coverage

  • Storybook for manual component testing and documentation

Storybook

  • Pre Commit and Pre Push git hooks

  • Coding Standards

    • /app and /src files checked with ESLint and Prettier

  • npm run scripts

    • build
    • cypress:open
    • cypress:run
    • dev
    • lint
    • start
    • storybook
    • storybook-build
    • storybook-build-test
    • test

CI / CD Deployment

This web app is hosted on AWS Amplify which pulls the source code from Github. When I make a change in VS Code and push to a private repo in Github, Amplify uses a hook and is notified of the change. Amplify does a build and redeploys the webapp automatically.

References