{"id":17789950,"url":"https://github.com/samrocksc/hf","last_synced_at":"2025-04-02T01:16:46.927Z","repository":{"id":189750226,"uuid":"681235747","full_name":"samrocksc/hf","owner":"samrocksc","description":"A standard test","archived":false,"fork":false,"pushed_at":"2023-08-23T09:48:13.000Z","size":65,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T16:56:21.360Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"MDX","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/samrocksc.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":"2023-08-21T15:08:01.000Z","updated_at":"2023-08-21T15:10:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"a138dd55-6c96-4961-8d09-e8a7ad6d551b","html_url":"https://github.com/samrocksc/hf","commit_stats":null,"previous_names":["samrocksc/hf"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samrocksc%2Fhf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samrocksc%2Fhf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samrocksc%2Fhf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samrocksc%2Fhf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samrocksc","download_url":"https://codeload.github.com/samrocksc/hf/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246735323,"owners_count":20825223,"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","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":[],"created_at":"2024-10-27T10:39:33.925Z","updated_at":"2025-04-02T01:16:46.910Z","avatar_url":"https://github.com/samrocksc.png","language":"MDX","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Coding Challenge\n\nHello! Thanks for reading this. My name is Sam Clark, and I've put together this repo for you as the hiring manager. For the react application, I used Vite bundler and SWC(because we all like speed).\n\nThis is a fun challenge because typically you're working with the value of a JSON object, but when working with this, you're working with the declarer of the JSON document.\n\n## Requirements\n\n- a computer, this is designed for posix, but windows should work as well with makefile support\n- npm\n\n## How to run?\n\nI've went ahead and added a Makefile into the application for your ease of use. It should work in any linux/wsl/osx environment.\n\n- **html challenge** - `make html-challenge`\n- **json challenge** - `make json-challenge`\n\nFor convenience I also added them to \u003chttps://surge.sh\u003e for you:\n\n- [https://heyflow-sam-c.surge.sh](https://heyflow-sam-c.surge.sh) - JSON Challenge\n- [https://sincere-land.surge.sh](https://sincere-land.surge.sh) - HTML Challenge\n\n## Challenges\n\n### JSONExplorer\n\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n### CSS/HTML Checkbox Toggle\n\n## Things I Learned\n\nSo often time when we are the interviwer, or the interviewee we learn things as we go. This was a really fun challenge.\n\n1. When an array is identified its key is a number, but can a key be anumber?\n   a. A key can be a number, but it is identified as a string\n   b. A key of an array\n2. I first started off with a pretty easy component:\n\n   ```typescript\n   export const ShowNiceOutput: React.FC\u003c{\n     isValid: boolean;\n     stringified: JSONValue;\n   }\u003e = ({ isValid, stringified }) =\u003e (\n     \u003c\u003e\n       \u003cdiv className=\"text-left\"\u003e\n         {isValid ? (\n           \u003cpre\u003e\n             \u003ccode\u003e{stringified.toString()}\u003c/code\u003e\n           \u003c/pre\u003e\n         ) : (\n           \u003c\u003e\u003c/\u003e\n         )}\n       \u003c/div\u003e\n     \u003c/\u003e\n   );\n   ```\n\n   - I quickly found out this method was not going to work very well because we needed to handle a lot of parsing\n\n## Things I've Left Open\n\nThere are a lot of things to improve on this code. Due to the time constraint of 4 hours I left them out. I kept some of them simple so we can go through them together!\n\n1. Let's find a better naming structure for the components\n2. Let's move CSS from inline Tailwind to a css sheet\n3. What happens if this gets more complex?\n4. Currently we're using a lot of prop drilling...but what if we want to extract the functionality and take a bit more OOP and invert control to the context API?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamrocksc%2Fhf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamrocksc%2Fhf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamrocksc%2Fhf/lists"}