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.
- Design:
- Figma for creating design mockups.
- Software:
- 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:
- 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.
- 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.
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
- 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.
-------------------------|----------|----------|----------|----------|-------------------|
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.