{"data":{"content":{"fields":{"slug":"/tips/code-sandbox","type":"tip"},"frontmatter":{"title":"Code Sandbox"},"html":"<h2>Code Sandbox</h2>\n<p>Running into machine issues? NodeJS not configured correctly? <code class=\"language-text\">PATH</code> variable not picking up changes?</p>\n<p>Don’t fear—we’ve been there too… more times than we can count!</p>\n<p>We’ve structured our labs so that they can be utilized with a tool called <a href=\"https://codesandbox.com\">CodeSandbox</a>, which is essentially an online IDE that works similarly to your local machine setup and allows for similar functionality.</p>\n<h3>Preliminary setup</h3>\n<p>Note: the labs are currently structured for local development. To correctly proxy out to the API and get tests running, please do the following:</p>\n<ul>\n<li>Open up package.json, and change proxy to the following:</li>\n</ul>\n<div class=\"gatsby-code-title\">package.json</div>\n<div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token property\">\"proxy\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"https://timesheets-api-kxhyqqalbh.now.sh\"</span></code></pre></div>\n<h2><a href=\"https://codesandbox.io/s/github/objectpartners/react-redux-timesheet/tree/master/lab-01-project-setup\">Lab 01 - Project Setup</a></h2>\n<p><a href=\"https://codesandbox.io/s/github/objectpartners/react-redux-timesheet/tree/master/lab-01-project-setup\"><span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 650px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 58.889782783588096%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACgElEQVQoz3WT204TURSG+wBKqkAKpfQwp3YOnWmnlAqNBlQCpOqN8RmAYgxUPN74ChxUjLTggSfhhkseoC0JpwvsjZgg0ML+XXtriUTZycraM5n58q219vbEE0ncGhlluQePMHL/IdKZLAzDhGnGKVuUrfO9ZdmI247IphWHrhuw7CRLZweRSGeZkcw0PLabYrbrQtNNqDEdOn0oRw2EJAVhSUVY1hBRNEhqFB1d3fB3hxCSVQTCMrxeLyLpOxh4VmQDM0sYfF6CJ5XpQ0+mnzmpNML0o2o5kDUFncEQRRDtHX4RLddaMTyaw4uXr/BkahpT0wVMF57SvsCmCjN487rAcvdyzKNRKSq3o5C0GBQrCce1YSQTUE0DEU0lOw3e1jZ8WV1Fo1FHuVxGtVrF5uYmKpUKqpUyDmq7WFx8B0+U+iPHDOjuDSiGDVmVBUCiciOSRM8KdCMGX4cPxeUV8LW1tYX19XWsra1hY2MD32o1fD/4gbmFtxCGclRHlBqtkKU/GEZXKHIhuqmfV7ytKK18EsDt7W3UCLK/v4/dnR3s7e3h8PCQgAu/DXmpAkyZAwJh6ULwIbRcb8NSaVkAGf5dJycnmJ0nYIzMuKEed0S+DHiVgMU/wHq9DsaYiLOzM/Hu+PgYcxxoOQky1IUln/LfwOa+CWwa1huNcyCPJlAY9vTfRG9flqV6aSg0nP8ZBqmHHPixWDovj5vxOD09ZRz68+iIzc7NM4+ZcJnjpkTJ3LKTDq6foP7mULghmXPg56+ruGQJzfeLH3gPxc1gfCjcUIDpVvDbEYzICBDU5w/gersPQ8Oj4lCPTeQxkZ8UMZ6fZBP5xxgbz7Pbd4cavwB+FAXw6X1JzAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Lab 01\"\n        title=\"\"\n        src=\"/static/7a21e299485da1f2b170a53af3b02ced/83a8b/lab-01.png\"\n        srcset=\"/static/7a21e299485da1f2b170a53af3b02ced/8992e/lab-01.png 163w,\n/static/7a21e299485da1f2b170a53af3b02ced/ae0a7/lab-01.png 325w,\n/static/7a21e299485da1f2b170a53af3b02ced/83a8b/lab-01.png 650w,\n/static/7a21e299485da1f2b170a53af3b02ced/50453/lab-01.png 975w,\n/static/7a21e299485da1f2b170a53af3b02ced/af9d4/lab-01.png 1300w,\n/static/7a21e299485da1f2b170a53af3b02ced/7cf95/lab-01.png 1950w,\n/static/7a21e299485da1f2b170a53af3b02ced/d6bae/lab-01.png 2486w\"\n        sizes=\"(max-width: 650px) 100vw, 650px\"\n      />\n  </span></a></p>\n<h2><a href=\"https://codesandbox.io/s/github/objectpartners/react-redux-timesheet/tree/master/lab-02-first-component\">Lab 02 - First React Component</a></h2>\n<p><a href=\"https://codesandbox.io/s/github/objectpartners/react-redux-timesheet/tree/master/lab-02-first-component\"><span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 650px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 70.63555913113436%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAACSklEQVQ4y6WTyW4TQRCG/QqAABsvsy89q8fjVSgEEELIEogDTwCIEwqJHCJMELlAHJYzZ54GshzJgbxAAHPhwMHy0j/VrcQQhKWItPSrZlpT3/zVXZXx/YCH5QTzN9q8ffMOrrdvI6024Hk+KTgiRnthGCOKygiCCJQLxjzE1Savz11DkLZ4Jqk1EFVSHlYSOJRguQyMPtZtBkUzoOgWVMOCZtoyns3mUVR12jeRLSg4dfoMglsPcPXJez63+A4CyNNGCyQeVapQLRtOXIHlWCjoBvKqimy+KEHncnncvXcf3aerWOoso7P8GMsrK1hY6mC1u4K17iLPuOTGpnKELOZDs11YYYIoCcHiGCZzodFPFIIrholPu7uYtX7+6CPjx6LUAIbrgaUtGF4I3dCgUkmKKI0c6qYOgyTi5taWTB4OhxiPx1OJ9fUbARkdsnBnOAwOuRUxV1RxoURShDSpnHgvadje3pHJAsI5l5qQxOr3CRgkVTg+uaJSXRkd5AlQIHdHdLC3vfMbeLj4FPgdGa9cgUdtIJy58nbdKVDEP5+PBXQCD35cptt16PBdOnjrnw6PDbw0fxHzVy6j1qij0WoiiCJ5fv8NLCcx0nodXhhRQ4cwHfdkDu0gQVxropzWECYple3MBAp9+LgpkweDgWydQ00mE+zvfyEg9Z2YkEqtjoB6UgBzRWUK+Bv+eW9vZmOPRiO65SiWt2tSY9tMzLJ30D4udIKL+RWg8zR+uUIJDxce4fWbt3ix3sN6b0PqJT33Nl7h2fM1/ALA4mlx39X3CgAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Lab 02\"\n        title=\"\"\n        src=\"/static/ddcf482f2cbc2d191cdfb86210b50c97/83a8b/lab-02.png\"\n        srcset=\"/static/ddcf482f2cbc2d191cdfb86210b50c97/8992e/lab-02.png 163w,\n/static/ddcf482f2cbc2d191cdfb86210b50c97/ae0a7/lab-02.png 325w,\n/static/ddcf482f2cbc2d191cdfb86210b50c97/83a8b/lab-02.png 650w,\n/static/ddcf482f2cbc2d191cdfb86210b50c97/50453/lab-02.png 975w,\n/static/ddcf482f2cbc2d191cdfb86210b50c97/af9d4/lab-02.png 1300w,\n/static/ddcf482f2cbc2d191cdfb86210b50c97/7cf95/lab-02.png 1950w,\n/static/ddcf482f2cbc2d191cdfb86210b50c97/d6bae/lab-02.png 2486w\"\n        sizes=\"(max-width: 650px) 100vw, 650px\"\n      />\n  </span></a></p>\n<h2><a href=\"https://codesandbox.io/s/github/objectpartners/react-redux-timesheet/tree/master/lab-03-routing\">Lab 03 - Routing with React Router</a></h2>\n<p><a href=\"https://codesandbox.io/s/github/objectpartners/react-redux-timesheet/tree/master/lab-03-routing\"><span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 650px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 70.63555913113436%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAACOklEQVQ4y6WTuW4TURSG5xEQKBBjO7OvdxZ7xvbYQrYQIFEQQBS8AAgqRAKBQEhEGojDUlPzNJA4JSnICwQwFQWS5WV+zr3BTlKEAh/p15250v10lv9IjAWZXyrj8vz17NrN27g6fwuNCy2U6C76q1I5pv8DBWEE5gcIghCM+XBdD1GlntWaV+AnjUwqV1OEcZKFSQzb82E6LlhYguEwKLoJ1bCgmfZEM7k8CrIGWTMxW5Bx6vQZ+Dfu49Lzj1lz8QM4MEvSBpJaIwvjChTTgh3FMG0DBVVHXlFwLl/EzGweZwl25+49vFhdw+OlJ0JPl59h4dESVleWsb6ymEmOH8KizLhMl0G1HBgsgh95sIMAmm1B1nUUFRVFVcWX3V2cFL9//YTEorIoVXc8uEkduhdANzRRqqoaJA2GaZB06HRubW+Lx/1+H8PhcCIe3390IblBJLLTbRc2ZcvP83MK8rJ6RBrdHXx3OjviMYdkWTYRj26XgH65AocFAsRPzbLFw4KiHdP4rrNzCBzHIZBKdmkAjOxgUMm8n6o5JdChxntRiUAOZefQAMzpgKVKjCRN4VJ2jExrkA+nAjabdbQutlAjaC2tETQUA/hvIPdcWEkRJVXRS+UfPeT69HlLPO71esI6Y41GI+zvf4Nk0WRDgsXVGnwC8j7mivIx2xwFf93bO9HYg8EAkkd949PlU7ZoU0w+bWEfR+wu32cO4uuXK8zhwcMFvH33Hq822thobwq9pu/25husvVzHH6+aajnSxElzAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Lab 03\"\n        title=\"\"\n        src=\"/static/dacc11f3b4c6bd66dca171f14fde62a7/83a8b/lab-03.png\"\n        srcset=\"/static/dacc11f3b4c6bd66dca171f14fde62a7/8992e/lab-03.png 163w,\n/static/dacc11f3b4c6bd66dca171f14fde62a7/ae0a7/lab-03.png 325w,\n/static/dacc11f3b4c6bd66dca171f14fde62a7/83a8b/lab-03.png 650w,\n/static/dacc11f3b4c6bd66dca171f14fde62a7/50453/lab-03.png 975w,\n/static/dacc11f3b4c6bd66dca171f14fde62a7/af9d4/lab-03.png 1300w,\n/static/dacc11f3b4c6bd66dca171f14fde62a7/7cf95/lab-03.png 1950w,\n/static/dacc11f3b4c6bd66dca171f14fde62a7/d6bae/lab-03.png 2486w\"\n        sizes=\"(max-width: 650px) 100vw, 650px\"\n      />\n  </span></a></p>\n<h2><a href=\"https://codesandbox.io/s/github/objectpartners/react-redux-timesheet/tree/master/lab-04-redux\">Lab 04 - Redux</a></h2>\n<p><a href=\"https://codesandbox.io/s/github/objectpartners/react-redux-timesheet/tree/master/lab-04-redux\"><span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 650px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 70.63555913113436%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAACvUlEQVQ4y42TSU9TYRSG+xeUKENLpzsPvbcThcbgQk1ciBoX/gCjcWUQBIkRQRcKOKxd+yfUKLp1gKUkQAJKIkMptASCUlq4r+d8bYkaSfySN+f2a+5z3zP5LCvm2fEETned985dvIyzXZeQPXEScbpza4onkvQ7KZ5tO1ZVzIFl2TAME266w8t0noGdynq+RFs7nGTKc1JJaKYNRTdgu3HIuoWwpCAia4gqGiRVF/FYUwsCoQhCURlNgRCOHG2AfeE6Tt154XX2PAcDvVR7FqlM1nOSaYQVFUosDkmJoiUURnMwiEa/Hw3Hm4SuXL2GwaFh3Oq/jd6+fvQPDKC7tw9DgwN4cLfH8+m2A5WcsRTDQoScSE4b0mkL8ZQLmf936F7XEFZVfJmawr/O2k9gfW0NPstNiFQl3YSR6oBkOghrFiRDo4/olLKMQDiKQCQq4stXr7G+XsD3xUVsb/+A53nY399HkYALSwQ0Yq5wJ2kGNHIjE1jTFBiaDpnSj9aAfqob683bcWxubmFxaQm7u7uoVCrY3NpCpVxCbmUFPjuRhmbFEKVUdYqcskWpJQmsaNwQGa0RScA4jr97j52dHRSKRZRKJQHPra6iUChienqGHFLKFo2EcFYDc5qySiIYA4OSLIDslB3u7e3h28IC5ue/Ip9fQy6Xw8bGBubm5gno0GwRkFNmhWUVLcEIdbiqOqgeP09MiiZwqlw7KqH4AJ98Pl8Fmk5czBm7ZGD95d9Vv5uYrAIZVj2eaEwVyE2xTViu+4fD/wGyKwbVdeBQI4eJTBZJ2hiXBptreBiQ9eHjJ/EyN6RcLh+IHS8vU5dVMwbekEQ6A57JCK1Xc2voAPA3fGZ2FocdrqvPdFzotflTaVMUinqt27y7vM8MavS3ojkQxI3um3jy9BkejoxiZHRM6BE9j449xr3h+/gFLBZlJSmk6m4AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Lab 04\"\n        title=\"\"\n        src=\"/static/5449cd13538a9f83f2834b9a7056ec49/83a8b/lab-04.png\"\n        srcset=\"/static/5449cd13538a9f83f2834b9a7056ec49/8992e/lab-04.png 163w,\n/static/5449cd13538a9f83f2834b9a7056ec49/ae0a7/lab-04.png 325w,\n/static/5449cd13538a9f83f2834b9a7056ec49/83a8b/lab-04.png 650w,\n/static/5449cd13538a9f83f2834b9a7056ec49/50453/lab-04.png 975w,\n/static/5449cd13538a9f83f2834b9a7056ec49/af9d4/lab-04.png 1300w,\n/static/5449cd13538a9f83f2834b9a7056ec49/7cf95/lab-04.png 1950w,\n/static/5449cd13538a9f83f2834b9a7056ec49/d6bae/lab-04.png 2486w\"\n        sizes=\"(max-width: 650px) 100vw, 650px\"\n      />\n  </span></a></p>\n<h2><a href=\"https://codesandbox.io/s/github/objectpartners/react-redux-timesheet/tree/master/lab-05-form-validation\">Lab 05 - Form Validation</a></h2>\n<p><a href=\"https://codesandbox.io/s/github/objectpartners/react-redux-timesheet/tree/master/lab-05-form-validation\"><span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 650px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 70.63555913113436%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAACrklEQVQ4y42TW08TURSF+xfUKPQ+07l3hpnpTAtUgolKIAJqYuIfMOojkUuQiEEfFfDy5LM/w+uT4UUCvJEo+EAr2EijXFtCYJb7nBbiBY07WdlNOvPN2medHTLTVmA5GZzvvRj0XL6Krt4ryLedgetm4NTlZjwuh57z/Sz/z7KaYJpNMIw0nGxr0NzeAcvPB6FMrhm25we270FLW1B0A6bjQtZNCJICUVaRUjSkVJ33hkgMcUFCMiWjMZbEseMnYF26iXMjz4P2W89AwJbAb8mDFNheFoKiQrMzUFQZMSGFqCAgHE/gZGMEp8JRXLt+A3dG72JgcIhraPg2+voHMTY6jLGRviCkWzZUcsakGCZ3Its55HIW3KwDucmhD1hI6TrX/Pw8jqpyFSiVviBk0rmwUSU9DcNvhZS2kVQNiJpCY6s0WgqRhIBIUiC3Il68fIVyuYzPy8uoVqsctre3h28V4NMSAQ1ywNxJmgGN3MoE1jQZuqZBUhSk5NroDMr66zdv8X1tDUuFAr6urmJzcws7OzuEDVAsFhCyMllolBYbVacuUjdVDR6BlTo0LkqIJkUkKIh3U1PY398n0CbWNzawvr7B+9b2Nj58XCCHNLLpejVndbBIrmQKRVZkSlZGQpI5kIFn5+b4mAz6e5VKJQJSohYB2chMAl2TSEKkM6uJgXjadeDMzOzhuQVBwHUAX1lZqQHTtguJpUsuGfAA8rMOgbN/AplqQBaKlaaL7Pzi8H+BB/ULUHc8eC2n4Te3wvVzHPov4Pvpaf4yS3Z3d/dQDFooFhFiqRo0chPtJ7s+SVq3cDzJAdEjznBhcRF/q0qlglBXdy86L3TjbEcnOrt7kMu3QaWNkeq7y/aZARuicYRjCfQPDOLxk6d4MD6B8YlJrof0e2LyEcbu3ccPmfJpMMjaz8YAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Lab 05\"\n        title=\"\"\n        src=\"/static/1f3294a5753ae68a89edeb3aa56cd340/83a8b/lab-05.png\"\n        srcset=\"/static/1f3294a5753ae68a89edeb3aa56cd340/8992e/lab-05.png 163w,\n/static/1f3294a5753ae68a89edeb3aa56cd340/ae0a7/lab-05.png 325w,\n/static/1f3294a5753ae68a89edeb3aa56cd340/83a8b/lab-05.png 650w,\n/static/1f3294a5753ae68a89edeb3aa56cd340/50453/lab-05.png 975w,\n/static/1f3294a5753ae68a89edeb3aa56cd340/af9d4/lab-05.png 1300w,\n/static/1f3294a5753ae68a89edeb3aa56cd340/7cf95/lab-05.png 1950w,\n/static/1f3294a5753ae68a89edeb3aa56cd340/d6bae/lab-05.png 2486w\"\n        sizes=\"(max-width: 650px) 100vw, 650px\"\n      />\n  </span></a></p>"}},"pageContext":{"next":{},"slug":"/tips/code-sandbox"}}