├── .github ├── workflows │ └── sync-labels.yml └── labels.yml ├── .appends └── .github │ └── labels.yml ├── CODE_OF_CONDUCT.md └── README.md /.github/workflows/sync-labels.yml: -------------------------------------------------------------------------------- 1 | name: Tools 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | paths: 8 | - .github/labels.yml 9 | - .github/workflows/sync-labels.yml 10 | workflow_dispatch: 11 | schedule: 12 | - cron: 0 0 1 * * # First day of each month 13 | 14 | permissions: 15 | issues: write 16 | 17 | jobs: 18 | sync-labels: 19 | uses: exercism/github-actions/.github/workflows/labels.yml@main 20 | -------------------------------------------------------------------------------- /.appends/.github/labels.yml: -------------------------------------------------------------------------------- 1 | # ----------------------------------------------------------------------------------------- # 2 | # These are the repository-specific labels that augment the Exercise-wide labels defined in # 3 | # https://github.com/exercism/org-wide-files/blob/main/global-files/.github/labels.yml. # 4 | # ----------------------------------------------------------------------------------------- # 5 | 6 | - name: "bug" 7 | description: "Something isn't working" 8 | color: "d73a4a" 9 | 10 | - name: "documentation" 11 | description: "Improvements or additions to documentation" 12 | color: "0075ca" 13 | 14 | - name: "duplicate" 15 | description: "This issue or pull request already exists" 16 | color: "cfd3d7" 17 | 18 | - name: "enhancement" 19 | description: "New feature or request" 20 | color: "a2eeef" 21 | 22 | - name: "good first issue" 23 | description: "Good for newcomers" 24 | color: "7057ff" 25 | 26 | - name: "help wanted" 27 | description: "Extra attention is needed" 28 | color: "008672" 29 | 30 | - name: "invalid" 31 | description: "This doesn't seem right" 32 | color: "e4e669" 33 | 34 | - name: "question" 35 | description: "Further information is requested" 36 | color: "d876e3" 37 | 38 | - name: "wontfix" 39 | description: "This will not be worked on" 40 | color: "ffffff" 41 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | ## Introduction 4 | 5 | Exercism is a platform centered around empathetic conversation. We have a low tolerance for communication that makes anyone feel unwelcome, unsupported, insulted or discriminated against. 6 | 7 | ## Seen or experienced something uncomfortable? 8 | 9 | If you see or experience abuse, harassment, discrimination, or feel unsafe or upset, please email [abuse@exercism.org](mailto:abuse@exercism.org?subject=%5BCoC%5D) and include \[CoC\] in the subject line. We will follow up with you as a priority. 10 | 11 | ## Enforcement 12 | 13 | We actively monitor for Code of Conduct (CoC) violations and take any reports of violations extremely seriously. We have banned contributors, mentors and users due to violations. 14 | 15 | After we receive a report of a CoC violation, we view that person's conversation history on Exercism and related communication channels and attempt to understand whether someone has deliberately broken the CoC, or accidentally crossed a line. We generally reach out to the person who has been reported to discuss any concerns we have and warn them that repeated violations will result in a ban. Sometimes we decide that no violation has occurred and that no action is required and sometimes we will also ban people on a first offense. We strive to be fair, but will err on the side of protecting the culture of our community. 16 | 17 | Exercism's leadership reserve the right to take whatever action they feel appropriate with regards to CoC violations. 18 | 19 | ## The simple version 20 | 21 | - Be empathetic 22 | - Be welcoming 23 | - Be kind 24 | - Be honest 25 | - Be supportive 26 | - Be polite 27 | 28 | ## The details 29 | 30 | Exercism should be a safe place for everybody regardless of 31 | 32 | - Gender, gender identity or gender expression 33 | - Sexual orientation 34 | - Disability 35 | - Physical appearance (including but not limited to body size) 36 | - Race 37 | - Age 38 | - Religion 39 | - Anything else you can think of. 40 | 41 | As someone who is part of this community, you agree that: 42 | 43 | - We are collectively and individually committed to safety and inclusivity. 44 | - We have zero tolerance for abuse, harassment, or discrimination. 45 | - We respect people’s boundaries and identities. 46 | - We refrain from using language that can be considered offensive or oppressive (systemically or otherwise), eg. sexist, racist, homophobic, transphobic, ableist, classist, etc. - this includes (but is not limited to) various slurs. 47 | - We avoid using offensive topics as a form of humor. 48 | 49 | We actively work towards: 50 | 51 | - Being a safe community 52 | - Cultivating a network of support & encouragement for each other 53 | - Encouraging responsible and varied forms of expression 54 | 55 | We condemn: 56 | 57 | - Stalking, doxxing, or publishing private information 58 | - Violence, threats of violence or violent language 59 | - Anything that compromises people’s safety 60 | - Conduct or speech which might be considered sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory or offensive in nature. 61 | - The use of unwelcome, suggestive, derogatory or inappropriate nicknames or terms. 62 | - Disrespect towards others (jokes, innuendo, dismissive attitudes) and towards differences of opinion. 63 | - Intimidation or harassment (online or in-person). Please read the [Citizen Code of Conduct](https://github.com/stumpsyn/policies/blob/master/citizen_code_of_conduct.md) for how we interpret harassment. 64 | - Inappropriate attention or contact. 65 | - Not understanding the differences between constructive criticism and disparagement. 66 | 67 | These things are NOT OK. 68 | 69 | Be aware of how your actions affect others. If it makes someone uncomfortable, stop. 70 | 71 | If you say something that is found offensive, and you are called out on it, try to: 72 | 73 | - Listen without interruption. 74 | - Believe what the person is saying & do not attempt to disqualify what they have to say. 75 | - Ask for tips / help with avoiding making the offense in the future. 76 | - Apologize and ask forgiveness. 77 | 78 | ## History 79 | 80 | This policy was initially adopted from the Front-end London Slack community and has been modified since. A version history can be seen on [GitHub](https://github.com/exercism/website-copy/edit/main/pages/code_of_conduct.md). 81 | 82 | _This policy is a "living" document, and subject to refinement and expansion in the future. This policy applies to the Exercism website, the Exercism GitHub organization, any other Exercism-related communication channels (e.g. Slack, Twitter, email) and any other Exercism entity or event._ 83 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **Note: We're temporarily locking this repository to stop abuse. We'll prune and reopen it soon.** 2 | 3 | --- 4 | 5 | # Exercism Frontend Developer Job: Project 6 | 7 | Thanks for wanting to apply for the Frontend Developer Job role! 🥳 8 | 9 | We're expecting a high number of applicants for this role, and so are asking everyone to submit an implementation of a programming challenge that will allow you to demonstrate your CSS and React skills. 10 | 11 | The instructions are below. 12 | If you have questions, you can ask them by opening an issue in this repository (the preferred method), or you can email jeremy@exercism.org (emails will have a slower response time than opening issues). 13 | Once you're done, please follow the instructions in the [job advert](https://exercism.org/about/hiring/front-end-developer-4) to apply. 14 | Good luck! 🙂 15 | 16 | ## Overview 17 | 18 | Your task is to create a page which lists all the testimonials you have given. 19 | It should look like this: 20 | 21 | ![testimonials](https://user-images.githubusercontent.com/286476/153847595-f0ed0d97-8ee5-4a54-9091-e92e92a8f8cd.svg) 22 | 23 | ## Styling 24 | 25 | A key criteria for this job role is how accurately you can replicate designs. 26 | You can access the Figma file with all the information you should need at [https://www.figma.com/file/qvDOfGC4uLDUcjRDaVMIrU/Exercism-Front-end-Job-Project?node-id=0%3A1](https://www.figma.com/file/qvDOfGC4uLDUcjRDaVMIrU/Exercism-Front-end-Job-Project?node-id=0%3A1) (note: you need to be logged into Figma to see the comments). 27 | Note the comments on various components for more information. 28 | 29 | Ideally, you'll use Tailwind 3 for the CSS, but plain CSS is totally fine too. 30 | 31 | Some of the questions asked and answered: 32 | 33 | - Loading indicator: animate as you see fit. 34 | - Testimonials section height: implement as you see fit. 35 | - Track dropdown height: implement as you see fit, we strongly recommend limiting the height. 36 | - Pagination: an example implementation of a similar design: [see exercism.org](https://exercism.org/profiles/ErikSchierboom/contributions). 37 | - Responsive design: No hard requirement, we don't provide a mobile/tablet/4k design for this project. 38 | 39 | ## Functionality 40 | 41 | The functionality should be implemented using React. 42 | Ideally, you'll use TypeScript, but JavaScript is fine too. 43 | Your solution should work at least on evergreen browsers' current version and one version back. 44 | 45 | Please provide some tests as well. 46 | 47 | The areas that should be implemented are: 48 | 49 | - Track selection: 50 | - Clicking the track button (top-left) should open the track selector. 51 | - Clicking on a track within the track selector should update the table accordingly and close the selector. 52 | - The tracks should be filtered to only show the list of tracks on which you have given testimonials. 53 | - Exercise filtering: 54 | - Typing into the exercise box should filter the tracks. 55 | - Consider reducing calls to the API while the user is still typing. 56 | - Sorting: 57 | - There are two sort options: oldest first or newest first. 58 | - Pagination: 59 | - Pagination should be implemented. 60 | - Filtering should update pagination options (i.e. if there are only two pages of Ruby results then the pagination should only show two pages). 61 | - Testimonial: 62 | - Each row should link to an individual testimonial. This page does not need to exist, changing the URL is good enough. 63 | 64 | Other notes: 65 | 66 | - All filtering of the testimonials should be done at the server-side level via API calls. 67 | - You are not expected to implement the functionality of the top-bar, but you may. 68 | - You are not expected to handle empty or error states, but you may. 69 | - Consider the audience of Exercism when making choices. 70 | 71 | ## API Calls 72 | 73 | To get data you can use Exercism's API. There are two endpoints, both which return JSON and neither of which need authentication: 74 | 75 | ### Tracks 76 | 77 | You can retrieve the list of all tracks from: https://exercism.org/api/v2/tracks 78 | 79 | ### Testimonials 80 | 81 | Access the testimonials from: https://exercism.org/api/v2/hiring/testimonials 82 | 83 | You can use the following params to modify which records are returned: 84 | 85 | - `page`: Specify to return a different page (e.g. `2`) of the results (note: page `1` is the first page). 86 | - `track`: Pass a complete track slug (e.g. `python`) to only return the Python track's testimonials. 87 | - `exercise`: Pass a partial exercise name (e.g. `ming`) to only return the exercises that contain the word "ming". 88 | - `order`: Specify either `newest_first` or `oldest_first` (default) to switch the order. 89 | 90 | A complete URL might be `https://exercism.org/api/v2/hiring/testimonials?page=2&track=python&exercise=ming&order=newest_first`. 91 | 92 | The endpoint returns JSON with the following top-level keys: 93 | 94 | - `testimonials`: An object containing information related to the page of testimonials that is to be rendered. 95 | - `results`: The testimonials containing the relevant information to render on the UI. 96 | - `pagination`: Pagination data to allow you to render the pagination section. 97 | - `tracks`: A list of all tracks that this user has given testimonials on. 98 | - `track_counts`: An object mapping tracks to the number of testimonials for that track. 99 | -------------------------------------------------------------------------------- /.github/labels.yml: -------------------------------------------------------------------------------- 1 | # --------------------------------------------------------------- # 2 | # This is an auto-generated file - Do not manually edit this file # 3 | # --------------------------------------------------------------- # 4 | 5 | # This file is automatically generated by concatenating two files: 6 | # 7 | # 1. The Exercism-wide labels: defined in https://github.com/exercism/org-wide-files/blob/main/global-files/.github/labels.yml 8 | # 2. The repository-specific labels: defined in the `.appends/.github/labels.yml` file within this repository. 9 | # 10 | # If any of these two files change, a pull request is automatically created containing a re-generated version of this file. 11 | # Consequently, to change repository-specific labels you should update the `.appends/.github/labels.yml` file and _not_ this file. 12 | # 13 | # When the pull request has been merged, the GitHub labels will be automatically updated by the "Sync labels" workflow. 14 | # This typically takes 5-10 minutes. 15 | 16 | # --------------------------------------------------------------------- # 17 | # These are the Exercism-wide labels which are shared across all repos. # 18 | # --------------------------------------------------------------------- # 19 | 20 | # The following Exercism-wide labels are used to show "tasks" on the website, which will point users to things they can contribute to. 21 | 22 | # The `x:action/` labels describe what sort of work the contributor will be engaged in when working on the issue 23 | - name: "x:action/create" 24 | description: "Work on something from scratch" 25 | color: "ffffff" 26 | 27 | - name: "x:action/fix" 28 | description: "Fix an issue" 29 | color: "ffffff" 30 | 31 | - name: "x:action/improve" 32 | description: "Improve existing functionality/content" 33 | color: "ffffff" 34 | 35 | - name: "x:action/proofread" 36 | description: "Proofread text" 37 | color: "ffffff" 38 | 39 | - name: "x:action/sync" 40 | description: "Sync content with its latest version" 41 | color: "ffffff" 42 | 43 | # The `x:knowledge/` labels describe how much Exercism knowledge is required by the contributor 44 | - name: "x:knowledge/none" 45 | description: "No existing Exercism knowledge required" 46 | color: "ffffff" 47 | 48 | - name: "x:knowledge/elementary" 49 | description: "Little Exercism knowledge required" 50 | color: "ffffff" 51 | 52 | - name: "x:knowledge/intermediate" 53 | description: "Quite a bit of Exercism knowledge required" 54 | color: "ffffff" 55 | 56 | - name: "x:knowledge/advanced" 57 | description: "Comprehensive Exercism knowledge required" 58 | color: "ffffff" 59 | 60 | # The `x:module/` labels indicate what part of Exercism the contributor will be working on 61 | - name: "x:module/analyzer" 62 | description: "Work on Analyzers" 63 | color: "ffffff" 64 | 65 | - name: "x:module/concept" 66 | description: "Work on Concepts" 67 | color: "ffffff" 68 | 69 | - name: "x:module/concept-exercise" 70 | description: "Work on Concept Exercises" 71 | color: "ffffff" 72 | 73 | - name: "x:module/generator" 74 | description: "Work on Exercise generators" 75 | color: "ffffff" 76 | 77 | - name: "x:module/practice-exercise" 78 | description: "Work on Practice Exercises" 79 | color: "ffffff" 80 | 81 | - name: "x:module/representer" 82 | description: "Work on Representers" 83 | color: "ffffff" 84 | 85 | - name: "x:module/test-runner" 86 | description: "Work on Test Runners" 87 | color: "ffffff" 88 | 89 | # The `x:rep/` labels describe the amount of reputation to award 90 | # 91 | # For more information on reputation and how these labels should be used, 92 | # check out https://exercism.org/docs/using/product/reputation 93 | - name: "x:rep/tiny" 94 | description: "Tiny amount of reputation" 95 | color: "ffffff" 96 | 97 | - name: "x:rep/small" 98 | description: "Small amount of reputation" 99 | color: "ffffff" 100 | 101 | - name: "x:rep/medium" 102 | description: "Medium amount of reputation" 103 | color: "ffffff" 104 | 105 | - name: "x:rep/large" 106 | description: "Large amount of reputation" 107 | color: "ffffff" 108 | 109 | - name: "x:rep/massive" 110 | description: "Massive amount of reputation" 111 | color: "ffffff" 112 | 113 | # The `x:size/` labels describe the expected amount of work for a contributor 114 | - name: "x:size/tiny" 115 | description: "Tiny amount of work" 116 | color: "ffffff" 117 | 118 | - name: "x:size/small" 119 | description: "Small amount of work" 120 | color: "ffffff" 121 | 122 | - name: "x:size/medium" 123 | description: "Medium amount of work" 124 | color: "ffffff" 125 | 126 | - name: "x:size/large" 127 | description: "Large amount of work" 128 | color: "ffffff" 129 | 130 | - name: "x:size/massive" 131 | description: "Massive amount of work" 132 | color: "ffffff" 133 | 134 | # The `x:status/` label indicates if there is already someone working on the issue 135 | - name: "x:status/claimed" 136 | description: "Someone is working on this issue" 137 | color: "ffffff" 138 | 139 | # The `x:type/` labels describe what type of work the contributor will be engaged in 140 | - name: "x:type/ci" 141 | description: "Work on Continuous Integration (e.g. GitHub Actions workflows)" 142 | color: "ffffff" 143 | 144 | - name: "x:type/coding" 145 | description: "Write code that is not student-facing content (e.g. test-runners, generators, but not exercises)" 146 | color: "ffffff" 147 | 148 | - name: "x:type/content" 149 | description: "Work on content (e.g. exercises, concepts)" 150 | color: "ffffff" 151 | 152 | - name: "x:type/docker" 153 | description: "Work on Dockerfiles" 154 | color: "ffffff" 155 | 156 | - name: "x:type/docs" 157 | description: "Work on Documentation" 158 | color: "ffffff" 159 | 160 | # This label can be added to accept PRs as part of Hacktoberfest 161 | - name: "hacktoberfest-accepted" 162 | description: "Make this PR count for hacktoberfest" 163 | color: "ff7518" 164 | 165 | # This Exercism-wide label is added to all automatically created pull requests that help migrate/prepare a track for Exercism v3 166 | - name: "v3-migration 🤖" 167 | description: "Preparing for Exercism v3" 168 | color: "e99695" 169 | 170 | # ----------------------------------------------------------------------------------------- # 171 | # These are the repository-specific labels that augment the Exercise-wide labels defined in # 172 | # https://github.com/exercism/org-wide-files/blob/main/global-files/.github/labels.yml. # 173 | # ----------------------------------------------------------------------------------------- # 174 | 175 | - name: "bug" 176 | description: "Something isn't working" 177 | color: "d73a4a" 178 | 179 | - name: "documentation" 180 | description: "Improvements or additions to documentation" 181 | color: "0075ca" 182 | 183 | - name: "duplicate" 184 | description: "This issue or pull request already exists" 185 | color: "cfd3d7" 186 | 187 | - name: "enhancement" 188 | description: "New feature or request" 189 | color: "a2eeef" 190 | 191 | - name: "good first issue" 192 | description: "Good for newcomers" 193 | color: "7057ff" 194 | 195 | - name: "help wanted" 196 | description: "Extra attention is needed" 197 | color: "008672" 198 | 199 | - name: "invalid" 200 | description: "This doesn't seem right" 201 | color: "e4e669" 202 | 203 | - name: "question" 204 | description: "Further information is requested" 205 | color: "d876e3" 206 | 207 | - name: "wontfix" 208 | description: "This will not be worked on" 209 | color: "ffffff" 210 | --------------------------------------------------------------------------------