[
  {
    "path": "README.md",
    "content": "الفرونت اند هو من اكتر مجالات البرمجه انتشارا بسبب سهوله تعلمه في البدايه\nو معظمنا اصلا هنا نعرف بعض بسببه. لكن فيه ناس كتير مشتته و مش عارف الخريطه بظبط و تتعلم ازاي. و ايه الطريق السليم.\n\nف الريبو دي هتكون عباره عن رودماب او خريطه لتعلم الفرونت اند باستخدام React من اول ما تبدأ لحد ما تكون مميز عن غيرك ان شاء الله.\n\nهحاول يكون فيه كل المعلومات و الطرق اللي انت محتاجها و انت بتتعلم بالتفصيل\nيعني مش هقولك ايه هي التقنيات اللي انت هتتعلمها بس، لكن هقولك كمان ايه التطبيقات اللي هتعملها و امتى تعرف انك خلصت و تقدر تروح على الخطوه اللي بعدها.\n\nهتعامل معاك انك شخص مذاكر الاساسيات، زي الخوارزميات و هياكل البيانات الخ\nو لو مذاكرتش الاساسيات و محتاج تعرف عنها اكتر او تعرف تتعلمها منين، ف ده [بوست عظيم عن الأساسيات](https://foregoing-sunshine-22c.notion.site/Programming-Fundamentals-11dabbeedc95807da767d185884d6aab) اللي لازم تعرفها قبل ما تبدأ تتعلم الفرونت إند.\n\nأنصحك تروح تشوفه الأول، وهتلاقي فيه كل اللي محتاجه عشان تأسس نفسك كويس. بعد ما تخلص من الأساسيات، تعال هنا وهتلاقي كل اللي يساعدك تتعلم الفرونت إند خطوة بخطوة\n\n---\n\nأهم نقطه بقا\n\n`\"يَا أَيُّهَا الَّذِينَ آمَنُوا اصْبِرُوا وَصَابِرُوا وَرَابِطُوا وَاتَّقُوا اللَّهَ لَعَلَّكُمْ تُفْلِحُونَ\"`\n\nبما انك اختارت مجال السوفتوير عموما لازم تبقا مقتنع ان المجال العائد بتاعه حلو اه، لكن طويل، و لازم يبقا نفسك انت كمان طويل و تصبر على طلب العلم عشان ربنا يكرمك و يوفقك.\n\n\nكل تقنيه هتكون متقسمه الى مجموعة من الاجزاء\n- جزء اسم التقنيه\n- جزء فيه الوصف\n- جزء فيه المصادر\n- جزء فيه التطبيقات\n- جزء فيه الادوات الاضافيه\n- جزء هقولك فيه امتى تعرف انك جاهز تدخل على الخطوه الجايه\nو كل تقنيه و التانيه هيكون فيه بينهم فاصل \n\n---\n\n## مقدمة عن الويب و الانترنت\n\nقبل ما تبدأ في اي مجال ليه علاقة بالويب لازم يكون عندك خلفيه ازاي الانترنت و المتصفح بيشتغلو عشان 99% من شغلك هيكون معاهم\n\n### المصادر\n\nبالعربية: [الانترنت - كيف يعمل الانترنت؟ من الذي اخترع الانترنت؟ من يملك الانترنت؟](https://www.youtube.com/watch?v=99yxGabo-XE)\n\nبالانجليزية: [How does the internet work? (Full Course)](https://youtu.be/zN8YNNHcaZc?si=bgsd7qIS_15MzWQ6)\n\n### هتعرف انك خلصت لو\n\n- فهمت الفرق بين ال http و ال https\n- عرفت انواع ال requests المختلفه زي get, put, delete الخ\n- عرفت يعني ايه DNS\n- عرفت يعني ايه IP\n- عرفت عناصر الرابط زي sub-domain, domain, routes, query parameter الخ\n---\n## HTML \nدي بداية الطريق، باستخدام ال html هتقدر انك تبني هيكل الموقع و البنية بتاعته\n\n### المصادر\n\nبالعربية: [Learn HTML In Arabic 2021](https://www.youtube.com/watch?v=6QAELgirvjs&list=PLDoPjvoNmBAw_t_XWUFbBX-c9MafPk9ji)\n\nبالانجليزية: [HTML Tutorial – Full Course for Beginners](https://www.youtube.com/watch?v=kUMe1FH4CHE)\n\n### التطبيقات\n\n[تكليفات على html](https://elzero.org/category/assignments/html-assignments)\n\n### هتعرف انك خلصت لو\n\n- فاهم الفرق ما بين العناصر المختلفه زي head, body, section الخ\n- فاهم ال semantic elements\n- عارف الفرق مابين ال class و ال id\n- عارف ال best practices و ازاي تبني structure بطريقة سليمة\n\n---\n\n## CSS \n\nبأستخدام ال css هتقدر انك تتحكم في شكل و تصرفات الموقع بتاعك و تضيف اكتر من effect و transition على اي عنصر\nال css هي المسئولة عن تحويل هيكل الموقع (html) الى موقع ملفت و جذاب للمستخدم\n\n### المصادر\n\nبالعربية: [Learn CSS In Arabic 2021](https://www.youtube.com/watch?v=X1ulCwyhCVM&list=PLDoPjvoNmBAzjsz06gkzlSrlev53MGIKe)\n\nبالانجليزية: [CSS Tutorial – Full Course for Beginners](https://www.youtube.com/watch?v=OXGznpKZ_sA)\n\n### التطبيقات\n\n[تكليفات على css](https://elzero.org/category/assignments/css-assignments)\n\nال 4 تطبيقات على html, css من قناة م اسامة الزيرو بالترتيب\n\n[تطبيق 1](https://www.youtube.com/watch?v=MBq8ZFEIIaQ&list=PLDoPjvoNmBAzHSjcR-HnW9tnxyuye8KbF)\n\n[تطبيق 2](https://www.youtube.com/watch?v=7_USXxmn7DM&list=PLDoPjvoNmBAy1l-2A21ng3gxEyocruT0t)\n\n[تطبيق 3](https://www.youtube.com/watch?v=lXVP3rDH9EU&list=PLDoPjvoNmBAxuCSp2_-9LurPqRVwketnc)\n\n[تطبيق 4](https://www.youtube.com/watch?v=4OGWPn-Q__I&list=PLDoPjvoNmBAyGaRGzPVZCkYx5L7Mo9Tbh)\n\n\n### أدوات اضافية\n\n[لعبة flexbox zombies](https://mastery.games/flexboxzombies)\n\n[تحديات متنوعة على css](https://cssbattle.dev)\n\n[لعبة grid garden](https://cssgridgarden.com)\n\n### هتعرف انك خلصت لو\n\n- عرفت ازاي تختار عناصر ال html ب اكتر من طريقة زي ال class, id و custom attribute\n- فاهم ال box model و الفرق ما بين ال margin و ال padding الخ\n- فاهم الفرق ما بين positions المختلفه زي relative, absolute, fixed الخ\n- فاهم الفرق ما بين طرق ال dispaly المختلفه زي block, flex الخ\n- فاهم ال media queries و تعرف تعمل responsive design\n- تعرف تستخدم ال flexbox و ال grid بطريقة سليمة\n---\n\n## Git & Github\n\nهو version control system هتستخدمه في جميع مراحل التعلم الجايه\nو اساسي جدا انك تتعلمه عشان من خلاله هتقدر تحفظ و تتعامل مع الكود بتاعك بطريقه احترافيه و كمان تشتغل على نفس الكود مع اكتر من شخص\nو هتستخدمه في الخطوه الجايه و انت بتطبق من موقع frontend mentor\n\n### المصادر\n\nبالعربية: [[Arabic] Learn Git & GitHub](https://www.youtube.com/watch?v=ACOiGZoqC8w&list=PLDoPjvoNmBAw4eOj58MZPakHjaO3frVMF)\n\nبالانجليزية: [Git and GitHub for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk)\n\n\n### أدوات اضافية\n\n[برنامج Github Desktop](https://desktop.github.com/download/)\n\n\n### هتعرف انك خلصت لو\n\n- عرفت اوامر ال git الأساسية زي add, commit, push, branch, checkout, status, merge, stash الخ\n- عرفت ازاي تقدر ترفع الكود بتاعك على github و تنزله على الجهاز بتاعك من اي مكان\n- عرفت ازاي تقدر تربط ال terminal او ال command line بتاعك ب github باستخدام ال ssh key\n---\n\n\nهنا مفيش تقنية عشان انت مش هتتعلم حاجه جديد\nانت هتوظف اللي انت اتعلمته في التطبيق على اللي فات كله\nهتعمل تطبيقين من على frontend mentor ف هتطبق على html و css\nو في نفس الوقت هتحتاج ترفع الموقع على github ف هتطبق على git\n\n### المصادر\n\n[ازاي تطبق على frontend mentor](https://www.youtube.com/watch?v=fm2yTd3hJHc)\n\n### التطبيقات\n\n[التطبيق الاول](https://www.frontendmentor.io/challenges/clipboard-landing-page-5cc9bccd6c4c91111378ecb9)\n\n[التطبيق التاني](https://www.frontendmentor.io/challenges/recipe-page-KiTsR8QQKm)\n\n\n### هتعرف انك خلصت لو\n\n- عرفت تعمل submit للموقعين على frontend mentor\n- الموقعين متشابهين جدا للصورة الاصل\n- لو محتاج تطبق اكتر خد وقتك و اعمل اكتر من تطبيق عادي، كل ما تطبق هنا بالذات اكتر كل ما يكون افضل\n---\n\n\n\n## Javascript\n\nدي اهم و اطول مرحلة بالنسبالك، بيتم استخدام javascript في اضفافة functionality او وظائف للموقع بتاعك\nيعني مثلا لما اضغط على الزرار ده هعمل كذا، او لما المستخدم يدخل على الصفحه دي هعمل كذا.\n\n### المصادر\n\nبالعربية: [Learn JavaScript In Arabic 2021](https://www.youtube.com/watch?v=GM6dQBmc-Xg&list=PLDoPjvoNmBAx3kiplQR_oeDqLDBUDYwVv)\n\nبالانجليزية: [JavaScript](https://www.youtube.com/watch?v=1uYQRG5csT8&list=PLOmL3sL-afbRVTvedkIrQcDwg2UY0JGTF)\n\n### التطبيقات\n\n[تكليفات javascript](https://elzero.org/category/assignments/javascript-bootcamp-assignments)\n\nموقعين مختلفين باستخدام ال javascript بالترتيب\n\n[الموقع الاول](https://www.youtube.com/watch?v=vedT2jk3hi4&list=PLDoPjvoNmBAzvmpzF-6l3tAviiCPbwkB8)\n\n[الموقع الثاني](https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3)\n\n### أدوات اضافية\n\n[افضل مصدر لمعلوماتك عن ال javascript](https://developer.mozilla.org/en-US/docs/Learn)\n\n\n### هتعرف انك خلصت لو\n\n- فاهم ال promises و الفرق فين ال try catch و ال then keywork\n- فاهم ال dom و ال dom manipulation\n- فاهم ال async function\n- فاهم ال event loop\n- تقدر تشوف الحاجات التانيه اللي ممكن تعرفها من [هنا](https://roadmap.sh/javascript)\n---\n\nمبروك خلصت اهم خطوة في التراك\nالخطوة الجايه انك تقوي نفسك في كام نقطه لازم يبقو معاك ك مطور عموما مش بس مطور فرونت اند\nو من النقط دي هي استخدام ال cli او ال terminal بطريقة احترافيه اكتر\nو الكتابة على الكيبورد بدون النظر\nصدقني دي حاجات هتضرب مستواك في خمس اضعاف، ممكن تزود معاهم انك تتعلم linux مثلا و تستخدم حاجه زي wsl على ويندوز\n\n\n### المصادر\n- terminal / CLI\n\nبالعربية: [[Arabic] Learn Command Line](https://www.youtube.com/watch?v=JVs2Ywy7wGQ&list=PLDoPjvoNmBAxzNO8ixW83Sf8FnLy_MkUT)\n\nبالانجليزية: [Command Line Crash Course](https://www.youtube.com/watch?v=uwAqEzhyjtw)\n\n- touch typing\n\n[Typing club](https://www.typingclub.com)\n\n[Monkey type](https://www.monkeytype.com)\n\n- Linux (اختياري)\n\nبالعربية: [Linux in Arabic](https://www.youtube.com/watch?v=zBV5Gl0iihI&list=PLgCu8TiZE3OZcKIqypbqIU9pG4mZjKP5C)\n\nبالانجليزية: [Linux for Beginners](https://www.youtube.com/watch?v=VbEx7B_PTOE&list=PLIhvC56v63IJIujb5cyE13oLuyORZpdkL)\n\n\n### أدوات اضافية\n\n[أداة wsl لاستخدام linux على الويندوز](https://learn.microsoft.com/en-us/windows/wsl/install)\n\n\n### هتعرف انك خلصت لو\n\n- عرفت تتنقل في ملفات جهازك باستخدام ال command line\n- عرفت تنشيء ملفت و مجلدات من خلال ال command line\n- وصلت على الاقل 30 wpm على monkey type\n---\n\n## Tailwind\n\nانت كدا ماشي مستريح جدا و على الطريق السليم و هتدخل على ال react بأريحية\n\nبأختصار tailwind هي framework لل css بتخليك تعمل style للعناصر بتاعتك باستخدام ال html class names\nهتستخدمها كتير جدا في react ان شاء الله و في معظم مشاريعك عموما\n\nانت هنا ممكن تسالني ليه مش bootstrap مثلا\n\nانا برشحلك التقنيات الموجوده اكتر في التطبيقات و في الشغل\n\nلكن انت ممكن تتعلم tailwind + bootstrap + scss مع بعض \n\nو زود اي تقنيه تانيه انت حاببها، متربطش نفسك بالتقنيات اللي هنا بس\n\nحاول توسع مهاراتك عادي\n\n### المصادر\n\nبالعربية: [تعلم Tailwind CSS في مقطع واحد](https://www.youtube.com/watch?v=Pk3hhCJG2Dk)\n\nبالانجليزية: [Learn Tailwind CSS](https://www.youtube.com/watch?v=ft30zcMlFao)\n\n### التطبيقات\n\n[تطبيق باللغه العربية](https://www.youtube.com/watch?v=9Px2cwdQ8PM)\n\n[تطبيق باللفة الانجليزية](https://www.youtube.com/watch?v=8eQwgc9nc64)\n\n\n### أدوات اضافية\n\n[اضافة tailwind ل vscode](https://v1.tailwindcss.com/docs/intellisense)\n\n\n\n### هتعرف انك خلصت لو\n\n- عرفت ازاي ت extend ملف tailwind.config.js\n- عارف ازاي تستخدم tailwind في css باستخدام @apply\n---\n\n## React.js\n\nأشهر javascript framework من هنا هتبدأ تميز الفرونت اند الشاطر من الضعيف\n\nحاول على قد ما تقدر تكون ملم بمفاهيم ال framework مش بس ال syntax\n\nيعني ازاي بيشتغل و ايه فايدته، ايه هي ال virtual dom و ليه react بيستخدمها و ليه مش موجوده في frameworks تانيه الخ\n\nهتقولي ياعم ما اتعلم ال framework و خلاص و اشتغل هقولك انا جي من المستقبل و مريت ب كل ده و بقولك المفيد\n\nملحوظه: بفضل جدا انك تشوف الكورس الانجليزي هنا بالذات، مشوفتش زيه في اي مكان حتى الان\n\nده اللي انا كنت متعلم منه اول ما نزل و يا سلام لو شوفته على scrimba هتتبسط\n\n### المصادر\n\nبالعربية: [كورس رياكت بالعربي](https://youtube.com/playlist?list=PLpr1Lg_f0v3ojNKR4WzZ_SEXhiKBHDQmB&si=QbVNVkCkD_smEv35)\n\nبالانجليزية: [Beginner's tutorial for React](https://www.youtube.com/watch?v=bMknfKXIFA8&t=29s)\n\n### التطبيقات\n\n[تطبيق 1](https://www.youtube.com/watch?v=_oO4Qi5aVZs)\n\n[تطبيق 2](https://www.youtube.com/watch?v=B91wc5dCEBA)\n\n\n### أدوات اضافية\n\n[اضافه للمتصفح ل react](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?pli=1)\n\n\n### هتعرف انك خلصت لو\n\n- عارف ايه هي ال virtual dom و ايه فايدتها\n- فهمت مفهوم ال components و ال props\n- فهمت ازاي تتعامل مع ال state\n- عرفت ازاي تستخدم react router للتنقل بين الصفحات\n- فهمت الhooks المختلفه زي useState, useEffect, useCallback\n-  فهمت ال context و ازاي تستخدمه\n-  عرفت ازاي تعمل reusable component بطريقه سليمه و ايه هي ال rest props\n-  فهمت فكرة ال children\n-  عرفت تعمل custom hook و امتى تعمل واحد\n-  اختياري: عندك خلفيه عن ال compound components\n---\n\n## Redux / Recoil / Zustand / Jotai\n\nايوه زي ما خدت بالك كدا مش حاجه واحده بس حاول متتعاملش مع redux انها مكتبة ال state management الوحيدة في العالم\n\nلكنها يمكن تكون اكتر واحده تعتمد عليها في المشاريع الكبيره و لكن خد عن الباقيين خلفيه برضه كل واحده فيهم ليهم مشروع مناسب تستخدمها فيه\nاتعلم redux و ركز فيها\n\nلكن خلي معاك اختيار كمان من التانيين لمشاريعك الشخصيه او الصغيره بحيث تقدر تستخدمها بسرعه\n\n### المصادر\n\nبالعربية: [شرح ريدكس بالعربي](https://www.youtube.com/watch?v=Qsog_cjp7ug&list=PLejc1JbD4ZFREfrBoSl8tjAPZOY6HNqZv)\n\nبالانجليزية: [Learn modern redux](https://www.youtube.com/watch?v=u3KlatzB7GM&list=PL0Zuz27SZ-6M1J5I1w2-uZx36Qp6qhjKo)\n\n### التطبيقات\n\nممكن تعمل موقع كمان باستخدام redux عادي كدا كدا انت في الغالب هتستخدم state management في كل مشاريعك الجايه ان شاء الله\n\n\n### هتعرف انك خلصت لو\n\n- فهمت مفهوم Store, Actions, Reducers\n- عرفت ازاي تبني تطبيق شغال ب Redux أو Recoil من البداية للنهاية\n- فهمت مفهوم الـ Middlewares زي Redux Thunk\n---\n\nخد بريك شويه هنا، عاش يا بطل انك كملت كل ده\n\nانت كدا .\nfrontend developer\nبس تقليدي!\n\nشوية الخطوات الجايه هي اللي هتميزك عن غيرك و تخليك فعلا ديناصور زي ما بقول\n\nفيهم كام نقطه اختياريه هقولك عليهم، لكن لو اتعلمتهم صدقني هتبقا شخص تاني ان شاء الله\n\nالمصادر في الحاجات اللي جايه ممكن تكون انجليزي بس علشان مفيش ناس كتير بتقدم محتوى في الحاجات دي بالعربي\n\n## framer motion & gsap\n\nدي مكتبات animations هتغير شكل المواقع بتاعتك تماما\n\nفيه منها كتير طبعا و فيه مكتبات بتقدملك حاجات جاهزه، و لكن دول الاكثر انتشارا و ال community بتاعهم كبير\n\nو بصراحه كدا، مفيش اجمد من الاتنين دول\n\n\n### المصادر\n\n[Framer motion](https://www.youtube.com/watch?v=2V1WK-3HQNk&list=PL4cUxeGkcC9iHDnQfTHEVVceOEBsOf07i)\n\n[Gsap](https://www.youtube.com/watch?v=wo6KNvBlA6k&list=PLSkIx8U0TMvgH2PEokYLIxofdb1L9cJjz)\n\n[Gsap scroll trigger](https://www.youtube.com/watch?v=WEky7V490Rs&list=PLMPgoZdlPumexxtvuPUB3TY7LExI1N_Xp)\n\n\n### أدوات اضافية\n\nلازم تتابع الناس دي و تخلي دي الفيديوهات اللي في ال feed بتاعك، طريقة تفكيرك في الفرونت اند هتتغير\n\n[Oliver larose](https://www.youtube.com/@olivierlarose1)\n\n[Tom is loading](https://www.youtube.com/@tomisloading)\n\n[Frontend tribe](https://www.youtube.com/@frontend-tribe)\n\n---\n\n## Typescript\n\nاتبسطت في ال \nanimations\nمن هنا و رايح التقنيات هيكون كل هدفها الاحترافيه في الشغل\n\nلازم متشتغلش غير ب \ntypescript\nو بعد ما تتعود عليها، صدقني مش هتعرف تسيبها\n\n### المصادر\n\nبالعربية: [Learn Typescript In Arabic 2022](https://www.youtube.com/watch?v=yUndnE-2osg&list=PLDoPjvoNmBAy532K9M_fjiAmrJ0gkCyLJ)\n\nبالانجليزية: [Typescript Course](https://www.youtube.com/watch?v=VGu1vDAWNTg&list=PL4cUxeGkcC9gNhFQgS4edYLqP7LkZcFMN)\n\n### التطبيقات\n\nحاول تبني اي موقع بسيط باستخدام react + typescript\n\n\n### هتعرف انك خلصت لو\n\n- عرفت ال generic props في react باستخدام typescript\n- عرفت الفرق بين ال types و ال interfaces\n- عرفت ايه هي ال defenition files\n- عرفت ازاي تستخدم typescript في react و ايه ال best practices\n\n---\n\nبص بقا\n\nانت عندك طريقين دلوقتي\n\n- اول طريق انك تتعلم nodejs + express و بعدين تدخل على next.js\n- تاني طريق انك تدخل على next.js على طول\n\n  \nعايز نصيحتي؟ انا مفهمتش next.js الا لما اتعلمت nodejs\n\nهتخليك شخص تاني، تقريبا انا الوحيد في مصر اللي بقول للناس اتعلم nodejs من ضمن التراك بس صدقني فرقت معايا و مع اي حد جرب جدا\n\nو nodejs سهله مش هتاخد معاك اسبوعين ك basics\n\nهتبقا شايف الباك اند بيفكر ازاي و ازاي تتعامل معاه بطريقه عمرك ما تخيلتها، و ممكن كمان تعمل انت مشروع full stack و تكمل و تبقا mern stack مين عارف\n\n\n## nodejs + express\n\nوصف\n\n### المصادر\n\nبالعربية: [Nodejs + Express](https://www.youtube.com/watch?v=Bzzp0q0T5oM&list=PLQtNtS-WfRa8OF9juY3k6WUWayMfDKHK2)\n\nده الكورس الوحيد المناسب و اللي وقته مناسب للي احنا عايزينه ك اساسيات\n\nالكورسات التانيه طويله جدا و تفصيليه، شوف اللي انت حابب تتفرج عليه عادي براحتك\n\n### التطبيقات\n\nsimple todo api with authentication\n\n\n\n### هتعرف انك خلصت لو\n\n- عرفت تتعامل مع postman و ايه هو و ايه البرامج اللي زيه\n- عرفت ايه هو ال middleware و ركز اوي في ال middleware\n---\n\n## Next.js\n\nبأختصار Next.js هي framework كامل ل React فيه مزايا كتير جدا\n\nفي الغالب اغلب شكلك بعد ما تتعلمه هيكون بيه و اتمنى تفهمه بسهوله بالذات من ناحية الباك اند بعد ما اتعلمت \n\nملاحظه: ارشحلك الكورس الانجليزي بتاع dave grey\n\n### المصادر\n\nبالعربية: [Nextjs crash course بالعربي](https://www.youtube.com/watch?v=_t4c-vxalp4)\n\nبالانجليزية: [Nextjs full course for beginners](https://www.youtube.com/watch?v=843nec-IvW0&t=14929s)\n\n### التطبيقات\n\nfull stack notes application with next.js + tailwind + state management + typescript\nبحيث تطبق على اللي فات كله\n\n\n### هتعرف انك خلصت لو\n\n- عرفت تستخدم ال middleware في next.js\n- فهمت ال routing و اسماء الملفات المميزة\n- عرفت ازاي تعمل api route و page route\n- عرفت ال server actions و ازاي تتعامل معاها\n---\n\n## Unit testing\n\nمبروك يا صديقي انت الان يطلق عليك لقب ديناصور\n\nو واثق انك هتقدر تشتغل في وظيفه احلامك\n\nوظيفة احلامك اكيد في شركه كبيره، و الشركات الكبيره كلها بتشتغل ب unit testing عشان تقدر دايما تضمن ان بعد اي تعديل كل حاجه تمشي كما هو متوقع\n\nدي مهاره مهمه جدا و يمكن اكتر واحده ممكن تميزك عن غيرك انك تكون عارف تشتغل ب unit testing\n\nممكن تبص على unit testing في react او في javascript العاديه\n\nو لكن انا هحطلك مصادر react عشان ده اللي احنا عايزينه\n\nفيه مكتبات كتير لكن يفضل تستخدم Jest او Vitest\n\n### المصادر\n\n[Unit testing with Vitest](https://www.youtube.com/watch?v=8Xwq35cPwYg)\n\n\n---\n\nمن هنا انا واثق انك تقدر تعتمد على نفسك في اللي جاي كله، عندك تقنيات كتيير جدا الويب مجال بيتوسع بسرعه جدا\n\nو برا الويب كمان ممكن تزود مهاراتك في حاجات تانيه، ممكن تتعلم docker, graphql الخ\n\nتوكل على الله و انطلق في الطريق المناسب لشغلك، و لكن ده كان الاساس او الخريطه اللي ممكن توصلك لبر الامان\n\nاتمنى تكون استفدت و لو بحاجه بسيطه او على الاقل يبقا الطريق واضح قدامك، متنساش تقولي لو فيه حاجه ممكن اضيفها او تتعدل\n"
  }
]