{"id":30444902,"url":"https://github.com/irisgve/traffic-lights","last_synced_at":"2026-05-08T16:51:56.601Z","repository":{"id":38699123,"uuid":"208217946","full_name":"irisgve/traffic-lights","owner":"irisgve","description":"Simulates a set of traffic lights at an intersection","archived":false,"fork":false,"pushed_at":"2022-12-07T00:28:45.000Z","size":1449,"stargazers_count":0,"open_issues_count":14,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-03-07T09:57:03.133Z","etag":null,"topics":["angular","rxjs","typescript"],"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/irisgve.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-09-13T07:38:16.000Z","updated_at":"2019-09-13T07:47:44.000Z","dependencies_parsed_at":"2023-01-24T12:32:29.265Z","dependency_job_id":null,"html_url":"https://github.com/irisgve/traffic-lights","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/irisgve/traffic-lights","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irisgve%2Ftraffic-lights","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irisgve%2Ftraffic-lights/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irisgve%2Ftraffic-lights/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irisgve%2Ftraffic-lights/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/irisgve","download_url":"https://codeload.github.com/irisgve/traffic-lights/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/irisgve%2Ftraffic-lights/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271746654,"owners_count":24813575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["angular","rxjs","typescript"],"created_at":"2025-08-23T10:29:49.204Z","updated_at":"2025-11-09T02:31:52.721Z","avatar_url":"https://github.com/irisgve.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Traffic Demo [![build status](https://gitlab.com/nesiri/trafficlights/badges/master/build.svg)](https://gitlab.com/nesiri/trafficlights/commits/master) [![coverage report](https://gitlab.com/nesiri/trafficlights/badges/master/coverage.svg)](https://gitlab.com/nesiri/trafficlights/commits/master)\n\n![Traffic Light Intersection Demo][demo]\n\n[demo]: https://media.giphy.com/media/3og0IM2KdNhXh4OXpS/giphy.gif\n\nThis traffic demo project simulates a set of traffic lights at an intersection. The traffic lights are designated (N, S) and (E, W) like a compass.\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.\n\n## Project Specifications\n* When switching from green to red, the yellow light must be displayed for 30 seconds prior to it switching to red and the opposite direction switching to green from red.\n* The lights will change automatically every 5 minutes.\n\n# Table of Contents\n\n- [Prerequisites](#prerequisites)\n- [Starting the application](#starting-the-application)\n- [Running unit tests](#running-unit-tests)\n- [Implementation](#implementation)\n- [Intersection State Machine](#intersection-state-machine)\n- [Technology Stack](#technology-stack)\n- [Results](#results)\n\n# Prerequisites\n\nThis project **strongly requires node \u003e=v6.9.0 and npm \u003e=3.10.3**. More info on Node and NPM installation [here](https://docs.npmjs.com/getting-started/installing-node).\n\n# Starting the application\n\nOnce you have installed the necessary prerequisites, run `npm run start` to initialize a local server that hosts the application. Navigate then to `http://localhost:4200/`.\n\n# Running unit tests\n\n![Unit Tests][karma]\n\n[karma]: http://i.imgur.com/u6hApoq.png\n\nThe unit tests are implemented using [Karma](https://karma-runner.github.io) and [Jasmine](https://jasmine.github.io). You can run the unit tests by running `npm run test`. This will open up a Chrome browser debugger and display a visual result of the tests.\n\n# Implementation\n* Strictly implements a traffic intersection that has four lights (N/S/W/E) and that North-South lights keep the same state as well as East-West lights\n* Traffic direction is only from North to South, South to North and East to West, West to East\n* North-South traffic state is opposite of East-West, that is, state of both direction depends on each other\n* One cycle is set to be 5 minutes. Red Light is set for 300 seconds, Yellow Light is set for 30 seconds and Green Light is set for 270 seconds to complete a cycle.\n\n## Intersection State Machine\n\nThe logic assumes the following state machine logic as follows:\n\nState          | North-South   | East-West   | Duration (secs)\n-------------  | ------------  |-----------  |-------\n0 - GreenRed   | Green         | Red         | 270\n1 - YellowRed  | Yellow        | Red         | 30\n2 - RedGreen   | Red           | Green       | 270\n3 - RedYellow  | Red           | Yellow      | 30\n\nIt changes state according to which light duration is shorter, i.e. on GreenRed state, Green has duration of 270s and Red has duration 300s. The 270s duration then is selected.\n\n## Technology Stack\n\nAs stated above, this is generated by the `@angular/cli` for ease of scaffolding and project setup and in consequence uses the ff technologies:\n - Angular 4\n - Typescript\n - Karma/Jasmine\n - Webpack\n - RxJS\n\nThe relevant code is mostly inside `app/*`. This project can also take in environment-based cycle time, i.e. 5 mins can be changed to x mins easily in `environments/*`.\n\n`app/app.component.ts`\n\nThe overall view with the traffic lights are constructed inside `app.component.ts`. This is also where the traffic light controller and logger service are instantiated.\n\n`app/traffic-light/traffic-light.component.ts`\n\nThis is a single component that contains the traffic light \"image\". The image, however, has been purely constructed out of CSS (credits to this [codepen](https://codepen.io/abruzzi/pen/cEfGi)). It accepts an input state (which light to show) and a title.\n\n`app/core/traffic-logger.service.ts`\n\nThe service that logs the traffic intersection state every minute and exposes a `log` method that a consumer client can call whenever to log a state update.\n\n`app/core/traffic-intersection-controller.service.ts`\n\nThe service that controls the intersection. It exposes an `intersection` subject that consumers can subscribe to whenever the intersection state changes. It is very specific to the logic of having an intersection with North-South and East-West direction.\n\n## Results\n\nThese are the resulting logs for 30 minutes (ran from 9:12am to 9:42am). The overall results, including the demo image and the unit test results image are located in the `results/*` directory.\n```\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:12:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:13:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:14:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:15:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:16:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:16:58 GMT+0800 (+08)---\n      North: yellow\n      South: yellow\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:17:28 GMT+0800 (+08)---\n      North: yellow\n      South: yellow\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:17:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:18:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:19:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:20:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:21:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:21:58 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: yellow\n      West: yellow\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:22:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: yellow\n      West: yellow\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:22:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:23:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:24:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:25:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:26:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:26:58 GMT+0800 (+08)---\n      North: yellow\n      South: yellow\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:27:28 GMT+0800 (+08)---\n      North: yellow\n      South: yellow\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:27:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:28:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:29:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:30:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:31:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:31:58 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: yellow\n      West: yellow\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:32:32 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: yellow\n      West: yellow\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:32:32 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:33:36 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:34:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:35:29 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:36:28 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:37:08 GMT+0800 (+08)---\n      North: yellow\n      South: yellow\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:37:28 GMT+0800 (+08)---\n      North: yellow\n      South: yellow\n      East: red\n      West: red\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:37:43 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:38:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:39:30 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:40:37 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:41:31 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: green\n      West: green\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:42:13 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: yellow\n      West: yellow\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:42:28 GMT+0800 (+08)---\n      North: red\n      South: red\n      East: yellow\n      West: yellow\n\ntraffic-logger.service.ts:16 ---Traffic Status Update at Tue Apr 18 2017 09:42:43 GMT+0800 (+08)---\n      North: green\n      South: green\n      East: red\n      West: red\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firisgve%2Ftraffic-lights","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Firisgve%2Ftraffic-lights","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firisgve%2Ftraffic-lights/lists"}