{"id":21721237,"url":"https://github.com/mightyhorst/sca-dev-test","last_synced_at":"2026-04-06T09:32:15.034Z","repository":{"id":39345288,"uuid":"216339727","full_name":"mightyhorst/sca-dev-test","owner":"mightyhorst","description":"SCA React Test - the React micro client ","archived":false,"fork":false,"pushed_at":"2022-12-11T10:41:14.000Z","size":2316,"stargazers_count":0,"open_issues_count":28,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-03T14:36:30.599Z","etag":null,"topics":["docker","nginx","react","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mightyhorst.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-20T09:51:21.000Z","updated_at":"2019-10-24T14:25:46.000Z","dependencies_parsed_at":"2022-09-11T07:23:22.617Z","dependency_job_id":null,"html_url":"https://github.com/mightyhorst/sca-dev-test","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mightyhorst/sca-dev-test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mightyhorst%2Fsca-dev-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mightyhorst%2Fsca-dev-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mightyhorst%2Fsca-dev-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mightyhorst%2Fsca-dev-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mightyhorst","download_url":"https://codeload.github.com/mightyhorst/sca-dev-test/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mightyhorst%2Fsca-dev-test/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31466609,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-06T08:36:52.050Z","status":"ssl_error","status_checked_at":"2026-04-06T08:36:51.267Z","response_time":112,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","nginx","react","typescript","webpack"],"created_at":"2024-11-26T02:14:48.258Z","updated_at":"2026-04-06T09:32:15.018Z","avatar_url":"https://github.com/mightyhorst.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SCA Dev Test - React App\n[![CircleCI](https://circleci.com/gh/cypress-io/cypress-and-jest-typescript-example.svg?style=svg)](https://circleci.com/gh/cypress-io/cypress-and-jest-typescript-example)\n\nReact App for the SCA Dev Test using Jest and Cypress with TypeScript\n\n\n# Quick Start \n### Quick Links \n| 🦄 | URL |\n| --- | --- |\n| `API Microservice` | https://github.com/mitni455/sca-dev-test-bff-microservice |\n| `Staging` | https://todo.com |\n| `Storybook` | https://sca-story.surge.sh |\n\n\n### Running locally\n* Run with Docker \n```bash\ndocker-compose up  \n```\n\n* Run without Docker \n```bash\n# with yarn\nyarn \nyarn run start:dev\n\n# or with npm\nnpm i \nnpm run start:dev\n```\n\n\u003e be sure to edit the `.env` if you run locally \n\n### Testing\nRun all tests \n```bash\n# with yarn\nyarn test\n\n# or with npm\nnpm test\n```\n\n### Storybook\nCheckout the Storybook\n```bash\n# with yarn\nyarn run story\n\n# or with npm\nnpm run story\n```\n\n\n\n\n# Architecture\n### AWS Environments\n![AwsArchitecture](https://i.ibb.co/z2P0rZy/aws-architecture.jpg)\n\nWe will use AWS for our stack, and only implement a staging environment to save on cost. By using `AWS Cloudformation` we have the ability to easily spin up and tear down complete stacks at will both from the developer's cli or from out CICD pipeline. \n\n| IaaS | Description |\n| --- | --- |\n| `Elastic Container Registry (ECR)` | We will use this for our Docker container registry |\n| `Elastic Container Service (ECS)` | This is the cluster where our Dockerized containers will run. We could also use EKS (Kubernetes) but man, is it overkill |\n| `LoadBalancer` | Poke a whole in the private network into our VPC and expose the Dockerized Node and/or React app. This helps us scale up and down with multiple containers as our scale grows. |\n\n\n### Docker Multi Stage Build\nWe have Dockerfiles optimised for the `dev` local docker machine and `prod` which will be deployed to `AWS` environment for ```QA, UAT, Staging/PreProd and Prod```. Ideally I want one Dockerfile but Docker multi build doesn't support if/else logic yet. \n\n![Docker Mutli Stage Build](https://i.ibb.co/g93MfFk/docker-multi-stage-build.png)\n\n| Stage | Description |\n| --- | --- |\n| `Build` |  Universal build |\n| `Build4Prod` |  Build for Production |\n| `Quality` | `optional` Code Quality and Security | \n| `Test` |  Lint, Test and Code Coverage  |\n| `Dev` |  Docker optimised for Dev environment with nodemon, used for Developers desktop with hot loading et al  |\n| `Prod` |  Production ready minified and optimised and SSR for `nginx`   |\n\n\n\n# Project Plan \nLet's plan our sprint. We'll use Github project board available here [https://github.com/mitni455/sca-dev-test/projects/1](https://github.com/mitni455/sca-dev-test/projects/1)\nand the [milestones](https://github.com/mitni455/sca-dev-test/milestones)\n\n![Project Plan](https://i.ibb.co/X3N1SxB/Screen-Shot-2019-10-22-at-4-22-56-AM.png)\n\n### User Stories \nSo the way I translate the wireframes to User Stories, and User Stories to code is as follows. \n\n![Semantic Commit Workflow](https://i.ibb.co/9sy2spT/smart-commits.png)\n\u003e a similar pattern with Jira \n\n* Break the UI up into components. These include Layouts (Pages), components/containers and state management/services\n* A User Story is the smallest thing you can ship to the end user that isnt weirdly out of place or doesn't work. e.g. if you put a button in prod with no handler the User would think it's broken. I typically try strip all the stuff out and say \"would this add any value to end user?\" \n* Definition of Done (DoD) is the Acceptance Criteria (AC). AC is written in Gherkin syntax (`GIVEN/WHEN/THEN`) so it can be converted immediately into code stubs (`cucumber` with `Cypress` for e2e and `Jest` for Unit Tests). \n* Features and User Stories are the same thing. I dont try differentiaite the two. Does a feature have multiple stories or Stories multiple features... Dont waste your brain cycles. It just depends. \n* That said I always branch for each User Story, hence the `feat(feature id): User Story`\n* Use `semantic commits` with the following syntax: \n```\ngit checkout -b feature/{user story}\ngit commit -am \"feat(sub task): add (not added) feature here\" \n```\nHow to: [Semantic Commits](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)\n\n\n\n### Epics\n---\n#### Epic: As a DEV, I want to setup my project\n##### feat(setup): As a DEV, I want to setup with NextJs, so I can have a next gen platform\n- [ ] `NextJs with Typescript`\n- [ ] `Setup storybook`\n- [ ] `Setup linting`\n- [ ] `Setup semantic commits cli`\n- [ ] `Setup semantic release cli`\n- [ ] `Install Material UI`\n\n##### feat(tdd): As a DEV, I want to setup my test suite, so I can TDD with Jest and UI test with Enzyme \n\n- [ ] `Jest with Typescript`\n- [ ] `install Enzyme for UI test`\n- [ ] `install nyc for test coverage`\n\n##### feat(bdd): As a DEV, I want to setup Cucumber and Cypress.io, so that I have integration and e2e tests\n\n- [ ] `install Cucumber `\n- [ ] `install Cypress `\n- [ ] `install Cucumber with Jest`\n- [ ] `install Cucumber with Cypress `\n\n##### feat(aws): As a DEV, I want my environments setup on AWS, so that I can have a scalable cloud with different environments\n\n- [ ] `We will use AWS Cloudformation to CRUD the Infrastructire`\n- [ ] `Create an ECR stack script and yaml`\n- [ ] `Update ECR stack script and yaml`\n- [ ] `Delete the ECR stack`\n- [ ] `Create an Loadbalancer stack script and yaml`\n- [ ] `Update Loadbalancer stack script and yaml`\n- [ ] `Delete the Loadbalancer stack script and yaml`\n- [ ] `scripts for TravisCI to share AWS credentials`\n\n\n\n##### feat(cicd): As a DEV, I want a CICD pipeline setup, so that I can auto deploy to environment\n\n- [ ] `Setup CircleCI`\n- [ ] `init circle ci config`\n- [ ] `Multibuild Docker for Production`\n- [ ] `build deploy master branch to Heroku`\n- [ ] `semantic release`\n\n\n---\n\n#### Epic: As a User, I want some pages\n##### feat(SubmissionPage): As a USER, I want a Subscription confirmation page, so that I can make sure I filled in the page correctly\n###### Todo \n- [ ] `BDD acceptance criteria gherkins`\n- [ ] `BDD Cucumber steps`\n- [ ] `TDD UI tests with Enzyme`\n- [ ] `TDD Unit tests with Jest`\n- [ ] `Routing`\n\n###### Acceptance Criteria \n```\nFeature: Submission Page \n\nScenario: Go to the Submission Page\n  Given I am on the Submission Page\n  Then I should see confirmation message \n```\n\n---\n\n\n##### feat(Homepage): As USER, I want a Homepage, so that I can mount the form \n###### Todo \n- [ ] `BDD acceptance criteria gherkins`\n- [ ] `BDD Cucumber steps`\n- [ ] `TDD UI tests with Enzyme`\n- [ ] `TDD Unit tests with Jest`\n- [ ] `Routing`\n\n###### Acceptance Criteria \n```\nFeature: Homepage\n\nScenario: Go to the Homepage\n  Given I am on the Homepage\n  Then I should see the form loaded\n  And I should see the header \n```\n\n\n---\n\n#### Epic: As a User, I want a  Register form\n\n\n##### feat(FormLayout): As USER, I want a responsive register form layout, so that I can use it on all devices\n###### Todo \n- [ ] `BDD acceptance criteria gherkins`\n- [ ] `BDD Cucumber steps`\n- [ ] `TDD UI tests with Enzyme`\n- [ ] `TDD Unit tests with Jest`\n- [ ] `install Material UI`\n- [ ] `Install Formik`\n\n###### Acceptance Criteria \n```\nFeature: Register Form Layout\n\nScenario: Responsive layout for full screen\n  Given I am on the Homepage\n  When the window is full width \n  Then I should see the form visible\n\nScenario: Responsive layout for full screen\n  Given I am on the Homepage\n  When the window is laptop mode \n  Then I should see the form visible\n\nScenario: Responsive layout for tablet\n  Given I am on the Homepage\n  When the window is in tablet landscape mode\n  Then I should see the form visible\n\nScenario: Responsive layout for tablet\n  Given I am on the Homepage\n  When the window is in tablet portrait mode\n  Then I should see the form visible\n\nScenario: Responsive layout for full screen\n  Given I am on the Homepage\n  When the window is mobile landscape screen \n  Then I should see the form visible\n\nScenario: Responsive layout for full screen\n  Given I am on the Homepage\n  When the window is mobile tablet screen \n  Then I should see the form visible\n\n```\n\n##### feat(firstname): As USER, I want a first name field, so that I can fill it in\n###### Todo \n- [ ] `BDD acceptance criteria gherkins`\n- [ ] `BDD Cucumber steps`\n- [ ] `TDD UI tests with Enzyme`\n- [ ] `TDD Unit tests with Jest`\n- [ ] `Material Textfield`\n- [ ] `Formik Textfield` \n\n###### Acceptance Criteria \n```\nFeature: Register form firstname\n\nScenario: Firstname field mounted\n  Given I am on the Homepage\n  When the page is loaded  \n  Then I should see the firstname field\n\nScenario: Valid Firstname field input\n  Given I am on the Homepage\n  When the input field has valid input \n  Then I should see no validation error \n\nScenario: InValid Firstname field input\n  Given I am on the Homepage\n  When the input field has valid input \n  Then I should see a validation error\n```\n\n##### feat(lastname): As USER, I want a last name field, so that I can fill it in\n###### Todo \n- [ ] `BDD acceptance criteria gherkins`\n- [ ] `BDD Cucumber steps`\n- [ ] `TDD UI tests with Enzyme`\n- [ ] `TDD Unit tests with Jest`\n- [ ] `Material Textfield`\n- [ ] `Formik Textfield` \n\n###### Acceptance Criteria \n```\nFeature: Register form lastname\n\nScenario: lastname field mounted\n  Given I am on the Homepage\n  When the page is loaded  \n  Then I should see the lastname field\n\nScenario: Valid lastname field input\n  Given I am on the Homepage\n  When the input field has valid input \n  Then I should see no validation error \n\nScenario: InValid lastname field input\n  Given I am on the Homepage\n  When the input field has valid input \n  Then I should see a validation error\n```\n\n##### feat(email): As USER, I want an email field, so that I can fill it in\n###### Todo \n- [ ] `BDD acceptance criteria gherkins`\n- [ ] `BDD Cucumber steps`\n- [ ] `TDD UI tests with Enzyme`\n- [ ] `TDD Unit tests with Jest`\n- [ ] `Material Textfield`\n- [ ] `Formik Textfield` \n\n###### Acceptance Criteria \n```\nFeature: Register form email\n\nScenario: email field mounted\n  Given I am on the Homepage\n  When the page is loaded  \n  Then I should see the email field\n\nScenario: Valid email field input\n  Given I am on the Homepage\n  When the input field has valid input \n  Then I should see no validation error \n\nScenario: InValid email field input\n  Given I am on the Homepage\n  When the input field has valid input \n  Then I should see a validation error\n```\n\n##### feat(phone): As USER, I want a Mobile phone field, so that I can fill it in\n###### Todo \n- [ ] `BDD acceptance criteria gherkins`\n- [ ] `BDD Cucumber steps`\n- [ ] `TDD UI tests with Enzyme`\n- [ ] `TDD Unit tests with Jest`\n- [ ] `Material Textfield`\n- [ ] `Formik Textfield` \n\n###### Acceptance Criteria \n```\nFeature: Register form phone\n\nScenario: Mobile phone field mounted\n  Given I am on the Homepage\n  When the page is loaded  \n  Then I should see the phone field\n\nScenario: Valid Mobile phone field input\n  Given I am on the Homepage\n  When the input field has valid input \n  Then I should see no validation error \n\nScenario: InValid Mobile phone field input\n  Given I am on the Homepage\n  When the input field has valid input \n  Then I should see a validation error\n```\n\n##### feat(RegisterService): As USER, I want a Form API, so that I can submit the form or show any server side errors \n###### Todo \n- [ ] `BDD acceptance criteria gherkins`\n- [ ] `BDD Cucumber steps`\n- [ ] `TDD UI tests with Enzyme`\n- [ ] `TDD Unit tests with Jest`\n- [ ] `Install axios`\n- [ ] `Handle Validation Errors from Server`\n- [ ] `Handle 400 errors from server`\n- [ ] `Handle 500 errors from Server`\n\n###### Acceptance Criteria \n```\nFeature: Register form API service\n\nScenario: Register API successfully\n  Given I am on the Homepage\n  When I submit the form correctly \n  Then I should get 200 \n\nScenario: Handle Validation errors\n  Given I am on the Homepage\n  When I submit the form incorrectly\n  Then I should see validation error \n\n```\n\n\n---\n## Runtime setup\n- `Next.Js`: used for modern react \n- `Docker`: container for consistent dev and prod environments \n\n\n## test setup\n- `jest.config.js`: use `ts-jest` to test TypeScript files; use mocks for imported CSS/LESS files; use TypeScript compiler to handle both TS/JS files\n- `jest.setup.js`: use `enzyme` to test the rendered component \n- `tsconfig.jest.json`: allow JavaScript files (e.g., `jest.setup.js`) during the test\n- `next.config.js`: just an ordinary Next.js config (with TypeScript and CSS support)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmightyhorst%2Fsca-dev-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmightyhorst%2Fsca-dev-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmightyhorst%2Fsca-dev-test/lists"}