jamielinux/givemeaverse.com

A modern React/TypeScript application

https://givemeaverse.com is a Progressive Web Application written in modern React and TypeScript. It is performance optimized, has 100% test coverage and meets web accessibility guidelines.

It is licensed under the Mozilla Public License 2.0.

Technologies

• Design:
  • Figma for creating design mockups.
• Software:
  • React.js
  • Create React App
  • TypeScript
  • React Router
  • React Helmet
  • query-string
• CSS:
  • Written from scratch (ie, no framework).
  • Sass as a pre-processor.
  • normalize.css as a reset.
  • BEM for naming conventions.
• Images/SVGs/Fonts:
  • Logo, favicon and background image created with:
    • Inkcape
    • svgo
    • Neovim
  • Material Design for other icons.
  • FontForge for subsetting fonts.
  • pwa-asset-generator for generating Apple PWA splash images.
• Testing and debugging:
  • Firefox DevTools
  • RemoteDebug iOS WebKit Adaptor for iOS Safari debugging.
  • Windows 10 Virtual Machine for Microsoft Edge and Microsoft Narrator (screen reader) testing.

Accessibility

• Keyboard navigation (ie, <Tab>, <Enter>, <Esc>) works predictably.
• Screen readers work predictably and don't get confused by menus or popups.
• WCAG 2.0 (Web Content Accessibility Guidelines) Level AAA requires a minimum contrast ratio of 7:1. Every verse has a contrast ratio of at least 12:1 with any of the backgrounds.

Third-party bugs found during development

Found and reported three bugs:

• WebKit: Using vmax for select <option> font-size adds a noticeable delay to all future interactive events
• WebKit: iOS PWAs using Service Workers freeze after being backgrounded
• Google Chrome: Chrome on Wayland reports itself as having no pointer and no hover

Performance

• 100% in Google Chrome Lighthouse audit.
• Served via an optimized Nginx, HTTP/2, TLS best practices, and static compression.
• Handwritten CSS is 5.6k gzipped.

100% test coverage

-------------------------|----------|----------|----------|----------|-------------------|
File                     |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------------|----------|----------|----------|----------|-------------------|
All files                |      100 |      100 |      100 |      100 |                   |
 src                     |      100 |      100 |      100 |      100 |                   |
  App.tsx                |      100 |      100 |      100 |      100 |                   |
 src/components          |      100 |      100 |      100 |      100 |                   |
  About.tsx              |      100 |      100 |      100 |      100 |                   |
  Contact.tsx            |      100 |      100 |      100 |      100 |                   |
  Home.tsx               |      100 |      100 |      100 |      100 |                   |
  PageNotFound.tsx       |      100 |      100 |      100 |      100 |                   |
  RandomVerse.tsx        |      100 |      100 |      100 |      100 |                   |
 src/components/common   |      100 |      100 |      100 |      100 |                   |
  Button.tsx             |      100 |      100 |      100 |      100 |                   |
  Header.tsx             |      100 |      100 |      100 |      100 |                   |
  Logo.tsx               |      100 |      100 |      100 |      100 |                   |
 src/components/verse    |      100 |      100 |      100 |      100 |                   |
  VerseCard.tsx          |      100 |      100 |      100 |      100 |                   |
  VerseControlPanel.tsx  |      100 |      100 |      100 |      100 |                   |
  VerseFooter.tsx        |      100 |      100 |      100 |      100 |                   |
  VerseInfo.tsx          |      100 |      100 |      100 |      100 |                   |
  VerseMain.tsx          |      100 |      100 |      100 |      100 |                   |
  VerseSettings.tsx      |      100 |      100 |      100 |      100 |                   |
  VerseSlideshow.tsx     |      100 |      100 |      100 |      100 |                   |
  index.tsx              |      100 |      100 |      100 |      100 |                   |
 src/constants           |      100 |      100 |      100 |      100 |                   |
  index.ts               |      100 |      100 |      100 |      100 |                   |
 src/contexts            |      100 |      100 |      100 |      100 |                   |
  CardColorContext.tsx   |      100 |      100 |      100 |      100 |                   |
  SlideshowContext.tsx   |      100 |      100 |      100 |      100 |                   |
  ThemeContext.tsx       |      100 |      100 |      100 |      100 |                   |
  TranslationContext.tsx |      100 |      100 |      100 |      100 |                   |
  VerseFontContext.tsx   |      100 |      100 |      100 |      100 |                   |
 src/utils               |      100 |      100 |      100 |      100 |                   |
  index.ts               |      100 |      100 |      100 |      100 |                   |
-------------------------|----------|----------|----------|----------|-------------------|
Test Suites: 13 passed, 13 total
Tests:       86 passed, 86 total
Snapshots:   7 passed, 7 total
Time:        4.554s
Ran all test suites.
Done in 5.43s.