{"id":15606279,"url":"https://github.com/paulfioravanti/survey_tool_elm","last_synced_at":"2025-10-13T13:31:04.137Z","repository":{"id":145917443,"uuid":"129675192","full_name":"paulfioravanti/survey_tool_elm","owner":"paulfioravanti","description":"Culture Amp's Survey Tool Front End Developer Coding Test","archived":true,"fork":false,"pushed_at":"2023-12-07T04:54:43.000Z","size":4411,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-30T12:38:19.674Z","etag":null,"topics":["api","coding-test","elixir","elm","elm-coverage","elm-test","i18n","json","survey"],"latest_commit_sha":null,"homepage":"","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paulfioravanti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-16T02:45:37.000Z","updated_at":"2024-10-02T14:14:03.000Z","dependencies_parsed_at":"2023-12-07T05:40:05.836Z","dependency_job_id":null,"html_url":"https://github.com/paulfioravanti/survey_tool_elm","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/paulfioravanti/survey_tool_elm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulfioravanti%2Fsurvey_tool_elm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulfioravanti%2Fsurvey_tool_elm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulfioravanti%2Fsurvey_tool_elm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulfioravanti%2Fsurvey_tool_elm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paulfioravanti","download_url":"https://codeload.github.com/paulfioravanti/survey_tool_elm/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulfioravanti%2Fsurvey_tool_elm/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279015312,"owners_count":26085684,"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-10-13T02:00:06.723Z","response_time":61,"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":["api","coding-test","elixir","elm","elm-coverage","elm-test","i18n","json","survey"],"created_at":"2024-10-03T04:21:49.481Z","updated_at":"2025-10-13T13:31:03.657Z","avatar_url":"https://github.com/paulfioravanti.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status][Build Status image]][Build Status url]\n\n# Survey Tool Front End Developer Coding Test\n\nAn [Elm][] application that retrieves survey result information from a [JSON][]\n[API][], and displays the results.\n\n![Screenshot][screenshot url]\n\nI also wrote implementations of the companion back-end developer test to this\nfront-end test in [Elixir][] and [Ruby][], which can be found at the following:\n\n- \u003chttps://github.com/paulfioravanti/survey_tool_elixir\u003e\n- \u003chttps://github.com/paulfioravanti/survey_tool_ruby\u003e\n\nMy review of the coding tests can be found in the following blog post:\n\n- _[Coding Test Review: Culture Amp][]_\n\n## Setup\n\n```console\ngit clone https://github.com/paulfioravanti/survey_tool_elm.git\ncd survey_tool_elm\n```\n\n## Back end\n\nThe back end is an [Elixir][] app that uses [Plug.Cowboy][] to serve the JSON\nfiles expected by the front end.\n\n### Dependencies\n\n- [Elixir][] 1.15.7 ([asdf-elixir pre-compiled version][]: 1.15.7-otp-26)\n- [Erlang][] 26.1.2\n\n### Setup\n\n```console\ncd back_end\nmix deps.get\n```\n\n### Run Server\n\n```console\nmix run --no-halt\n```\n\nNow, you should be able to open the following links and get the appropriate\nJSON response:\n\n- \u003chttp://localhost:4000/survey_results\u003e\n- \u003chttp://localhost:4000/survey_results/1\u003e\n- \u003chttp://localhost:4000/survey_results/2\u003e\n\nOther addresses should return an error JSON object.\n\nFor easy reading of JSON objects in a browser, I recommend the\n[JSON Formatter][] extension for Google Chrome.\n\n### Run Tests\n\nThe back end server has a small suite of tests, written with [ExUnit][], that\ncan be run with:\n\n```console\nmix test\n```\n\n[`mix test.watch`][] was used during development, so that can also be used here\nto continuously run tests on file changes.\n\n## Front end\n\nThe front end is an [Elm][] application that displays the survey result data.\nIt uses [Tachyons][] for functional CSS styling and responsive layouts for\nmobile and desktop screens, making this front/back end combo one \"P\" short of\nthe [PETE stack][] (I figured making the back end a [Phoenix][] application\nwould have been overkill).\n\n### Dependencies\n\n- [Elm][] 0.19.1\n- [NodeJS][] 21.2.0\n\n### Setup\n\n#### Global Setup\n\nI used the following global npm packages during development, so I recommend\ninstalling them to be able to run all application and testing commands:\n\n- [Create Elm App][]\n- [elm-test][]\n- [elm-verify-examples][]\n- [Elm Coverage][]\n- [Elm Analyse][]\n\nInstall:\n\n```console\nnpm install -g elm-test create-elm-app elm-verify-examples elm-coverage elm-analyse\n```\n\nIn order to get `mix test.watch`-like functionality with Elm, I used:\n\n- [`just`][]\n- [watchexec][]\n\nThey can both be installed with [Homebrew][]:\n\n```console\nbrew install just watchexec\n```\n\n#### Application Setup\n\n```console\ncd front_end\nnpm install\ncp .env.example .env\n```\n\nIn development, if you want to serve up the back end JSON application from a\nlocation other than \u003chttp://localhost:4000\u003e, then you can\nconfigure that in the `.env` file.\n\n### Run Server\n\n```console\nNODE_OPTIONS=--openssl-legacy-provider elm-app start\n```\n\n\u003e The `--openssl-legacy-provider` option is needed until\n\u003e [this issue][create-elm-app#604] gets addressed.\n\nNow, you should be able to use the app at the following address:\n\n- \u003chttp://localhost:3000\u003e\n\n(Make sure you also have the back end server running to actually see the\nsurvey results).\n\n### Run Tests\n\nStraight tests:\n\n```console\nelm-test\n```\n\nVerified examples (doctests):\n\n```console\nelm-verify-examples\n```\n\nRun tests and generate code coverage report.  \n\n\u003e Coverage is currently stuck at 99% because there is no way to\ngenerate a `Navigation.Key` for `Browser.application` apps in a test\nenvironment. Hopefully, that will be fixed one day, but the issue to follow is\n[here](https://github.com/elm-explorations/test/issues/24).\n\n```console\nelm-coverage\nopen .coverage/coverage.html\n```\n\nRun Elm Analyse confirm best practices are being adhered to:\n\n```console\nelm-analyse\n```\n\nNote: it may take a while for the `elm-css` library to be loaded the first\ntime this is run, so give it potentially about 10 minutes.\n\n#### Development Mode (optional)\n\nIf you're using this app in development, you could do the following:\n\nUse `just` and `watchexec` to run both `elm-verify-examples` and `elm-test`\nwhen any `src` code is modified:\n\n```console\nwatchexec --watch src --clear=reset just test\n```\n\nUse `just` and `watchexec` to run both `elm-verify-examples` and `elm-coverage`\n(which runs `elm-test`) when any tests are modified. The `src` directory is not\nincluded here because `elm-coverage` ends up touching every `src` file during\nits instrumentation phase, leading to infinite loops:\n\n```console\nwatchexec --watch tests --ignore tests/elm-package.json --clear=reset just coverage\n```\n\n## Other\n\nIf you are a [Tmuxinator][] user, you can find my config for this project\n[here][tmuxinator-config].\n\n[asdf-elixir pre-compiled version]: https://github.com/asdf-vm/asdf-elixir#elixir-precompiled-versions\n[API]: https://en.wikipedia.org/wiki/Application_programming_interface\n[Build Status image]: https://github.com/paulfioravanti/survey_tool_elm/actions/workflows/ci.yml/badge.svg\n[Build Status url]: https://github.com/paulfioravanti/survey_tool_elm/actions/workflows/ci.yml\n[Coding Test Review: Culture Amp]: https://www.paulfioravanti.com/blog/coding-test-review-culture-amp/\n[Create Elm App]: https://github.com/halfzebra/create-elm-app\n[create-elm-app#604]: https://github.com/halfzebra/create-elm-app/issues/604\n[Elixir]: https://github.com/elixir-lang/elixir\n[Elm]: http://elm-lang.org/\n[Elm Analyse]: https://github.com/stil4m/elm-analyse\n[Elm Coverage]: https://github.com/zwilias/elm-coverage\n[`elm-app build`]: https://github.com/halfzebra/create-elm-app#elm-app-build\n[elm-test]: https://github.com/elm-community/elm-test\n[elm-verify-examples]: https://github.com/stoeffel/elm-verify-examples\n[Erlang]: https://www.erlang.org/\n[ExUnit]: https://hexdocs.pm/ex_unit/ExUnit.html\n[Homebrew]: https://brew.sh/\n[JSON]: https://www.json.org/\n[JSON Formatter]: https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa\n[`just`]: https://github.com/casey/just\n[`mix test.watch`]: https://github.com/lpil/mix-test.watch\n[NodeJS]: https://nodejs.org/en/\n[PETE stack]: https://github.com/dwyl/technology-stack#the-pete-stack\n[Phoenix]: http://phoenixframework.org/\n[Plug.Cowboy]: https://github.com/elixir-plug/plug_cowboy\n[Ruby]: https://github.com/ruby/ruby\n[screenshot url]: ./elm-show-survey-screenshot.png\n[survey-tool-ruby]: https://github.com/paulfioravanti/survey_tool_ruby\n[Tachyons]: http://tachyons.io/\n[Tmuxinator]: https://github.com/tmuxinator/tmuxinator\n[tmuxinator-config]: https://github.com/paulfioravanti/dotfiles/blob/master/tmuxinator/survey_tool_elm.yml\n[watchexec]: https://github.com/mattgreen/watchexec\n\n---\n\n# Requirements\n\n# Culture Amp’s Front End Developer Coding Test\n\nThis repository contains a small number of static JSON files, which represent the responses from an HTTP API that offers access to a database of survey results.\n\nYour task is to build a web front end that displays the data supplied by this API. You must process the survey data and display the results in a clear, usable interface.\n\n## Getting Started\n\nWe suggest you start by setting up an HTTP server that will serve up these JSON files upon request. This may be the same server that serves your web application to consume the API, but make sure to design your application in such a way that you could easily point it to an arbitrary base URL for the API, somewhere else on the Internet.\n\nOne you’ve got the API available, use whatever client-side libraries or frameworks you like to build the application that consumes it.\n\n(Tip: If your application will access the API directly from the browser, using the same server for both your application and the API it consumes will save you having to deal with cross-origin requests. Of course, if you enjoy that sort of thing, feel free to go for it!)\n\n## The API\n\n`index.json` is returned when you send a GET request for the root URL. It returns a list of the surveys that are stored in the database, and high-level statistics for each. For each survey, a URL is included that points to one of the other JSON files.\n\nThe remaining JSON files each provide full response data for one of these surveys. Each survey is broken into one or more themes, each theme contains one or more questions and each question contains a list of responses. A response represents an individual user (`\"respondent_id\"`) answering an individual question (`\"question_id\"`). The content of each response represents an agreement rating on a scale of `\"1\"` (strongly disagree) to `\"5\"` (strongly agree). If you wished, you could obtain all of the responses for a single user by consulting all of the responses with that user’s `\"respondent_id\"`.\n\n## Requirements\n\nYour application should include:\n\n* a page that lists all of the surveys and allows the user to choose one to view its results;\n* a page that displays an individual survey’s results, including:\n    - participation rate as a percentage\n    - the average rating (from 1 to 5) for each question\n\nResponses with an empty rating should be considered non-responses (questions skipped by the survey respondent). These responses should be excluded when calculating the average.\n\nYou can deliver a set of static HTML pages that consume the API data with JavaScript, but keep in mind that we need to be able to read your code, so if you’re compiling your JavaScript in any way, please include your source code too. Alternatively, if you want to build an application that runs on its own web server, that’s okay too.\n\n## Recommendations\n\n* Be creative in considering the right way to display the results.\n* Feel free to use frameworks and libraries, but keep in mind that we are looking for something that demonstrates that you can write good front-end code, not just wire up a framework.\n* Static JSON files load pretty quickly, but not all web APIs are so performant. Consider how your application will behave if the API is slow.\n* Include a README file with clear build instructions that we can follow.\n* Include in your README any other details you would like to share, such as tradeoffs you chose to make, what areas of the problem you chose to focus on and the reasons for your design decisions.\n* We like tests.\n\nBeyond meeting the minimum requirements above, it’s up to you where you want to focus. We don’t expect a fully-finished, production-quality web application; rather, we’re happy for you to focus on whatever areas you feel best showcase your skills.\n\n## Submitting your solution\n\nAssuming you use Git to track changes to your code, when you’re ready to submit your solution, please use `git bundle` to package up a copy of your repository (with complete commit history) as a single file and send it to us as an email attachment. \n\n```\ngit bundle create front-end-coding-test.bundle master\n```\n\nWe're looking forward to your innovative solutions!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulfioravanti%2Fsurvey_tool_elm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaulfioravanti%2Fsurvey_tool_elm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulfioravanti%2Fsurvey_tool_elm/lists"}