{"id":13721133,"url":"https://github.com/FrontendMasters/remix-fundamentals","last_synced_at":"2025-05-07T13:31:50.074Z","repository":{"id":50538153,"uuid":"519367745","full_name":"FrontendMasters/remix-fundamentals","owner":"FrontendMasters","description":"Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. Get a jumpstart on Remix with this workshop.","archived":false,"fork":false,"pushed_at":"2024-01-04T19:21:57.000Z","size":3143,"stargazers_count":256,"open_issues_count":7,"forks_count":114,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-11-11T21:08:45.762Z","etag":null,"topics":["kcd-edu"],"latest_commit_sha":null,"homepage":"https://frontendmasters.com/workshops/remix/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FrontendMasters.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-07-29T22:52:06.000Z","updated_at":"2024-11-03T14:31:42.000Z","dependencies_parsed_at":"2023-11-21T19:46:26.647Z","dependency_job_id":null,"html_url":"https://github.com/FrontendMasters/remix-fundamentals","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrontendMasters%2Fremix-fundamentals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrontendMasters%2Fremix-fundamentals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrontendMasters%2Fremix-fundamentals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrontendMasters%2Fremix-fundamentals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FrontendMasters","download_url":"https://codeload.github.com/FrontendMasters/remix-fundamentals/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224604787,"owners_count":17339203,"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":["kcd-edu"],"created_at":"2024-08-03T01:01:12.788Z","updated_at":"2024-11-14T10:31:09.766Z","avatar_url":"https://github.com/FrontendMasters.png","language":"TypeScript","funding_links":[],"categories":["Workshop"],"sub_categories":[],"readme":"\u003cdiv\u003e\n  \u003ch1 align=\"center\"\u003e\u003ca href=\"https://frontendmasters.com/courses/remix/\"\u003e💿 Remix Fundamentals\u003c/a\u003e\u003c/h1\u003e\n  \u003cstrong\u003e\n    Build Better websites with Remix\n  \u003c/strong\u003e\n  \u003cp\u003e\n    Remix enables you to build fantastic user experiences for the web and feel\n    happy with the code that got you there. Get a jumpstart on Remix with this\n    workshop.\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003chr /\u003e\n\n\u003c!-- prettier-ignore-start --\u003e\n[![Build Status][build-badge]][build]\n[![GPL 3.0 License][license-badge]][license]\n[![Code of Conduct][coc-badge]][coc]\n\u003c!-- prettier-ignore-end --\u003e\n\n## Prerequisites\n\n- Some\n  [experience with JavaScript](https://kentcdodds.com/blog/javascript-to-know-for-react)\n- Some [experience with React](https://kcd.im/beginner-react)\n- Some [experience with Node.js](https://nodejs.dev/learn)\n\n## System Requirements\n\n- [git][git] v2.13 or greater\n- [NodeJS][node] `16 || 18`\n- [npm][npm] v8 or greater\n\nAll of these must be available in your `PATH`. To verify things are set up\nproperly, you can run this:\n\n```shell\ngit --version\nnode --version\nnpm --version\n```\n\nIf you have trouble with any of these, learn more about the PATH environment\nvariable and how to fix it here for [windows][win-path] or\n[mac/linux][mac-path].\n\n## Setup\n\nFollow these steps to get this set up:\n\n```sh\ngit clone https://github.com/FrontendMasters/remix-fundamentals.git\ncd remix-fundamentals\nnpm run setup\n```\n\nIf you experience errors here, please open [an issue][issue] with as many\ndetails as you can offer.\n\n### Exercises\n\nYou'll find all the exercises in the `exercises` directory. The finished version\nof each exercise is in the `final` directory. Each directory is a completely\ncontained Remix app.\n\nThe purpose of the exercise is **not** for you to work through all the material.\nIt's intended to get your brain thinking about the right questions to ask me as\n_I_ walk through the material.\n\n### Running each app\n\nEach directory in the `final` and `exercises` directories is a Remix app. The\neasiest way to run these without having to `cd` into each directory is to use\nthe `dev.js` script in the root of this repository:\n\n```sh\n# to run the first exercise app:\nnode dev exercise/01\n\n# This runs the first exercise too:\nnode dev 1\n\n# or to run the final version of the 2nd exercise\nnode dev final/02\n# this runs the 1st extra credit of the final version of the 2nd exercise\nnode dev final2.1\n\n# this will just ask you which one you want to run\nnode dev\n```\n\nEach will run on a unique port so you can run multiple apps at once.\n\nUnfortunately, due to the nature of this workshop, ⌘+P isn't very useful\n(because there are a LOT of duplicate files). If you'd prefer, you can open each\nexercise in its own editor. Or just make sure to prefix your searches with\n\"exercise/03\" (for example) so you're searching in the right app.\n\n### Instructions\n\nFor each exercise, follow the instructions in the `README.md` file of the\nexercise directory to learn what the objectives are.\n\nYou can us the `diff.js` script to be shown the differences between what's in\nany of the apps. For example:\n\n```sh\n# to be shown the differences between the first exercise and the final version:\nnode diff exercise/01 final/01\n\n# We've got some sensible defaults in place so you can get the same diff as above with:\nnode diff 1\n\n# And for comparing yourself to extra credits, you can run:\nnode diff exercise/02 final/02.2\n\n# this will just ask you which ones you want to diff\nnode diff\n```\n\nThis can be handy for you to run when you think you're done but things aren't\nquite working as you expect.\n\nSometimes there are changes that happen outside of the tutorial because they're\nunrelated to Remix but they can be handy to know about (like when we're getting\nthe database ready for auth), so the diff command can help with that:\n\n```sh\n# To be shown the changes that happened to prepare for the exercise:\nnode diff final/04 exercise/05\n```\n\nNOTE: Unfortunately, there's no way to exclude some files from the diff we're\ndoing, so we limit the diff to only the `app` directory (where almost all of\nyour code changes happen). You'll need to ignore any changes to\n`styles/tailwind.css` however. That's a generated file. Sorry about that.\n\n## Workshop Feedback\n\nEach exercise has an Elaboration and Feedback link. Please fill that out after\nthe exercise and instruction.\n\nAt the end of the workshop, please go to this URL to give overall feedback.\nThank you! https://kcd.im/rmx-workshop-ws-feedback\n\n\u003c!-- prettier-ignore-start --\u003e\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[git]: https://git-scm.com/\n[build-badge]: https://img.shields.io/github/workflow/status/FrontendMasters/remix-fundamentals/%E2%9C%85%20Validate/main?logo=github\u0026style=flat-square\n[build]: https://github.com/FrontendMasters/remix-fundamentals/actions?query=workflow%3Avalidate\n[license-badge]: https://img.shields.io/badge/license-GPL%203.0%20License-blue.svg?style=flat-square\n[license]: https://github.com/FrontendMasters/remix-fundamentals/blob/main/LICENSE\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://kentcdodds.com/conduct\n[win-path]: https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/\n[mac-path]: http://stackoverflow.com/a/24322978/971592\n[issue]: https://github.com/FrontendMasters/remix-fundamentals/issues/new\n\u003c!-- prettier-ignore-end --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFrontendMasters%2Fremix-fundamentals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFrontendMasters%2Fremix-fundamentals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFrontendMasters%2Fremix-fundamentals/lists"}