` tag** and key **`<meta>` tags** (`description`, `og:title`) based on the currently active route (e.g., changing the title for `/posts/:id`). This ensures proper data is presented to search engines and social media crawlers.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n23","type":"custom","position":{"x":100,"y":2800},"draggable":true,"data":{"isPremium":false,"label":"Web Security Basics","description":"Learn XSS prevention, CSRF protection, Content Security Policy, secure coding practices, and common web vulnerabilities.","status":"not-started","resources":[{"title":"Web Fundamentals for cybersecurity (SecAura)","url":"https://www.youtube.com/watch?v=WjiRHGfgdMc&list=PLwnDE0CN30Q9x3JMsHrRMGoLhpF8vZ1ka","type":"video"},{"title":"How to secure your website (Cybernews)","url":"https://www.youtube.com/watch?v=84MKOg2l5oo&pp=ygUVd2ViIHNlY3VyaXR5IHR1dG9yaWFs","type":"video"},{"title":"OWASP Top 10 for Frontend (OWASP)","url":"https://getinclub.in/blogs/owasp-top-ten","type":"document"},{"title":"Frontend Security Best Practices (Snyk)","url":"https://snyk.io/learn/javascript-security/","type":"article"}],"phase":"phase-7","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-security-xss","title":"Prevent XSS Attacks via Input Sanitization","description":"Implement a **client-side XSS defense** for a user-input field (e.g., a comment or bio). Use a library (installed via n19) like **DOMPurify** to sanitize the user's input before it is rendered into the DOM (n7). Test by attempting to inject malicious HTML/script tags and verifying the sanitizer correctly strips them out.","difficulty":"Medium","points":200,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-security-xss","ai_grading_rubric":["sanitizeHtml strips script tags and dangerous attributes","Uses DOMPurify or equivalent documented library","Vitest injects malicious strings and asserts safe output","CI npm test passes"]},{"id":"ch-security-csrf-defense","title":"CSRF Defense with Token or Custom Header","description":"Implement a client-side defense against **Cross-Site Request Forgery (CSRF)** for a critical POST request (n20). Choose and implement one of two methods: 1) Configure the form submission to send a **Custom Header** (e.g., `X-Requested-With`). 2) Ensure the application uses secure **SameSite=Strict/Lax** cookies for session management (Node 21 token).","difficulty":"Medium","points":250,"completed":false,"is_coding_challenge":false},{"id":"ch-security-clickjacking","title":"Clickjacking Defense with Header","description":"Implement a defense against **Clickjacking** by configuring the deployment settings or build tool (n14 precursor) to send the **`X-Frame-Options`** header (set to `SAMEORIGIN` or `DENY`) or the modern **`Content-Security-Policy: frame-ancestors`** directive. Verify that external websites are prevented from loading your application within an iframe.","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n14","type":"custom","position":{"x":100,"y":2950},"draggable":true,"data":{"isPremium":false,"label":"Build Tools & Deployment","description":"Use Vite, Webpack, or Parcel for building, and deploy to Netlify, Cloudflare or Vercel.","status":"not-started","resources":[{"title":"Vite Crash Course (Traversy Media)","url":"https://www.youtube.com/watch?v=89NJdbYTgJ8&pp=ygUEVml0ZQ%3D%3D","type":"video"},{"title":"Vite Beginner's Guide (BetterStack)","url":"https://betterstack.com/community/guides/scaling-nodejs/vitejs-explained/","type":"article"},{"title":"Webpack Crash Course (Traversy Media)","url":"https://www.youtube.com/watch?v=IZGNcSuwBZs&pp=ygUHd2VicGFjaw%3D%3D","type":"video"},{"title":"Understand Basic Webpack from Scratch (Medium)","url":"https://medium.com/swlh/understand-basic-webpack-from-scratch-6a1976565ae0","type":"article"},{"title":"Module Bundlers Explained (Fireship)","url":"https://www.youtube.com/watch?v=5IG4UmULyoA&pp=ygUOcGFyY2VsIGJ1bmRsZXI%3D","type":"video"},{"title":"The Ultimate Guide to Parcel Bundler (Dhiwise)","url":"https://www.dhiwise.com/post/the-ultimate-guide-to-parcel-bundler-everything-you-need-to-know","type":"article"},{"title":"Vercel Product Walkthrough (Vercel)","url":"https://www.youtube.com/watch?v=sPmat30SE4k&pp=ygUPdmVyY2VsIHR1dG9yaWFs","type":"video"},{"title":"Deploying on Vercel (Vercel)","url":"https://vercel.com/docs/deployments","type":"article"},{"title":"Netlify Tutorial (Netlify)","url":"https://www.youtube.com/watch?v=6pEVhH37xQE&list=PLzlG0L9jlhEPMR8haUPkxj2hJ_3jh5qa6","type":"video"},{"title":"Cloudflare Workers 101 (Cloudflare Developers)","url":"https://www.youtube.com/watch?v=H7Qe96fqg1M&t=62s&pp=ygUVY2xvdWRmbGFyZSBkZXBsb3ltZW50","type":"video"}],"phase":"phase-8","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-deploy-app","title":"Initial Application Build and Deployment","description":"Using your chosen build tool (Vite, Webpack, etc.), successfully run a production build of your application (e.g., the Blog Interface, n7). Deploy the resulting static output (the `dist` or `build` folder) to a free hosting service like **Vercel, Netlify, or GitHub Pages**. Verify that the live application loads correctly and all routes (n9) are functional on the deployed URL.","difficulty":"Medium","points":200,"completed":false,"is_coding_challenge":false},{"id":"ch-deploy-cloudflare-edge","title":"Edge Deployment with Cloudflare Workers/Pages","description":"Deploy your static application to **Cloudflare Pages**. Then, implement a small **Cloudflare Worker** to intercept requests (e.g., for a specific API route or asset) and execute simple JavaScript logic at the network edge. Use the Worker to enforce a security policy (e.g., adding a secure HTTP header, n23 skill) or to redirect traffic.","difficulty":"Hard","points":600,"completed":false,"is_coding_challenge":false},{"id":"ch-deploy-pr-preview","title":"Continuous Preview Deployment","description":"Configure your hosting service (Vercel/Netlify) to automatically create a **preview deployment** (a unique, temporary URL) for every new **Pull Request** created in your Git repository (n5). Verify that the preview environment successfully builds the application and provides a working staging site for testing new features before they are merged into the main branch.","difficulty":"Hard","points":550,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n24","type":"custom","position":{"x":100,"y":3100},"draggable":true,"data":{"isPremium":false,"label":"CI/CD","description":"Learn Continuous Integration and Continuous Deployment. Set up automated testing, building, and deployment pipelines using GitHub Actions, GitLab CI, or similar tools.","status":"not-started","resources":[{"title":"GitHub Actions Tutorial (TechWorld with Nana)","url":"https://www.youtube.com/watch?v=R8_veQiYBjI&pp=ygURZ2l0aHViIGFjdGlvbnMgY2k%3D","type":"video"},{"title":"CI/CD Explained in 100 Seconds (Fireship)","url":"https://www.youtube.com/watch?v=scEDHsr3APg&pp=ygUJY2kgY2QgY2k%3D","type":"video"},{"title":"GitHub Actions Documentation","url":"https://docs.github.com/en/actions","type":"document"},{"title":"CI/CD Best Practices","url":"https://about.gitlab.com/topics/ci-cd/","type":"article"}],"phase":"phase-8","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-cicd-build-deploy","title":"Continuous Deployment to Staging Environment","description":"Configure a CI/CD workflow that is responsible for deployment. This workflow must only run upon a successful merge into the **`main` branch**. The job must automatically execute the production build command (n14) and deploy the resulting artifacts to a **staging URL** on a hosting platform (Vercel/Netlify).","difficulty":"Medium","points":400,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-cicd-build-deploy","ai_grading_rubric":["GitHub Actions workflow builds on push to main","Production build script outputs static dist artifacts","README documents staging deploy target","CI build job passes"]},{"id":"ch-cicd-secrets-security","title":"Secure Injection of Environment Variables","description":"Take the API Key (n23) required for your application. Store it securely as an **Encrypted CI/CD Secret** (e.g., GitHub Secrets). Modify the deployment workflow to safely inject this secret environment variable into the build process **at runtime**, ensuring the secret is never exposed in logs or committed to the Git repository (n5).","difficulty":"Hard","points":550,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-cicd-secrets-security","ai_grading_rubric":["Workflow references secrets via GitHub Actions secrets syntax","No plaintext API keys in repository files","notes.txt documents secret name configured in repo settings","CI verifies workflow and notes"]}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n15","type":"custom","position":{"x":100,"y":3250},"draggable":true,"data":{"isPremium":false,"label":"Progressive Web Apps (PWAs)","description":"Turn web apps into installable, offline-capable PWAs with service workers.","status":"not-started","resources":[{"title":"PWA Guide (Google Developers)","url":"https://web.dev/progressive-web-apps/","type":"document"},{"title":"PWA in 100 seconds (Fireship)","url":"https://www.youtube.com/watch?v=sFsRylCQblw&pp=ygUMcHdhIHR1dG9yaWFs","type":"video"},{"title":"PWA for beginners (Microsoft Developers","url":"https://www.youtube.com/watch?v=BByUknfLTuA","type":"video"}],"phase":"phase-8","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-pwa-cache-first-static","title":"Offline Capability with Cache-First Strategy","description":"Register a **Service Worker (SW)** and implement a **Cache-First** caching strategy. In the SW's `install` event, cache all static assets (HTML, CSS, JS bundles from n14) in a static cache. **Crucially, turn off your Wi-Fi/network** and verify that the application loads instantly and completely while offline.","difficulty":"Medium","points":350,"completed":false,"is_coding_challenge":false},{"id":"ch-pwa-web-push","title":"Web Push Notifications and Permissions","description":"Implement the client-side logic to request **Push Notification permission** from the user. Upon granting permission, register the user's subscription with the Service Worker (requires simulated backend key exchange). Send a test push notification (simulated from the server) and use the SW's `push` event handler to display the message even when the browser window is closed.","difficulty":"Hard","points":600,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n16","type":"custom","position":{"x":100,"y":3400},"draggable":true,"data":{"isPremium":false,"label":"Server-Side Rendering (SSR) & Static Site Generation","description":"Use Next.js, Nuxt.js, or similar for SSR/SSG to improve performance and SEO.","status":"not-started","resources":[{"title":"What exactly is this ? SSR/SSG (Web Dev Simplified)","url":"https://www.youtube.com/watch?v=p02AIAoImzU&pp=ygUUc2VydmVyIHNpZGUgcmVuZGVpbmc%3D","type":"video"},{"title":"SSR vs SSG in Next.js (Strapi)","url":"https://strapi.io/blog/ssr-vs-ssg-in-nextjs-differences-advantages-and-use-cases","type":"article"},{"title":"Nuxt.js crash course (Syntax)","url":"https://www.youtube.com/watch?v=RhZZ0whiuT8&pp=ygUQbnV4dCBqcyB0dXRvcmlhbA%3D%3D","type":"video"},{"title":"Next.js tutorial for Beginners (Programming with Mosh)","url":"https://www.youtube.com/watch?v=ZVnjOPwW4ZA&pp=ygUHbmV4dCBqcw%3D%3D","type":"video"},{"title":"Astro Quickstart for Beginners (Traversy Media)","url":"https://www.youtube.com/watch?v=XoIHKO6AkoM&pp=ygUJYXN0cm8gc3Ny","type":"video"}],"phase":"phase-9","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-ssr-setup","title":"Initial SSR Setup and Server-Side Data Fetching","description":"Migrate a component (e.g., the Blog Post list, n7) into a meta-framework (Next.js/Nuxt.js). Implement the framework's primary **SSR data fetching function** (e.g., `getServerSideProps`). Verify that the component's data is fetched and rendered on the server, not in the browser, by viewing the page source code (n18 skill).","difficulty":"Medium","points":300,"completed":false,"is_coding_challenge":false},{"id":"ch-ssg-revalidation-isr","title":"Data Freshness with Incremental Static Regeneration (ISR)","description":"Apply a **Stale-While-Revalidate** policy (or **ISR**) to a crucial static page (e.g., a pricing page). Configure the framework to automatically regenerate the static HTML file in the background if a request comes in and the content is older than a set interval (e.g., 60 seconds), demonstrating how to balance SSG performance with data freshness.","difficulty":"Hard","points":550,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n17","type":"custom","position":{"x":100,"y":3550},"draggable":true,"data":{"isPremium":false,"label":"Industry Preferred Technologies","description":"Explore trending tools like, Svelte, ESlint, and AI integration in frontend.","status":"not-started","resources":[],"phase":"phase-10","nodeType":"study","hasSubTech":true,"subTechnologies":[{"id":"st6","name":"Eslint","phase":"Advanced","resources":[{"title":"How to setup ESLint in 2025 (The Common Coder)","url":"https://www.youtube.com/watch?v=eieTlMwCwWU&pp=ygUPZXNsaW50IHR1dG9yaWFs","type":"video"},{"title":"ESLint Documentation","url":"https://eslint.org/docs/latest/use/getting-started","type":"document"}],"challenges":[{"id":"ch-eslint-precommit-hook","title":"Automated Linting with Pre-commit Hook","description":"Integrate **ESLint** and a formatting tool (like Prettier) into a **Git pre-commit hook** (using n19 skills like Husky and lint-staged). Configure the hook to automatically run the linter and auto-fix formatting errors only on the files staged for commit, preventing poorly formatted or non-compliant code from entering the repository (n5).","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-eslint-precommit-hook","ai_grading_rubric":["Husky pre-commit hook runs lint-staged on staged files","ESLint and Prettier configured in package.json","CI verifies hook files and lint script passes"]}]},{"id":"st7","name":"AI Integration","phase":"Advanced","resources":[{"title":"AI-Driver Development for Programmers (Fireship)","url":"https://www.youtube.com/watch?v=iO1mwxPNP5A&pp=ygUaYWkgaW50ZWdyYXRpb24gaW4gZnJvbnRlbmQ%3D","type":"video"},{"title":"LLMs in frontend development","url":"http://getinclub.com/blogs/llms-in-frontend-dev","type":"article"}],"challenges":[{"id":"ch-ai-streaming-response","title":"Real-time LLM Streaming Response UI","description":"Implement a user interface (n7) that connects to a simulated or real Large Language Model (LLM) API (n20). Implement the necessary logic (using Fetch/Axios and async iterators) to handle a **streaming response** from the LLM, displaying the generated text token-by-token in the frontend without buffering the entire reply, improving perceived performance (n12).","difficulty":"Hard","points":550,"completed":false,"is_coding_challenge":false}]},{"id":"st9","name":"WebSocket IO","phase":"Advanced","resources":[{"title":"Learn Socket.io in 30 Minutes (Web Dev Simplified)","url":"https://www.youtube.com/watch?v=ZKEqqIO7n-k&pp=ygUTd2ViIHNvY2tldCB0dXRvcmlhbA%3D%3D","type":"video"},{"title":"Socket.io Documentation","url":"https://socket.io/docs/v4/","type":"document"},{"title":"WebSocket IO in 100 Seconds & Beyond (Fireship)","url":"https://www.youtube.com/watch?v=1BfCnjr_Vjg&pp=ygUMd2Vic29ja2V0IGlv","type":"video"}],"challenges":[{"id":"ch-websocket-chat","title":"Build Real-time Chat App","description":"Create a real-time chat application using Socket.io with features like typing indicators and online user list.","difficulty":"Hard","points":300,"completed":false,"is_coding_challenge":false},{"id":"ch-websocket-state-sync","title":"Centralized Real-Time State Sync","description":"Integrate WebSocket data into the application's **central store** (n8). Configure the WebSocket client to listen for specific server events (e.g., 'STOCK_UPDATE'). Write logic to dispatch an action (n8) upon receiving the event, immediately updating the global application state for multiple components (n7) to consume.","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":false}]}],"hasChallenges":false,"challenges":[],"userStatus":"not-started"},"nodeProgress":null}],"edges":[{"id":"e1","source":"n1","target":"n2"},{"id":"e2","source":"n2","target":"n3"},{"id":"e3","source":"n3","target":"n4"},{"id":"e4","source":"n4","target":"n10"},{"id":"e24","source":"n10","target":"n18"},{"id":"e5","source":"n19","target":"n6"},{"id":"e6","source":"n6","target":"n7"},{"id":"e7","source":"n7","target":"n20"},{"id":"e20","source":"n20","target":"n21"},{"id":"e19","source":"n21","target":"n8"},{"id":"e8","source":"n8","target":"n9"},{"id":"e17","source":"n18","target":"n5"},{"id":"e18","source":"n5","target":"n19"},{"id":"e9","source":"n9","target":"n11"},{"id":"e21","source":"n11","target":"n22"},{"id":"e11","source":"n22","target":"n12"},{"id":"e12","source":"n12","target":"n13"},{"id":"e22","source":"n13","target":"n23"},{"id":"e13","source":"n23","target":"n14"},{"id":"e14","source":"n14","target":"n24"},{"id":"e23","source":"n24","target":"n15"},{"id":"e15","source":"n15","target":"n16"},{"id":"e16","source":"n16","target":"n17"}],"rating":{"average":0,"count":0},"status":"published","contributors":[],"leaderboard":[{"user":{"_id":"67c8ed47f4f3ed5f0497826e","name":"Dumber Kafka","email":"kartikey.sinha.26@gmail.com"},"progress":0,"lastUpdated":"2025-11-15T03:56:46.610Z","_id":"6917f9fe58a478b4a333f4e8"},{"user":{"_id":"6918050658a478b4a334015c","name":"Saberhagan","email":"huidromdiamond123@gmail.com"},"progress":0,"lastUpdated":"2025-11-15T04:45:18.505Z","_id":"6918055e58a478b4a334172f"},{"user":{"_id":"69184ddf58a478b4a334c527","name":"jon","email":"jon@gmail.com"},"progress":0,"lastUpdated":"2025-11-15T09:56:58.567Z","_id":"69184e6a58a478b4a334e016"},{"user":{"_id":"6918adaef7b1fdb8c1eadc47","name":"ALEKSANDR","email":"ads@ventopt.ru"},"progress":0,"lastUpdated":"2025-11-15T16:49:23.285Z","_id":"6918af13f7b1fdb8c1eae9ae"},{"user":{"_id":"691ce783f1772a895e95fd3f","name":"iamfobey","email":"iamfobey@gmail.com"},"progress":0,"lastUpdated":"2025-11-18T21:40:23.282Z","_id":"691ce7c7f1772a895e9602d0"},{"user":{"_id":"691f3d2df1772a895e9c84c6","name":"Елисей","email":"elisey.kaminskiy.2002@mail.ru"},"progress":0,"lastUpdated":"2025-11-20T16:09:51.407Z","_id":"691f3d4ff1772a895e9c8969"},{"user":{"_id":"691f6115f1772a895e9dbcd1","name":"Vitali","email":"vitali.lavau@gmail.com"},"progress":0,"lastUpdated":"2025-11-20T18:45:31.959Z","_id":"691f61cbf1772a895e9dd598"},{"user":{"_id":"6920965ff1772a895ea04719","name":"Elizabeth Efeelobari","email":"elizabethefeelobari@gmail.com"},"progress":0,"lastUpdated":"2025-11-21T16:43:40.786Z","_id":"692096bcf1772a895ea052df"},{"user":{"_id":"69214be3f1772a895ea0db8f","name":"Maxim Solomin","email":"chessclabik@yandex.ru"},"progress":0,"lastUpdated":"2025-11-22T05:43:56.055Z","_id":"69214d9cf1772a895ea11b33"},{"user":{"_id":"69235c68f1772a895ea2c904","name":"Bobble Wobble","email":"etonicki@gmail.com"},"progress":0,"lastUpdated":"2025-11-23T19:29:53.458Z","_id":"692360b1f1772a895ea30c3c"},{"user":{"_id":"6924c3d2f1772a895ea49ac1","name":"Lee meeooo","email":"efeelobarielizabeth@gmail.com"},"progress":0,"lastUpdated":"2025-11-24T21:03:25.806Z","_id":"6924c81df1772a895ea51b4d"},{"user":{"_id":"69132c1158a478b4a31a5a76","name":"Alexandr","email":"martinz2003@yandex.ru"},"progress":0,"lastUpdated":"2025-11-26T10:45:08.492Z","_id":"6926da34f1772a895ea706a6"},{"user":{"_id":"692c156cf1772a895eaa2f2c","name":"Morshu","email":"akbarkarimov250@gmail.com"},"progress":0,"lastUpdated":"2025-11-30T10:00:05.612Z","_id":"692c15a5f1772a895eaa3ede"},{"user":{"_id":"692c60ddf1772a895eaa75fd","name":"Grag","email":"grisha.kochetkov.00@mail.ru"},"progress":0,"lastUpdated":"2025-11-30T15:22:47.753Z","_id":"692c6147f1772a895eaa9bc3"},{"user":{"_id":"692fbebdf1772a895eabb2f7","name":"Sergei Litvinov","email":"lisscv@yandex.ru"},"progress":0,"lastUpdated":"2025-12-03T04:39:34.725Z","_id":"692fbf06f1772a895eabbfe6"},{"user":{"_id":"6911b56058a478b4a3eb3644","name":"Maksim CREY","email":"maksimctrey@gmail.com"},"progress":0,"lastUpdated":"2025-12-15T11:40:48.158Z","_id":"693ff3c0f1772a895eb54e13"},{"user":{"_id":"6941140df1772a895eb643bf","name":"Daria","email":"static.brick@gmail.com"},"progress":0,"lastUpdated":"2025-12-16T08:11:59.972Z","_id":"6941144ff1772a895eb6543d"},{"user":{"_id":"695d4e8b74206a7157d40091","name":"yarbikk","email":"kudravecaroslav@gmail.com"},"progress":0,"lastUpdated":"2026-01-06T18:04:39.085Z","_id":"695d4eb774206a7157d40f9d"},{"user":{"_id":"695d88d674206a7157d442b0","name":"Ugly Xxnl","email":"uglyxnnl@proton.me"},"progress":0,"lastUpdated":"2026-01-06T22:14:35.163Z","_id":"695d894b74206a7157d447a1"},{"user":{"_id":"698a163a702ad11e284847c6","name":"Anthony","email":"maksimov.191313@gmail.com"},"progress":0,"lastUpdated":"2026-02-09T17:16:10.833Z","_id":"698a165a702ad11e28484bbc"},{"user":{"_id":"69cb7bcc09791c6e565e0006","name":"Nanik","email":"nikitashesternev417@gmail.com"},"progress":0,"lastUpdated":"2026-03-31T07:47:26.750Z","_id":"69cb7c0e09791c6e565e0a66"},{"user":{"_id":"67fbe457e463581f8b7160d3","name":"Kartkey SInha","email":"kartikeysinha40@gmail.com"},"progress":0,"lastUpdated":"2026-05-15T07:46:49.297Z","_id":"6a06cf69abc653307c222e0d"}],"relativeRoadmaps":[],"createdBy":"000000000000000000000000","createdAt":"2025-11-12T00:38:00.000Z","updatedAt":"2026-05-15T07:46:49.305Z","__v":23}}],["$","section",null,{"className":"container mx-auto px-4 py-8","aria-label":"Roadmap topics","children":["$","details",null,{"children":[["$","summary",null,{"className":"cursor-pointer text-lg","children":"Explore the topics in this roadmap"}],["$","ul",null,{"className":"mt-4 grid gap-3 md:grid-cols-2","children":[["$","li","n1",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n1","children":"HTML Fundamentals"}]}],["$","li","n2",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n2","children":"CSS Fundamentals"}]}],["$","li","n3",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n3","children":"JavaScript Fundamentals"}]}],["$","li","n4",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n4","children":"Advanced JavaScript"}]}],["$","li","n10",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n10","children":"TypeScript for Frontend"}]}],["$","li","n18",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n18","children":"Browser DevTools & Debugging"}]}],["$","li","n5",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n5","children":"Version Control & Tools"}]}],["$","li","n19",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n19","children":"Package Managers & Scripts"}]}],["$","li","n6",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n6","children":"Responsive Design & CSS Frameworks"}]}],["$","li","n7",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n7","children":"Frontend Frameworks/Library"}]}],["$","li","n20",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n20","children":"API Integration (REST & GraphQL basics)"}]}],["$","li","n21",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n21","children":"Authentication & Authorization"}]}],["$","li","n8",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n8","children":"State Management"}]}],["$","li","n9",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n9","children":"Routing & Navigation"}]}],["$","li","n11",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n11","children":"Testing Frontend Apps"}]}],["$","li","n22",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n22","children":"Error Handling"}]}],["$","li","n12",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n12","children":"Performance Optimization"}]}],["$","li","n13",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n13","children":"Accessibility & SEO"}]}],["$","li","n23",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n23","children":"Web Security Basics"}]}],["$","li","n14",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n14","children":"Build Tools & Deployment"}]}],["$","li","n24",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n24","children":"CI/CD"}]}],["$","li","n15",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n15","children":"Progressive Web Apps (PWAs)"}]}],["$","li","n16",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n16","children":"Server-Side Rendering (SSR) & Static Site Generation"}]}],["$","li","n17",{"children":["$","$L11",null,{"className":"underline underline-offset-4","href":"/roadmap/frontend-developer-roadmap?node=n17","children":"Industry Preferred Technologies"}]}]]}]]}]}]] </article></body></html>

7:[["$","script",null,{"id":"roadmap-course-jsonld","type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"Course\",\"name\":\"Frontend Developer\",\"description\":\"A comprehensive, beginner friendly roadmap from zero to industry ready frontend developer. Covers fundamental languages, modern frameworks, tools, and advanced…\",\"provider\":{\"@type\":\"Organization\",\"name\":\"GetIn Club\",\"url\":\"https://www.getinclub.com\"},\"url\":\"https://www.getinclub.com/roadmap/frontend-developer-roadmap\",\"inLanguage\":\"en\",\"datePublished\":\"2025-11-12T00:38:00.000Z\",\"dateModified\":\"2026-05-15T07:46:49.305Z\",\"image\":\"https://www.getinclub.com/api/og/roadmap/frontend-developer-roadmap\",\"educationalLevel\":\"all\",\"numberOfLessons\":24,\"hasCourseInstance\":{\"@type\":\"CourseInstance\",\"courseMode\":\"online\"}}"}}],["$","script",null,{"id":"roadmap-breadcrumb-jsonld","type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Roadmaps\",\"item\":\"https://www.getinclub.com/roadmaps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Developer\",\"item\":\"https://www.getinclub.com/roadmap/frontend-developer-roadmap\"}]}"}}],["$","$L10",null,{"slug":"frontend-developer-roadmap","initialRoadmap":{"_id":"6917f9e382587a22f31d3e27","title":"Frontend Developer","description":"A comprehensive, beginner-friendly roadmap from zero to industry-ready frontend developer. Covers fundamental languages, modern frameworks, tools, and advanced technologies with hands-on challenges and real-world projects.","category":"Software Development","tags":["frontend","html","css","javascript","react","vue","angular","typescript","tailwind","pwa","accessibility","performance","deployment"],"difficulty":"all","slug":"frontend-developer-roadmap","nodes":[{"id":"n1","type":"custom","position":{"x":100,"y":100},"draggable":true,"data":{"isPremium":false,"label":"HTML Fundamentals","description":"Learn the basics of HTML structure, tags, semantics, and building simple web pages.","status":"not-started","resources":[{"title":"Learn HTML in 1 Hour (Programming with Mosh)","url":"https://www.youtube.com/watch?v=qz0aGYrrlhU&pp=ygUNaHRtbCB0dXRvcmlhbA%3D%3D","type":"video"},{"title":"W3Schools HTML Tutorial","url":"https://www.w3schools.com/html/","type":"tutorial"},{"title":"MDN: Structuring content — Learn the basics","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content","type":"article"}],"phase":"phase-1","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-html-form-attrs","title":"Advanced Form Field Attributes","description":"Build a registration form that includes fields for username, password, and a birthdate. Use necessary **HTML attributes** to enforce input requirements: mark fields as `required`, set maximum and minimum lengths, specify the correct input `type` (e.g., `date`), and use the `pattern` attribute for the username (e.g., requiring only letters and numbers).","difficulty":"Medium","points":200,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-html-form-attrs","ai_grading_rubric":["Registration form includes username, password, and birthdate fields","Fields use required, minlength/maxlength, type=date, and username pattern as specified","HTML passes automated semantic and attribute checks in CI"]},{"id":"ch-html-table","title":"Data Table with Accessibility Features","description":"Create an HTML table to display structured data (e.g., product pricing or a team roster). Use semantic table tags like ``, ``, ``, and ``. Critically, use the `scope` attribute on header cells to explicitly link header rows/columns, improving **accessibility for screen readers**.","difficulty":"Medium","points":250,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-html-table","ai_grading_rubric":["Table uses thead, tbody, th, and caption","Header cells include scope attribute for row/column association","HTML passes automated accessibility structure checks in CI"]}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n2","type":"custom","position":{"x":100,"y":250},"draggable":true,"data":{"isPremium":false,"label":"CSS Fundamentals","description":"Master basic styling, selectors, box model, flexbox, grid, and responsive design principles.","status":"not-started","resources":[{"title":"Learn CSS in 1 Hour (BroCode)","url":"https://www.youtube.com/watch?v=wRNinF7YQqQ&pp=ygUMY3NzIHR1dG9yaWFs0gcJCQMKAYcqIYzv","type":"tutorial"},{"title":"CSS Documentation (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS","type":"document"},{"title":"HTML & CSS Crash Course for Beginners-to-Pro | in-depth tutorial (SuperSimpleDev)","url":"https://www.youtube.com/watch?v=G3e-cpL7ofc&t=1062s&pp=ygUMY3NzIHR1dG9yaWFs","type":"video"}],"phase":"phase-1","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-css-animation-3d","title":"3D Transform and Keyframe Animation","description":"Create a button or card component. Implement an advanced **3D transform** (e.g., rotating the element slightly on the X or Y axis) using the `transform` property upon hover. Additionally, define a CSS **@keyframes** animation to subtly fade in a loading spinner or perform a continuous, non-intrusive effect.","difficulty":"Hard","points":400,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-css-animation-3d","ai_grading_rubric":["Interactive element uses 3D transform on hover","Keyframes animation defined for spinner or subtle motion","CI verifies transform and @keyframes in stylesheet"]},{"id":"ch-css-custom-props","title":"Theming with CSS Variables","description":"Implement **CSS Custom Properties (Variables)** to define your color palette and font stacks at the `:root` level. Refactor your CSS to use these variables for the theme (colors, fonts, spacing), making the entire site's theme configurable by changing just a few lines in the `:root` block.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-css-custom-props","ai_grading_rubric":["CSS defines custom properties on :root for colors and fonts","Component styles consume variables via var()","CI verifies :root variables and var() usage"]}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n3","type":"custom","position":{"x":100,"y":400},"draggable":true,"data":{"isPremium":false,"label":"JavaScript Fundamentals","description":"Learn variables, data types, functions, loops, conditionals, and DOM manipulation.","status":"not-started","resources":[{"title":"MDN JavaScript Guide","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript","type":"tutorial"},{"title":"JavaScript for Beginners (Programming with Mosh)","url":"https://www.youtube.com/watch?v=W6NZfCO5SIk&pp=ygUTamF2YXNjcmlwdCB0dXRvcmlhbA%3D%3D","type":"video"},{"title":"Web Dev Bootcamp (HTML+CSS+JS) | for in-depth learning (freeCodeCamp)","url":"https://www.youtube.com/watch?v=zJSY8tbf_ys&t=1775s&pp=ygUTamF2YXNjcmlwdCB0dXRvcmlhbA%3D%3D","type":"document"}],"phase":"phase-2","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-js-password-indicator","title":"Password Strength Indicator (Conditionals)","description":"Build a form with a password field. Write a function that uses **nested `if/else if/else` conditional statements** to check the password input. The function should check for two criteria (e.g., length > 8 AND contains a number). Update an output message on the page with a corresponding text and background color (n2) for 'Weak', 'Medium', or 'Strong' status.","difficulty":"Medium","points":250,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-js-password-indicator","ai_grading_rubric":["classifyPassword uses nested conditionals for weak/medium/strong","Checks length and numeric character criteria per README","Vitest covers weak, medium, and strong password cases","CI npm test passes"]},{"id":"ch-js-tabbed-interface","title":"Tabbed Interface from Scratch","description":"Build an interface with three tab buttons (n1) and three corresponding content areas. Use **event delegation** by attaching a single event listener to the parent container of the buttons. Write logic to determine which tab was clicked and use basic DOM manipulation (like modifying the CSS `display` property, n2) to **show only the corresponding content section** and hide the others.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-js-tabbed-interface","ai_grading_rubric":["Single delegated click listener on tab button container","Shows only the matching panel and hides others","Vitest simulates clicks with jsdom","CI npm test passes"]}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n4","type":"custom","position":{"x":100,"y":550},"draggable":true,"data":{"isPremium":false,"label":"Advanced JavaScript","description":"Explore ES6+ features, async/await, modules, closures, and modern patterns.","status":"not-started","resources":[{"title":"ES6 in 1 Hour (Programming with Mosh)","url":"https://www.youtube.com/watch?v=NCwa_xi0Uuc&pp=ygUXQWR2YW5jZWQgSmF2YVNjcmlwdCBFUzY%3D","type":"video"},{"title":"You Don't Know JS (Book Series)","url":"https://github.com/getify/You-Dont-Know-JS","type":"document"},{"title":"Modern JavaScript Tutorial","url":"https://javascript.info/","type":"tutorial"}],"phase":"phase-2","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-js-promises-chaining","title":"Sequential Promise Chaining","description":"Create two mock JavaScript functions, `fetchUserId()` and `fetchUserDetails(id)`. Implement these functions to return **Promises** that resolve after different timeouts (simulating latency). Use **Promise chaining (`.then()`)** to ensure the user details are only fetched *after* the user ID has been successfully retrieved. Log the final details to the console.","difficulty":"Medium","points":350,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-js-promises-chaining","ai_grading_rubric":["fetchUserId and fetchUserDetails return Promises","Details fetch runs only after ID resolves via .then() chaining","Vitest uses fake timers or mocks to assert order","CI npm test passes"]},{"id":"ch-js-async-parallel","title":"Parallel API Requests with Promise.all","description":"Make two independent `fetch` API requests to different public endpoints (e.g., users and posts). Use **`Promise.all()`** with **`async/await`** to execute both requests **in parallel**. Ensure that the function only proceeds to process the data once *both* responses have successfully returned, demonstrating efficiency for concurrent resource loading.","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-js-async-parallel","ai_grading_rubric":["fetchParallel uses Promise.all with async/await","Waits for both requests before returning combined results","Vitest mocks fetch for two endpoints","CI npm test passes"]}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n10","type":"custom","position":{"x":100,"y":700},"draggable":true,"data":{"isPremium":false,"label":"TypeScript for Frontend","description":"Add type safety to JavaScript; learn core TypeScript and framework integration. Can be learned in parallel with frameworks.","status":"not-started","resources":[{"title":"TypeScript Handbook","url":"https://www.typescriptlang.org/docs/handbook/intro.html","type":"document"},{"title":"TypeScript Tutorial Course (Programming with Mosh)","url":"https://www.youtube.com/watch?v=d56mG7DezGs&pp=ygUTdHlwZXNjcmlwdCB0dXRvcmlhbA%3D%3D","type":"video"}],"phase":"phase-5","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-ts-framework-props","title":"Typing Component Props and State","description":"Take the Card Component (Node 7). Convert the component to TypeScript and define a dedicated **Interface** for its **Props**. Ensure the component only accepts properties that strictly adhere to this interface. Also, explicitly define the type of the component's internal local state (e.g., a counter or form value).","difficulty":"Medium","points":300,"completed":false,"is_coding_challenge":false},{"id":"ch-ts-utility-types","title":"Practical Use of Advanced Utility Types","description":"Using the complex Interface from **'Define Complex Interface and Type Aliases'**, demonstrate the practical use of two built-in TypeScript **Utility Types**: 1) Use **`Partial`** to define a function that accepts an object capable of updating only *some* fields. 2) Use **`Omit`** to create a new type that excludes a non-updatable field (e.g., `id`) for use in a form submission.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-ts-utility-types","ai_grading_rubric":["updateUser accepts Partial for partial updates","SubmitUser type omits id via Omit","TypeScript compiles and Vitest exercises both utilities","CI npm test passes"]},{"id":"ch-ts-state-typing","title":"Typing Centralized State and Selectors","description":"Integrate TypeScript with your **Central Store Architecture** (Node 8). Explicitly define the types for the entire **Global State Object**. Then, type the **Selector/Getter functions** to ensure they strictly return the expected type (e.g., an array of `User` types or a specific `number` total), enforcing safety across asynchronous updates (Node 8).","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n18","type":"custom","position":{"x":100,"y":850},"draggable":true,"data":{"isPremium":false,"label":"Browser DevTools & Debugging","description":"Use Chrome/Edge DevTools for inspecting DOM, CSS, network, performance profiling, and debugging JS.","status":"not-started","resources":[{"title":"Debuggin JavaScript with Chrome DevTools (Chrome for Dev)","url":"https://www.youtube.com/watch?v=H0XScE08hy8&pp=ygUcQnJvd3NlciBEZXZUb29scyAmIERlYnVnZ2luZw%3D%3D","type":"video"},{"title":"14 Dev tools that will make you a better developer (camelCase)","url":"https://www.youtube.com/watch?v=pw14NzfYPa8&pp=ygUcQnJvd3NlciBEZXZUb29scyAmIERlYnVnZ2luZ9IHCQkDCgGHKiGM7w%3D%3D","type":"video"},{"title":"Chrome DevTools Documentation","url":"https://developer.chrome.com/docs/devtools","type":"document"},{"title":"21+ Browser Dev Tools (Fireship)","url":"https://www.youtube.com/watch?v=TcTSqhpm80Y&pp=ygUcQnJvd3NlciBEZXZUb29scyAmIERlYnVnZ2luZw%3D%3D","type":"article"}],"phase":"phase-2","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-devtools-memory-leak-check","title":"Basic Memory Leak Detection (Heap Snapshot)","description":"Create a function that is called repeatedly and **retains references to large, unnecessary objects** (simulating a basic memory leak). Use the **Memory Panel** to take two or three **Heap Snapshots** at different stages of execution. Compare the snapshots to identify objects that are growing in size and are incorrectly retained in memory, demonstrating basic memory debugging.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":false},{"id":"ch-devtools-security-headers","title":"Security Header and Mixed Content Audit","description":"Load a page that deliberately uses an image or script loaded over unencrypted **HTTP** (Mixed Content) while the main page is loaded over HTTPS. Use the **Security Panel** to audit the page. Identify the insecure origins and use the **Console Panel** to show how the browser reports the resulting security warnings/errors.","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n5","type":"custom","position":{"x":100,"y":1000},"draggable":true,"data":{"isPremium":false,"label":"Version Control & Tools","description":"Master Git, GitHub, code editors (VS Code), and basic build tools.","status":"not-started","resources":[{"title":"Git & GitHub Crash Course (Traversy Media)","url":"https://youtu.be/vA5TTz6BXhY?si=UJwHBLzHRloNAoXt","type":"tutorial"},{"title":"Git and Github Cheatsheet (getinclub)","url":"https://getinclub.in/blogs/version-control-cheatsheet","type":"document"},{"title":"Github Docs","url":"https://docs.github.com/en","type":"document"}],"phase":"phase-3","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-git-history-rewriting","title":"History Rewriting with `rebase` and `squash`","description":"Create a new branch where you implement a small feature (e.g., adding a new image). Make three separate, small commits for this feature. Use **`git rebase -i`** to clean up the branch's history by combining (squashing) the three small commits into a **single, meaningful commit** before merging the cleaner history back into the main branch.","difficulty":"Medium","points":300,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-git-history-rewriting","ai_grading_rubric":["notes.txt documents squash/rebase workflow without TODO placeholders","README summarizes interactive rebase steps used","CI verifies notes completed"]},{"id":"ch-git-stash-rollback","title":"Stashing Unfinished Work and Rolling Back","description":"Start a new feature and modify several files. Use **`git stash`** to temporarily save these uncommitted changes. Switch to the main branch, make a quick, urgent commit, and then switch back and **`git stash pop`** the original work to continue the feature. Finally, use **`git revert`** to safely undo the urgent commit from the main branch.","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-git-stash-rollback","ai_grading_rubric":["notes.txt documents stash, pop, and revert workflow","README explains branch switches during the exercise","CI verifies notes completed"]}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n19","type":"custom","position":{"x":100,"y":1150},"draggable":true,"data":{"isPremium":false,"label":"Package Managers & Scripts","description":"Learn npm/yarn/pnpm basics, semantic versioning, npx, scripts, and dependency management.","status":"not-started","resources":[{"title":"npm Docs — Getting Started","url":"https://docs.npmjs.com/getting-started","type":"document"},{"title":"npm for absolute beginners (Kevin Powell)","url":"https://www.youtube.com/watch?v=UYz-9UaUp2E&t=24s&pp=ygUMbnBtIHR1dG9yaWFs","type":"video"},{"title":"Yarn package manager crash course (Traversy Media)","url":"https://www.youtube.com/watch?v=g9_6KmiBISk&pp=ygUdeWFybiBwYWNrYWdlIG1hbmFnZXIgdHV0b3JpYWw%3D","type":"video"},{"title":"Yarn — Introduction","url":"https://yarnpkg.com/getting-started","type":"document"},{"title":"What is pnpm (Syntax)","url":"https://www.youtube.com/watch?v=hiTmX2dW84E&pp=ygUEcG5wbQ%3D%3D","type":"video"},{"title":"What makes pnpm performant (pnpm)","url":"https://www.youtube.com/watch?v=RUburBvJ8fA&pp=ygUEcG5wbQ%3D%3D","type":"video"},{"title":"pnpm — Introduction","url":"https://pnpm.io/motivation","type":"document"}],"phase":"phase-3","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-pm-package-lock","title":"Analyzing and Updating Package Locks","description":"Start a new project and install a dependency (e.g., Express). Analyze the generated **lock file** (`package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml`) to find the exact version, integrity hash, and dependency tree of the installed library. Then, use the appropriate command (`npm update`, `yarn upgrade`, etc.) to update that dependency and analyze the changes in the lock file.","difficulty":"Medium","points":350,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-pm-package-lock","ai_grading_rubric":["package-lock.json present with integrity hashes","notes.txt documents version and update command used","CI verifies lockfile structure"]},{"id":"ch-pm-custom-pre-post","title":"Implementing Pre- and Post-Script Hooks","description":"In your `package.json`, define a script named `build`. Implement two corresponding **lifecycle scripts**: a `prebuild` script that runs a linting command and a `postbuild` script that displays a success message. Demonstrate that these lifecycle scripts execute automatically and sequentially before and after the main `build` script runs.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-pm-custom-pre-post","ai_grading_rubric":["prebuild runs lint step before build","postbuild prints success after build","Vitest or CI script verifies hook execution order","CI npm test passes"]}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n6","type":"custom","position":{"x":100,"y":1300},"draggable":true,"data":{"isPremium":false,"label":"Responsive Design & CSS Frameworks","description":"Learn media queries, mobile-first design, and popular CSS frameworks like Bootstrap or Tailwind.","status":"not-started","resources":[{"title":"Tailwind vs Bootstrap vs Sass","url":"https://getinclub.in/blogs/tailwind-bootstrap-sass","type":"document"},{"title":"The easy way to responsive web design (Sajid)","url":"https://www.youtube.com/watch?v=l04dDYW-QaI&pp=ygUVcnNlcG9uc2l2ZSB3ZWIgZGVzaWdu","type":"video"},{"title":"Tailwind CSS Tutorial (NetNinja)","url":"https://www.youtube.com/watch?v=0zA6GZa2ZKc&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw","type":"video"},{"title":"Tailwind CSS Documentation","url":"https://tailwindcss.com/docs/installation/using-vite","type":"document"},{"title":"Bootstrap Getting Started (Web Dev Simplified)","url":"https://www.youtube.com/watch?v=Jyvffr3aCp0&pp=ygUJYm9vdHN0cmFw0gcJCQMKAYcqIYzv","type":"video"},{"title":"Bootstrap Documentation","url":"https://getbootstrap.com/docs/5.3/getting-started/introduction/","type":"document"},{"title":"Complete Sass Tutoial (Net Ninja)","url":"https://www.youtube.com/watch?v=3R4fpnIAozs&list=PL4cUxeGkcC9jxJX7vojNVK-o8ubDZEcNb","type":"video"},{"title":"Sass Documentation","url":"https://sass-lang.com/","type":"document"}],"phase":"phase-3","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-tailwind-form","title":"Styling the Contact Form with Tailwind","description":"Take the contact form HTML (n1) and style all inputs, labels, and the submit button using Tailwind utilities. Use classes to add rounded borders, focus rings (`focus:ring`), and responsive margin/padding. Ensure the inputs are full-width on mobile and constrained on desktop (`md:w-1/2`).","difficulty":"Medium","points":350,"completed":false,"is_coding_challenge":false},{"id":"ch-scss-variables","title":"Sass/SCSS Variable and Nesting Refactor","description":"Convert a small section of your standard CSS (n2) into **SCSS/Sass**. Use **variables** to define your primary and secondary colors and font stack. Utilize **nesting** to structure selectors (e.g., nesting `:hover` or child selectors) to demonstrate the improved organization and maintainability offered by a preprocessor.","difficulty":"Medium","points":400,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-scss-variables","ai_grading_rubric":["SCSS uses variables for colors and font stack","Nesting organizes hover or child selectors","CI compiles SCSS to CSS successfully"]},{"id":"ch-tailwind-custom-utility","title":"Tailwind Customization and Component Extraction","description":"Extend Tailwind's configuration (`tailwind.config.js`) to add a **custom color** (e.g., 'brand-red') and a **custom spacing unit**. Then, use the **`@apply`** directive to create a reusable component class (e.g., `.btn-primary`) that encapsulates several utility classes, demonstrating advanced usage and adherence to the framework's architecture.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n7","type":"custom","position":{"x":100,"y":1450},"draggable":true,"data":{"isPremium":false,"label":"Frontend Frameworks/Library","description":"Explore popular frameworks for building dynamic UIs.","status":"not-started","resources":[],"phase":"phase-4","nodeType":"study","hasSubTech":true,"subTechnologies":[{"id":"st0","name":"Choose your Tech","phase":"Beginner","resources":[{"title":"Choosing a frontend framework (BrowserStack)","url":"https://www.browserstack.com/guide/angular-vs-react-vs-vue","type":"article"},{"title":"Which JS framework is best ? (fireship)","url":"https://youtu.be/cuHDQhDhvPE?si=lX4AAJ2umohNbtR5","type":"video"}],"challenges":[]},{"id":"st1","name":"React","phase":"Beginner","resources":[{"title":"React Documentation","url":"https://react.dev/learn","type":"document"},{"title":"React for Beginners (Programming with Mosh)","url":"https://www.youtube.com/watch?v=SqcY0GlETPk&pp=ygUOcmVhY3QgdHV0b3JpYWw%3D","type":"video"}],"challenges":[{"id":"ch-react-blog-async","title":"React Blog Interface with Async Data","description":"Create a blog UI using React components. Fetch an array of posts from a public API (n4) and display the titles and summaries. Implement client-side routing (React Router) to show a full post detail page, passing data via URL parameters.","difficulty":"Medium","points":300,"completed":false,"is_coding_challenge":false},{"id":"ch-react-context","title":"Global State Management with Context/Hooks","description":"Implement a basic global application theme toggle (light/dark mode). Use the **Context API** and **`useContext` hook** to store the current theme state. Consumer components (e.g., header, main content) must be able to read this state and instantly update their styling without prop drilling.","difficulty":"Hard","points":400,"completed":false,"is_coding_challenge":false}]},{"id":"st2","name":"Vue.js","phase":"Beginner","resources":[{"title":"Vue.js Guide","url":"https://vuejs.org/guide/introduction.html#introduction","type":"document"},{"title":"Vue.js Crash Course (Traversy Media)","url":"https://www.youtube.com/watch?v=VeNfHj6MhgA&pp=ygUNdnVlIGpzIGNvdXJzZQ%3D%3D","type":"video"}],"challenges":[{"id":"ch-vue-blog-routing","title":"Vue Blog Interface with Routing","description":"Create a blog UI using Vue components. Fetch post data from an API (n4) and use the **`v-for` directive** for dynamic list rendering. Implement Vue Router to handle navigation to a post detail page (`/posts/:id`), ensuring reactive updates when the route changes.","difficulty":"Medium","points":300,"completed":false,"is_coding_challenge":false},{"id":"ch-vue-computed","title":"Form Validation with Computed Properties","description":"Build a complex signup form. Implement all validation logic (e.g., password matching, email format) using **Computed Properties**. The submit button should only become enabled (`v-bind:disabled`) when all computed validation properties are `true`, demonstrating Vue's efficient reactivity for form state.","difficulty":"Hard","points":400,"completed":false,"is_coding_challenge":false}]},{"id":"st3","name":"Angular","phase":"Beginner","resources":[{"title":"Angular Documentation","url":"https://angular.dev/overview","type":"document"},{"title":"Angular Tutorial (Programming with Mosh)","url":"https://www.youtube.com/watch?v=k5E2AVpwsko&pp=ygURYW5ndWxhciBqcyBjb3Vyc2U%3D","type":"video"}],"challenges":[{"id":"ch-angular-blog-services","title":"Angular Blog Interface with Services","description":"Create a blog UI using Angular components and **Modules**. Use an Angular **Service** to handle all post data retrieval from an external API (n4). Implement Angular Routing to navigate between the post list and individual post details.","difficulty":"Medium","points":300,"completed":false,"is_coding_challenge":false},{"id":"ch-angular-rxjs","title":"HTTP Client and Basic Observable Handling","description":"Use the `HttpClient` module to perform a GET request. Handle the asynchronous response using a basic **RxJS Observable pattern** (`subscribe()`), ensuring you correctly handle any errors (`catchError`) before displaying the data in the component, demonstrating RxJS fundamentals.","difficulty":"Hard","points":400,"completed":false,"is_coding_challenge":false}]}],"hasChallenges":false,"challenges":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n20","type":"custom","position":{"x":100,"y":1600},"draggable":true,"data":{"isPremium":false,"label":"API Integration (REST & GraphQL basics)","description":"Work with REST APIs: HTTP methods, JSON, fetch/axios, error handling; and get an introduction to GraphQL queries.","status":"not-started","resources":[{"title":"What is Rest API (ByteByteGo)","url":"https://www.youtube.com/watch?v=-mN3VyJuCjM&pp=ygURcmVzdCBhcGkgdHV0b3JpYWw%3D","type":"video"},{"title":"HTTP Status Codes (getinclub)","url":"https://getinclub.in/blogs/http-status-codes","type":"article"},{"title":"JSON in 10 minutes (Web Dev Simplified)","url":"https://www.youtube.com/watch?v=iiADhChRriM&t=15s&pp=ygUManNvbiBhbmQgYXBp","type":"video"},{"title":"How to fetch data from API (BroCode)","url":"https://www.youtube.com/watch?v=37vxWr0WgQk&pp=ygUVZmV0Y2ggYW5kIGF4aW9zIGluIGpz","type":"video"},{"title":"Axios Tutorial (Traversy Media)","url":"https://www.youtube.com/watch?v=6LyagkoRWYA&pp=ygUPYXhpb3VzIHR1dG9yaWFs","type":"video"},{"title":"GraphQL Crash Course (Net Ninja)","url":"https://www.youtube.com/watch?v=xMCnDesBggM&list=PL4cUxeGkcC9gUxtblNUahcsg0WLxmrK_y","type":"video"}],"phase":"phase-5","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-api-data-normalization","title":"Client-Side Data Normalization and Mapping","description":"Fetch complex, deeply nested JSON data from a public API. Before storing it in the component state (n7), write a transformation function (n4) that **flattens (normalizes)** the data structure to make it easier to access and render across multiple components.","difficulty":"Hard","points":400,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-api-data-normalization","ai_grading_rubric":["normalizePosts flattens nested API payload into id-keyed map","Preserves required fields for list and detail views","Vitest uses fixture JSON","CI npm test passes"]},{"id":"ch-api-rest-vs-graphql","title":"GraphQL Query for Data Minimization","description":"Compare REST and GraphQL: Create a component that fetches a list of items. First, use a **REST GET endpoint** that returns 10 fields per item. Then, implement the same fetch using a **GraphQL client** (using a public endpoint) and explicitly request **only 3 fields**. Log the response payload size difference to demonstrate the efficiency and minimization benefit of GraphQL.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":false},{"id":"ch-api-caching","title":"Simple Client-Side Caching Strategy","description":"Implement a basic **client-side data caching strategy** using a separate service or utility function. When data is fetched for the first time, store it locally (e.g., in a JS variable or localStorage, n4/n18). On subsequent attempts, check the cache before making a network request, demonstrating how to reduce redundant API calls and improve performance.","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-api-caching","ai_grading_rubric":["Cache returns fresh data within TTL and refetches after expiry","Separate cache keys do not collide","Vitest covers hit, miss, and expiry with mocked time","CI npm test passes"]}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n21","type":"custom","position":{"x":100,"y":1750},"draggable":true,"data":{"isPremium":false,"label":"Authentication & Authorization","description":"Learn JWT tokens, OAuth flows, session management, and implementing secure user authentication in frontend applications.","status":"not-started","resources":[{"title":"JWT Authentication Tutorial (Web Dev Simplified)","url":"https://www.youtube.com/watch?v=7Q17ubqLfaM&pp=ygUJanNvbiB3ZWIgdG9rZW4%3D","type":"video"},{"title":"OAuth 2.0 Explained (Oktadev)","url":"https://www.youtube.com/watch?v=996OiexHze0&pp=ygUJb2F1dGggMi4w","type":"video"},{"title":"Authentication in React Tutorial (Cosden Solutions)","url":"https://www.youtube.com/watch?v=AcYF18oGn6Y&pp=ygUUcmVhY3QgYXV0aGVudGljYXRpb24%3D","type":"video"},{"title":"Auth0 Documentation","url":"https://auth0.com/docs","type":"document"},{"title":"Firebase Authentication Guide (Firebase)","url":"https://www.youtube.com/watch?v=vBUk293QSKY&pp=ygUXZmlyZWJhc2UgYXV0aGVudGljYXRpb24%3D","type":"video"}],"phase":"phase-5","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-auth-token-flow","title":"Implement JWT Token Storage and State Update","description":"Integrate the login form (`ch-auth-forms`) with a simulated or real authentication API (n20). Upon receiving a successful response containing a **JWT (JSON Web Token)**, write the token to secure local storage (e.g., Local Storage or Session Storage). Update the global application state (n7) to mark the user as authenticated and display a personalized welcome message.","difficulty":"Medium","points":250,"completed":false,"is_coding_challenge":false},{"id":"ch-auth-api-interceptor","title":"Automatic Token Attachment (Interceptor)","description":"Configure your framework's API client (Fetch wrapper, Axios, or Angular `HttpClient`) to automatically intercept every outgoing request. Implement logic to check if a JWT token is present in storage (`ch-auth-token-flow`) and, if so, attach it to the request header (e.g., `Authorization: Bearer `). This ensures all API calls are authenticated without repetitive code.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":false},{"id":"ch-auth-authorization-ui","title":"Authorization: Role-Based UI Element Control","description":"Simulate a scenario where the authenticated user object contains a `role` property (e.g., 'admin' or 'user'). Implement **role-based authorization** logic to conditionally render specific UI elements (e.g., an 'Admin Panel' button, n7) only if the current user state matches the required role. If the user is missing permissions, the element must not be rendered in the DOM.","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n8","type":"custom","position":{"x":100,"y":1900},"draggable":true,"data":{"isPremium":false,"label":"State Management","description":"Learn tools like Redux, Vuex, NgRx for managing app state in complex applications.","status":"not-started","resources":[{"title":"State Management in frontend (getinclub)","url":"https://getinclub.in/blogs/state-management","type":"article"},{"title":"Redux Tutorial (Programming with Mosh)","url":"https://www.youtube.com/watch?v=poQXNp9ItL4&pp=ygUMcmVkdXggY291cnNl","type":"video"},{"title":"Redux Crash Course (in-depth) (freeCodeCamp)","url":"https://www.youtube.com/watch?v=SlC8941Wwrk&pp=ygUMcmVkdXggY291cnNl","type":"video"},{"title":"Pinia Crash Course (Net Ninja)","url":"https://www.youtube.com/watch?v=0QN74j3EyQc&list=PL4cUxeGkcC9hp28dYyYBy3xoOdoeNw-hD&pp=0gcJCbAEOCosWNin","type":"video"},{"title":"Understanding NgRx (Joshua Morony)","url":"https://www.youtube.com/watch?v=kx0VTgTtSBg&pp=ygUEbmdyeA%3D%3D","type":"video"}],"phase":"phase-5","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-state-derived-memo","title":"Computed State and Memoization for Performance","description":"Design a store structure that holds a large, complex array (e.g., a list of filtered products). Implement a **Getter Function** (or selector) within the store architecture to perform two things: 1) Calculate a complex **derived value** (e.g., the total sum of prices for all filtered items). 2) Ensure this derived value is **memoized** (i.e., only recalculated if the original product array state changes), demonstrating a critical performance optimization technique.","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":false},{"id":"ch-state-cross-feature-update","title":"Decoupled State Mutation and Notification","description":"Simulate two logically separate feature domains (e.g., `User Profile` and `Notification Center`). Create a central store to manage both states. Implement a scenario where an update function in the **`User Profile`** domain (e.g., changing the user's ID) must trigger a corresponding, immediate update in the **`Notification Center`** domain (e.g., clearing the notification array for the old user). This demonstrates highly decoupled, cross-feature state communication.","difficulty":"Hard","points":550,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n9","type":"custom","position":{"x":100,"y":2050},"draggable":true,"data":{"isPremium":false,"label":"Routing & Navigation","description":"Implement client-side routing for single-page applications.","status":"not-started","resources":[{"title":"React Router Tutorial","url":"https://reactrouter.com/home","type":"tutorial"},{"title":"React Router Crash Course (Net Ninja)","url":"https://www.youtube.com/watch?v=0sfBVj03sRY&list=PL4cUxeGkcC9iVKmtNuCeIswnQ97in2GGf","type":"video"},{"title":"Vue Router Guide","url":"https://router.vuejs.org/installation.html","type":"tutorial"},{"title":"Vue3 Routing Beginner to Advanced (Laiture Academy)","url":"https://www.youtube.com/watch?v=PBqQO-keR1s&pp=ygULdnVlIHJvdXRpbmc%3D","type":"video"},{"title":"Angular Router","url":"https://angular.dev/guide/routing","type":"tutorial"},{"title":"Angular Routing & Navigation (Programming with Mosh)","url":"https://www.youtube.com/watch?v=tUCa3JcFILI&pp=ygUVYW5ndWxhciByb3V0ZXIgY291cnNl","type":"video"}],"phase":"phase-5","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-route-guard-auth","title":"Pre-Navigation Guard for Authorization","description":"Implement a **pre-navigation check** (often called a 'Route Guard' or 'Navigation Guard') within the router's lifecycle. This check must inspect the current user's authentication state (Node 21). If the user attempts to access a protected route without being authenticated, block the transition and programmatically redirect them to the `/login` page.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":false},{"id":"ch-route-data-resolver","title":"Guaranteed Data Pre-loading (Resolver Pattern)","description":"Implement a **data pre-loading mechanism** (often called a 'Resolver' or data hook) in the router configuration for a component that requires external data. The component must **not** be initialized or rendered until the external API request (Node 20) is fully resolved (successfully or with an error). This guarantees the component never loads with an empty data state.","difficulty":"Hard","points":500,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n11","type":"custom","position":{"x":100,"y":2200},"draggable":true,"data":{"isPremium":false,"label":"Testing Frontend Apps","description":"Learn unit, integration, and end-to-end testing with Jest, React Testing Library, etc.","status":"not-started","resources":[{"title":"Frontend Testing (BrowserStack)","url":"https://www.browserstack.com/guide/front-end-testing","type":"document"},{"title":"Testing with Jest (freeCodeCamp)","url":"https://www.youtube.com/watch?v=IPiUDhwnZxA&pp=ygUMamVzdCB0ZXN0aW5n","type":"video"},{"title":"Testing in React Tutorial (Pedro Tech)","url":"https://www.youtube.com/watch?v=JBSUgDxICg8&pp=ygUVcmVhY3QgdGVzdGluZyBsaWJyYXJ5/","type":"video"},{"title":"Cypress Testing with React (Cosden Solutions)","url":"https://www.youtube.com/watch?v=6BkcHAEWeTU&pp=ygUTQ3lwcmVzcyBFMkUgVGVzdGluZw%3D%3D","type":"tutorial"}],"phase":"phase-6","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-test-unit-logic","title":"Unit Testing Utility Functions","description":"Take a simple, isolated JavaScript utility function (e.g., the Tip Calculator from Node 3 or a data normalization function from Node 20). Write a set of **Unit Tests** using a testing framework like **Jest** to cover the function's core logic. Ensure the tests include checks for **valid inputs**, **edge cases** (e.g., zero or negative values), and **error handling**.","difficulty":"Medium","points":200,"completed":false,"is_coding_challenge":true,"github_template_id":"template-frontend-ch-test-unit-logic","ai_grading_rubric":["calculateTip implements percentage tip on bill amount","Tests cover valid inputs, edge cases, and error handling","Vitest suite passes with meaningful assertions","CI npm test passes"]},{"id":"ch-test-user-interaction","title":"Testing User Interaction and State Updates","description":"Write a robust **Integration Test** for a component with complex interaction (e.g., the Counter Component from Node 7). Simulate user clicks on the 'Increment' and 'Decrement' buttons. Use RTL's methods (e.g., `fireEvent` or `user-event`) to assert that the component's internal state updates correctly and the UI displays the new value after each simulated interaction.","difficulty":"Hard","points":400,"completed":false,"is_coding_challenge":false},{"id":"ch-test-e2e-form","title":"End-to-End Test for Form Submission","description":"Implement an **End-to-End (E2E)** test using a tool like **Cypress** or **Playwright**. The test must simulate a user navigating to the Contact Form (Node 1/9), typing values into the input fields, clicking the submit button, and asserting that a successful confirmation message (or API call mock) is received, simulating the full user flow.","difficulty":"Hard","points":450,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n22","type":"custom","position":{"x":100,"y":2350},"draggable":true,"data":{"isPremium":false,"label":"Error Handling","description":"Learn error boundaries, try-catch patterns, error monitoring with Sentry, and graceful error handling in frontend applications.","status":"not-started","resources":[{"title":"JavaScript Error Handling (Bro Code)","url":"https://www.youtube.com/watch?v=NwoAZF66_Go&pp=ygUUZXJyb3IgaGFuZGxpbmcgaW4ganM%3D","type":"video"},{"title":"Error Handling in React (Cosden Solutions)","url":"https://www.youtube.com/watch?v=OQQAv8t3bfc&pp=ygUWcmVhY3QgZXJyb3IgYm91bmRhcmllcw%3D%3D","type":"video"},{"title":"Sentry in Six Minutes (Sentry)","url":"https://www.youtube.com/watch?v=4djseRVSan8&pp=ygUVc2VudHJ5IGVycm9yIHRyYWNraW5n","type":"video"},{"title":"Sentry Documentation","url":"https://docs.sentry.io/platforms/javascript/","type":"document"}],"phase":"phase-6","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-error-form-validation-feedback","title":"Form Error State and Visual Feedback","description":"Expand the form handling from previous nodes (Node 1/7). Implement a dedicated state variable in your component to track form errors. When a field fails validation, display the error message **immediately adjacent** to the field and apply a visual cue (e.g., red border, n2) to the input itself, providing clear and instantaneous user feedback.","difficulty":"Medium","points":350,"completed":false,"is_coding_challenge":false},{"id":"ch-error-state-resilience","title":"Central Store Error State and Reset","description":"Modify your Central Store (Node 8). Implement a dedicated `errorState` property. When an API call fails within a thunk/effect (Node 8), update the store's `errorState` with the error message. Implement a component that displays this global error. Finally, create a `resetError()` update function that clears the global error state, making the system resilient to temporary failures.","difficulty":"Hard","points":550,"completed":false,"is_coding_challenge":false}],"subTechnologies":[],"userStatus":"not-started"},"nodeProgress":null},{"id":"n12","type":"custom","position":{"x":100,"y":2500},"draggable":true,"data":{"isPremium":false,"label":"Performance Optimization","description":"Techniques for lazy loading, code splitting, image optimization, and web vitals.","status":"not-started","resources":[{"title":"Web Performance Fundamentals (Chrome Developers)","url":"https://web.dev/learn/performance/","type":"article"},{"title":"Javascript Performance is weird ... (Beyond Fireship)","url":"https://www.youtube.com/watch?v=_pWA4rbzvIg&pp=ygUkUGVyZm9ybWFuY2UgT3B0aW1pemF0aW9uIGluIGZyb250ZW5k","type":"video"},{"title":"Guide to web performance (Beyond Fireship)","url":"https://www.youtube.com/watch?v=0fONene3OIA&pp=ygUkUGVyZm9ybWFuY2UgT3B0aW1pemF0aW9uIGluIGZyb250ZW5k","type":"video"}],"phase":"phase-7","nodeType":"study","hasSubTech":false,"hasChallenges":true,"challenges":[{"id":"ch-optimize-image","title":"Responsive Image Optimization and NextGen Formats","description":"Load a high-resolution hero image (n1). Implement a technique using the native **`

Frontend Developer Roadmap

Related Simulations