AH Curriculum Vitae project

based on my React Universal Boilerplate

My personal CV Web Application written on TypeScript.

Generally Application follows Static CSR approach deploying final build to AWS S3. Than it is hosted using AWS S3 Static Web Hosting + CloudFront + Route 53.

1. Technology Stack
2. Run tasks
3. Project structure
4. Additional documentation
5. UI Components Library
6. Issues
7. License

Technology stack

Project Bundling

💡 Note (TypeScript tranpiling using Babel)

Transpiling TypeScript using Babel (with Webpack 'babel-loader', NOT 'ts-loader') was chosen: 1) faster compilation (no types check); 2) having single source of compilation - Babel.

On the other hand, using Babel compilation results in completely lose of type safety and TypeScript checks during this phase. That's why additional test script (tsc) were presented to check as pre-commit(push) hook + in scope of CI/CD.

Application

Code Styling

Testing

Unit/Integration Testing

E2E Testing

Performance testing

💡 Note (Performance Testing usage)

Performance Testing is only set up on CI/CD pipeline level. For manual performance testing you can use Chrome built-in Lighthouse DevTool.

Tests Reports

Other

⬆️ back to top

Run tasks

💡 Note: Default development Client host port: 1337

Start:

• npm start (npm run build:and:start:dev) - Application development build task -> start with Webpack Watcher (port 1337)
• npm run build:and:start:prod - Application production build task -> start hosting (using http-server)

Build:

• npm run build - Application general build task (development is default)
• npm run build:dev - Application development build task
• npm run build:prod - Application production build task
• npm run build:prod:pwa - Application production build task (with PWA support)

Deploy:

• npm run deploy:s3 - Application deploy to AWS S3 task (used for Static Site Hosting)
• npm run build:and:deploy:s3 - Application production build -> deploy to AWS S3 task (used for Static Site Hosting)

Clean up:

• npm run build:clean - Clean build ("dist") folder

Test:

• Unit/Integration Testing
  • npm test (npm run test) - run Application Unit/Integration Tests (Common + A11y)
  • npm run test:with:reports - run Application Unit/Integration Tests (Common + A11y). Reports (results and coverage) enabled.
  • npm run test:ci - run Application Unit/Integration Tests in CI mode (used for CI/CD pipeline level testing)
  • npm run test:ci:with:reports - run Application Unit/Integration Tests in CI mode (used for CI/CD pipeline level testing). Reports (results and coverage) enabled.
• E2E Testing
  • npm run test:e2e (npm run test:e2e:dev) - run All (Common + A11y) E2E Tests (development build used)
  • npm run test:e2e:dev:open - open launcher of All (Common + A11y) E2E Tests (development build used)
  • npm run test:e2e:common:prod - run Common E2E Tests (production build used)
  • npm run test:e2e:a11y:prod - run A11y E2E Tests (production build used)
• Performance Testing
  • npm run test:perf:ci - run Application Performance + Insights testing (Lighthouse CI, used for CI/CD pipeline level testing)
• TypeScript Types checking
  • npm run test:tsc - run Application Typescript's types checking (no Libraries level checking)

Lint:

• npm run lint:scripts - lint JS/TS files
• npm run lint:scripts:fix - lint JS/TS files with autofix
• npm run lint:styles - lint Styles files
• npm run lint:styles:fix - lint Styles files with autofix
• npm run lint - lint all (JS/TS+Styles) files
• npm run lint:fix - lint all (JS/TS+Styles) files with autofix

Code vulnerabilities scan:

• npm run sca:test - scan for vulnerabilities for known issues (with disrupting processes) - CI/CD integration.
• npm run sca:test:dev - scan for vulnerabilities for known issues (with disrupting processes), include dev dependencies
• npm run sca:monitor - scan for vulnerabilities with exposing and storing results snapshot (without disrupting processes)
• npm run sca:auth - SCA tool (Snyk) authenticate (auth token required)

Components Library maintaining:

