Project: Roundtrip to Russia

Overview

• Live site on gh-pages: https://ignatovdan.github.io/yandex-p3-russian-travel-my/
• In this project, I used HTML, CSS (img/srcset/flex/grid), BEM, Responsive design, CI (Testcafe, Storybooks, Chromatic, Docker, headless chrome, Github action/workflow for PRs)
• Source Figma design: https://www.figma.com/file/5S2WSbEFL6awjVWJ0NWL8Q/Sprint-3_-Russia-_-desktop-mobile?node-id=28503%3A0

Testing:

• Testcafe

  • Testcafe test/base screens/yaml/docker/readme files: https://github.com/IgnatovDan/yandex-p3-russian-travel-my/tree/main/tests-testcafe

• Storybook + Chromatic

  • Storybook story files: https://github.com/IgnatovDan/yandex-p3-russian-travel-my/tree/main/tests-storybook
  • Storybook project: https://main--635e4b3f0703423a27d6678b.chromatic.com/
  • Chromatic library: https://www.chromatic.com/library?appId=635e4b3f0703423a27d6678b&branch=main

Links:

• More for visual testing:
  • StoryShots + Puppeteer
  • happo.io, Happo docs: Storybook
  • Resemble.js
  • pixelmatch
  • hermione + looks-same

Technical links:

• HTML
  • https://github.com/IgnatovDan/Sandbox/tree/main/HTML/texts
  • https://github.com/IgnatovDan/Sandbox/tree/main/HTML/img-srcset-sizes
• CSS
  • https://github.com/IgnatovDan/Sandbox/tree/main/CSS/fonts
  • https://github.com/IgnatovDan/Sandbox/tree/main/CSS/grid
  • https://github.com/IgnatovDan/Sandbox/tree/main/CSS/media
• Tools
  • https://github.com/IgnatovDan/Sandbox/tree/main/Docker
  • https://github.com/IgnatovDan/Sandbox/tree/main/Storybook
  • https://github.com/IgnatovDan/Sandbox/tree/main/Testcafe