{"id":24096032,"url":"https://github.com/becodeorg/verou-3-modern-javascript-rubendelb","last_synced_at":"2025-07-19T05:07:31.454Z","repository":{"id":96923606,"uuid":"454319620","full_name":"becodeorg/verou-3-modern-javascript-RubenDelb","owner":"becodeorg","description":"verou-3-modern-javascript-RubenDelb created by GitHub Classroom","archived":false,"fork":false,"pushed_at":"2022-02-04T10:57:23.000Z","size":1342,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-03-24T21:04:16.132Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/becodeorg.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":"2022-02-01T09:01:58.000Z","updated_at":"2022-02-01T09:05:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"154ee81e-cc85-4f2e-b1ad-d0624905f5fc","html_url":"https://github.com/becodeorg/verou-3-modern-javascript-RubenDelb","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/becodeorg/verou-3-modern-javascript-RubenDelb","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becodeorg%2Fverou-3-modern-javascript-RubenDelb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becodeorg%2Fverou-3-modern-javascript-RubenDelb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becodeorg%2Fverou-3-modern-javascript-RubenDelb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becodeorg%2Fverou-3-modern-javascript-RubenDelb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/becodeorg","download_url":"https://codeload.github.com/becodeorg/verou-3-modern-javascript-RubenDelb/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becodeorg%2Fverou-3-modern-javascript-RubenDelb/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265892131,"owners_count":23844971,"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":"2025-01-10T12:09:38.803Z","updated_at":"2025-07-19T05:07:31.439Z","avatar_url":"https://github.com/becodeorg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Anatomy of a Modern JavaScript Application\n\n- Repository: `modern-javascript-application`\n- Type of Challenge: `learning`\n- Duration: `3-5 days`\n- Deployment strategy: `Github pages`\n- Team challenge : `solo`\n\n## Learning Objectives\n\nYou now know JavaScript well enough to write simple and complex frontend applications, and querying an API as well. You know the language, and you know its power, but something is still missing. The code seems convoluted and all over the place. Is this really how established developers work, you may wonder?  \nAt the end of this challenge you will:\n\n- be able to organize your code with multiple functions\n- be able to organize your code in multiple files\n- be able to use a package manager to import third-party libraries in your code\n- be able to use linters and formatters to make your code cleaner and more bug-free\n- be able to optimize your code to be shipped to a browser faster\n\n## Your mission\n\n\u003e It's Monday morning. I sit at my desk, start the computer, and my two screens light up.\n\u003e\n\u003e I open up my text editor and open the terminal at same level as your project folder in the first screen.\n\u003e\n\u003e I type two simple words in the terminal: `npm start` and press \u003ckbd\u003eENTER\u003c/kbd\u003e.\n\u003e\n\u003e A few seconds later a browser tab launches in the second screen with a local server where I can see the application as I develop it.\n\u003e\n\u003e I need to add a small new feature. I already have the code in my head, and start typing it out. Before I even save, a red squiggly line under a piece of recent code alerts me that there is a problem, and suggests a fix. I accept the fix, which is automatically applied to my code. Phew, that would have taken 30 minutes of my time to find and fix manually.\n\u003e\n\u003e I realize that I need to work with dates in this new feature, and dates are tricky. Fortunately, there is a library that makes it easier. I type `npm install --save date-fns`, now all I have to do is import that library in my file: `import library from './library'`\n\u003e\n\u003e I keep typing, instantly solve two more problems, and hit Save. I'm not the best at keeping my code tidy and well indented, but my text editor is set to auto-format the code on save. Awesome, I don't even have to think about it and there I have my variables well aligned, my functions well indented, my nested conditionals well laid out. It's so much easier to read now.\n\u003e\n\u003e I now see that I could organize my code a little better, and that I could add an additional explanation for future me in a comment. I save again.\n\u003e\n\u003e I glance at my second screen. I haven't touched a thing since hitting Save, but the tab is automatically reloading with the new code applied. I watch the app load under my eyes, and I can immediately test it. Wow. That was a breeze, the new feature works!\n\u003e\n\u003e I type `npm build` in the terminal and all my SASS and JS is bundled, optimized and minified, ready to ship to the browser with optimal performance. Development never felt better.\n\nIf you also find this vision of a happy future enticing read on, and reach coding Nirvana in 5 days 😎\n\n## Instructions\n\nThere will be a lot to take here. It's a lot of so-called _tooling_ that doesn't impact functionality directly, but it can improve several areas of development immensely.  \nLet's take this short journey step by step, day by day.\n\n\u003e This exercise assumes you already have a (potentially messy - the more, the better!) project that you want to improve.\n\u003e Your coach will let you know which project to use. In case you don't have a suitable one, there's [a weather app project](./project-template) included for you to use as an alternative.\n\nStart Here: [**Part 1**](./Part1-Refactor)\n\n## Good luck!\n\n![](https://media.giphy.com/media/3ohzdCZQsrqHIqgTEk/giphy.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbecodeorg%2Fverou-3-modern-javascript-rubendelb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbecodeorg%2Fverou-3-modern-javascript-rubendelb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbecodeorg%2Fverou-3-modern-javascript-rubendelb/lists"}