• npm run storybook:start - start Components Library application (localy)
• npm run storybook:build - build Components Library (dist folder: 'storybook-static')
• npm run storybook:build:clean - clean Components Library build
• npm run storybook:deploy:s3 - Components Library deploy to AWS S3 task for (used for Static Site Hosting)
• npm run storybook:build:and:deploy:s3 - Components Library build -> deploy to AWS S3 task (used for Static Site Hosting)

⬆️ back to top

Project structure

./
│
├───.circleci   // application CI/CD configuration (using CircleCI)
│
├───.github   // GitHub templates for Projects
│
├───.husky   // Git Hooks configuration
│
├───.vscode   // VSCode Workspace configuration (additionally for .editorconfig)
│
├───config   // configurations folder
│   │
│   ├───application
│   │
│   ├───environment
│   │
│   ├───test
│   │   │
│   │   ├───jest   // Unit/Integration Tests configuration folder
│   │   │   │
│   │   │   ├───mocks   // Jest setup mocks (e.g. no-JS pattern files mock)
│   │   │   │
│   │   │   ├───test-utils   // Testing utils enhancement (e.g. RTL custom "render" util)
│   │   │   │   │
│   │   │   │   ├───custom
│   │   │   │   │
│   │   │   │   │   test-utils.js
│   │   │   │   │   index.js
│   │   │   │   └───
│   │   │   │
│   │   │   │   jest.setupAfterEnv.js   // Jest pre-setup execution (after installed to environment)
│   │   │   │   jest.setup.js   // Jest pre-setup execution (before installed to environment)
│   │   │   └───
│   │   ├───cypress   // E2E Tests configuration folder
│   │   │   │
│   │   │   ├───downloads
│   │   │   │
│   │   │   ├───e2e
│   │   │   │
│   │   │   ├───fixtures
│   │   │   │
│   │   │   ├───support
│   │   │   │
│   │   │   │   cypress.config.a11y.json   // E2E A11y Tests override configuration
│   │   │   │   cypress.config.e2e.json   // E2E General Tests override configuration
│   │   │   └───
│   │   │
│   │   │   cypress.config.js   // E2E Tests (Cypress) main config file
│   │   │   jest.config.js   // Unit/Integration Tests (Jest) main config file
│   │   │   lighthouse.config.js   // Performance Tests main config file (used for CI/CD pipeline)
│   │   └───
│   │
│   ├───lint
│   │   │
│   │   ├───eslint
│   │   │
│   │   └───stylelint
│   │
│   ├───prettier
│   │
│   ├───webpack
│   │   │
│   │   ├───app   // Webpack Application configuration
│   │   │
│   │   ├───helpers
│   │   │   │
│   │   │   ├───loaders   // Webpack loaders (babel-loader, sass-loader, etc.)
│   │   │   │
│   │   │   ├───plugins   // Webpack plugins (Favicon plugin, HTML plugin, etc.)
│   │   │   │
│   │   │   └───resolve   // Webpack resolves (aliases, etc.)
│   │   │
│   │   └───storybook   // Webpack Components Library (StoryBook) configuration
│   │
│   ├───storybook   // UI Components Library configuration
│   │   │
│   │   ├───docs
│   │   │
│   │   ├───helpers
│   │   │   │
│   │   │   ├───argTypes   // StoryBook global argTypes and args (e.g. device type)
│   │   │   │
│   │   │   └───decorators   // StoryBook global decorators (e.g. Providers wrapper)
│   │   │
│   │   │   constants.js   // StoryBook sharable constants
│   │   │   main.js   // StoryBook main config file
│   │   │   preview.js   // StoryBook global stories setup (decorators, parameters, args, etc.)
│   │   │   webpack.config.storybook.es5.js   // StoryBook Webpack config loader (use Babel transpiler to provide ES6 Webpack config usage)
│   │   └───
│   │
│   ├───robots
│   │   │
│   │   │   robots.txt   // Robots configuration to enhance Web crawlers search
│   │   │   sitemap.xml   // SiteMap configuration
│   │   └───
│   │
│   │   README.md   // Config folder info
│   └───
│
├───src
│   │
│   ├───api
│   │
│   ├───services    // device detection, i18n, etc.
│   │
│   ├───utils   // reusable utils
│   │   │
│   │   ├───functions
│   │   │
│   │   ├───objects
│   │   │
│   │   ├───strings
│   │   │
│   │   └───user
│   │
│   ├───assets
│   │   │
│   │   ├───fonts
│   │   │
│   │   ├───images
│   │   │
│   │   │   preload.config.js
│   │   └───
│   │
│   ├───components   // React components folder
│   │   │
│   │   ├───base   // base components (Button, Icon, etc.)
|   |   |
|   |   ├───common   //common components (Header, Footer, etc.)
│   │   │
│   │   ├───pages   // general pages components (MainPage, etc.)
│   │   │
│   │   └───routes   // application routes setup
│   │
│   ├───reusables
│   │   │
│   │   ├───custom-hooks
│   │   │
│   │   ├───hocs
│   │   │
│   │   │   services.context.tsx   // Services context for components injection using specific Custom Hook/HOC
|   |   |   skip-to-content.context.tsx   // Skip To Content (A11y enhancement) context for components injection using specific Custom Hook/HOC
│   │   └───
│   │
│   ├───store   // Redux's Store
│   │   │
│   │   ├───middlewares
│   │   │
│   │   ├───slices
│   │   │
│   │   │   store.ts   // main Store setup file
│   │   │   store.reducer.ts   // main reducer setup file
│   │   │   store.saga.ts   // root saga setup file (main init + watch sagas)
│   │   │   store.types.ts   // general Store types
│   │   └───
│   │
│   ├───styles   // main styles folder
│   │   │
│   │   ├───base   // base styles (mixins, functions, variables, etc.)
│   │   │
│   │   │   main.scss   // main styles file
│   │   │   font-declarations.scss  // fonts declarations main file
│   │   │   reset-normalize.scss   // reset & normalize basic styles
│   │   │   scrollbar.scss   // scrollbar styles
│   │   └───
│   │
│   │   Application.component.tsx   // main application Component
│   │   Application.module.scss   // entry styles file
│   │   application.tsx   // main Create App file
│   │   application.types.ts   // application types models file
│   │   declarations.d.ts   // non-TS files declarations and globals
│   │   index.ts   // main entry file
|   |   index.html   // source HTML file
│   │   README.md   // Source folder info
│   └───
│
├───dist
│   │
│   ├───assets
│   │   │
│   │   ├───favicons   // favicons collection folder (generated by Webpack Favicon plugin)
│   │   │
│   │   ├───fonts
│   │   │
│   │   └───images
│   │
│   ├───css
│   │
│   ├───js
│   │
│   │   robots.txt
│   │   sitemap.xml
│   │   index.html   // result HTML file
│   └───
├───
│
│   .editorconfig   // editor basic setup for IDE
│   babel.config.js   // Babel configuration
│   commitlint.config.ts   // Commit linting configuration
│   jsconfig.json   // JS configuration file for indicating directory root, aliases setup, etc.
│   tsconfig.json   // TS configuration file for indicating basic setup, including directory root, aliases setup, etc.
│   package.json
│   package-lock.json
│   .gitignore
│   LICENSE
│   README.md
└───

⬆️ back to top

Additional documentation

Folders README

Name	Description
Config README	general configuration setup
Source README	major source of truth for Source folder

Project Docs

Name	Description
Branching Strategy & CI/CD	Project's branching strategy info and CI/CD approach description
TypeScript	Project's TypeScript usage details and general Code Convention
PWA	Project's PWA support information (tech stack, build process, etc.)
Testing	Project's testing approaches (Unit+Integration, E2E) + according CI/CD quality gates description
Typography	Project's typography configuration and conventions

UI Components Library

Project's UI components library, created with StoryBook, could be found here

Issues

Find a bug or enhancement and want provide help? Please submit an issue.

License

MIT Aliaksei's Curriculum Vitae project

⬆️ back to top