{"id":25269881,"url":"https://github.com/javascript-pro/react-tech-test","last_synced_at":"2026-04-11T14:34:55.838Z","repository":{"id":89534353,"uuid":"142534061","full_name":"javascript-pro/react-tech-test","owner":"javascript-pro","description":"A technical test is often the best way to judge the quality of a potential candidate. Here's one example","archived":false,"fork":false,"pushed_at":"2018-07-30T10:42:26.000Z","size":3565,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-03T19:34:29.630Z","etag":null,"topics":["firebase","javascript","pwa","react","redux"],"latest_commit_sha":null,"homepage":"https://react-tech-test.firebaseapp.com","language":"JavaScript","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/javascript-pro.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-27T05:57:32.000Z","updated_at":"2021-11-03T00:54:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"af4dd1ed-aa23-4bfb-b894-66e618b94169","html_url":"https://github.com/javascript-pro/react-tech-test","commit_stats":null,"previous_names":["javascript-pro/react-tech-test"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/javascript-pro/react-tech-test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Freact-tech-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Freact-tech-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Freact-tech-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Freact-tech-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javascript-pro","download_url":"https://codeload.github.com/javascript-pro/react-tech-test/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javascript-pro%2Freact-tech-test/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31684525,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["firebase","javascript","pwa","react","redux"],"created_at":"2025-02-12T11:27:54.148Z","updated_at":"2026-04-11T14:34:55.793Z","avatar_url":"https://github.com/javascript-pro.png","language":"JavaScript","readme":"\n![alt text](https://listingslab.com/png/72_b.png \"Headless WordPress PWA with React\")\n\n### [Firebase Demo](https://react-tech-test.firebaseapp.com/)\n\n*A simple phone book application using react and redux*\n\n# React Technical Excerise\n\n## Phone Book\n\n## Solution\n\nThe delivered app solves the brief and also offers the following power ups\n\n- Hosted on firebase, leveraging all kinds of Google goodness\n- Persistant redux store (like cookies but better)\n- [Material UI](https://material-ui.com/) for quick, modern, responsive UI frameworking\n\n## Brief\n\nBelow is the original technical test readme.\n\n### Phone Book\n\nCreate a simple phone book application using react and redux.\nFollow the layout provided below.\n\n```\n---------------------------------------------------------\n-   First Name  Last Name   Phone No.                   -\n-   [        ]  [       ]   [       ]                   -\n-                                                       -\n-                                                       -\n-                           [Save]    [Cancel]          -\n-                                                       -\n-  [First Name] | [Last Name] | [Phone Number] |        -\n-   John        | Smith       | 1234           | [Edit] -\n-               |             |                | [Edit] -\n-               |             |                | [Edit] -\n-               |             |                | [Edit] -\n-               |             |                | [Edit] -\n---------------------------------------------------------\n```\n\n- React and Redux must be used.\n- You are free to use whatever additionaly libraries you would like.\n- The application must pass the following 4 test cases.\n\n#### Case 1: Add a new user\n\n1.  Enter a first name, last name and phone number into the input fields.\n2.  Clicking save should add the entry into a store. This store should be persistant i.e local storage. Once saved it should show in the table below.\n\n**_Note: Try to treat reading and writing the data the way you would if you were consuming a RESTful API._**\n\n#### Case 2: Show list of contacts\n\n1.  List the contacts first name, last name and phone number in the table. The contact should load from the persistant store.\n\n#### Case 3: Edit user\n\n1.  Click the edit button next to the contact in the table and populate the input fields with the values.\n2.  Modify the information and click save to update the existing record in the store.\n\n#### Case 4: Cancel Edit Action\n\n1.  Click the edit button to load the selected user data as above.\n2.  Modify the information and click Cancel. The data should not be updated in local storage or table.\n\n#### BONUS\n\n1.  Write a unit test.\n2.  Add sorting on the table\n3.  Allow filtering/searching the table.\n\n## Submission\n\n### For a submission to be considered complete it must:\n\n- Clone this _*react-tech-test*_ repo.\n- Demonstrate appropriate use of source control/ versioning;\n- Adhere to modern coding standards/ practices;\n- Be merged to master with a merge commit;\n- Be testable;\n- Solve the problem.\n- This repository should be private cloned and shared with us when complete.\n\n## Listingslab's Solution\n\nDev Time from cloning bitbucket repo to final develop\u003emaster merge __≈ 6.5 hrs__\n\nPlease note our solution does deviate slightly from the original brief. This is due to the constraints of completing the task in a very short time \u0026 wishing to showcase some of our current React development skills in the time allotted.\n\nThis simple phonebook app offers the following power ups\n\n- Full Progressive Web App with all the correct manifests/icons \u0026 a 87% [lighthouse audit score](https://raw.githubusercontent.com/listingslab/react-tech-test/master/public/lighthouse.json)\n- Hosted on Google Firebase, leveraging tech like as [firestore database](https://firebase.google.com/docs/firestore/)\n- Aatars\n- Persistant redux store (like cookies but better)\n- [Material UI](https://material-ui.com/) for quick, modern, responsive UI frameworking\n\n__Roadmap__  \n\nFurther development of this app might include \n\n- Look at importing/exporting contacts as JSON\n- Upload avatars\n- Develop the contact object to use many more fields\n- Push notifications to let users know when they've been added to another's list\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavascript-pro%2Freact-tech-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavascript-pro%2Freact-tech-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavascript-pro%2Freact-tech-test/lists"}