@fsjsd/frontend-patterns

Enterprise-grade repo of modern front end design patterns, implemented in React. See the feature list below

Tech

• 🌐 React v18 (Create React App) w/ TypeScript throughout
  • 💄 Custom CSS via styled-components
  • 📱 Mobile Optimised / responsive
  • 👂 Accessible, Semantic HTML
• 🚀 High Performance React
  • ✨ 60fps on most demos, on mobile.
  • 🔥 Near 100% Lighthouse rating
  • ✔️ Web vitals reported on screen
• 💪 >95% Unit Test coverage via Jest
  • 👩‍🦯 a11y test automation via jest-axe
• 🏭 CI pipeline (GitHub Actions)
  • 💂 High coverage thresholds
  • 🔒 Automated Synk, CodeQL & LGTM checks
  • ❤️ E2E tests via Cypress (basic)
  • 🌎 Lighthouse testing
  • 📄 GitHub Pages deployment on master merge
• ✋ local husky/lint-staged to enforce lint / test coverage standards

Setup

• clone repo and yarn
• yarn start to launch (Create React-App implementation)
• View online here

Patterns

Components

Typeahead

Fully styleable, accessible Typeahead component pattern (bring your own UI components).

Dynamic Image

Drop-in replacement for native HTML image component. Does not load image until visible in viewport, provides props to display custom loading component while image downloading, and error component if image load fails

Carousel

React implementation of web.dev's performant Carousel demo

Features

Snake Game

React based Snake game with three different view implementations (HTML, Canvas and raw text)