9 مشاريع ستجعلك محترف تطوير الواجهات في 2020

التدرب هو مفتاح الاحتراف في كل المجالات و خاصة عندما يتعلق ذلك بالبرمجة و التطوير. لكن قد تتساءل ماهي المشاريع التي يجب على العمل عليها كمطور واجهات للوصول إلى الاحتراف؟ :thinking:

لحسن الحظ يوجد العديد من الأمثلة و الاجابات على سؤالنا منتشرة على الأنترنت. اخترت اليوم واحدا منها (تجدون رابط المقال الأصلي في آخر المقال).

1- بناء تطبيق للبحث عن الأفلام باستعمال اطار عمل React

سيفيدك هذا المشروع في تطوير مهاراتك في React و التعامل مع API خاص بالأفلام, إضافة الى تقوية نفسك في ال Css

صورة للمشروع النهائي:

2- بناء تطبيق شات باستعمال Vue

ببساطة هذا المشروع سيعطيك نظرة عامة حول التعامل مع Vue.js ابتداءا من تجهيز المشروع الى الإطلاق

صورة للمشروع النهائي:

3- بناء تطبيق جميل للطقس باستعمال Angular 8

هذا التطبيق سيعطيك نظرة حول استعمال Angular مع التأكيد على الواجهة من البداية الى النهاية

صورة للمشروع النهائي:

4- بناء لائحة مهام أو Todo باستعمال Svelte

اطار عمل Svelte يعتبر جديد في ساحة الفرونت لكن يمكن أن يصير التراند في 2020 لذلك تطبيق Todo سيفيدك لأخذ فكرة عن الإطار

صورة للمشروع النهائي:

5- بناء سلة مشتريات لمتجر الكتروني باستعمال Next.js

اطار عمل Next.js هو أشهر اطار لبناء تطبيقات React بسهولة و بسرعة و الذي يتيح لك استعمال خاصية SSR الجاهزة

صورة للمشروع النهائي:

6- بناء موقع للتدوين متعدد اللغات باستعمال Nuxt.js

ببساطة تامة Nuxt.js يقوم بنفس ما يقوم به Next.js لكن باستعمال ال Vue هاته المرة :grin:

صورة للمشروع النهائي:

7- بناء مدونة باستعمال Gatsby

مولدات المواقع الثابتة أو Static site generator ستفيدك جدا في مجالك كمطور للفرونت لذلك لا تنسى أن تأخذ الوقت لاستعمالها في مشروع ما :wink:

صورة للمشروع النهائي:

8- بناء مدونة باستعمال Gridsome

يتميز Gridsome و Gatsby بنفس الخاصية و هي أنهما يتيحان لك استعمال ال GraphQL لذلك ستكون هاته فرصة لك للتعامل و الاعتياد عليه

صورة للمشروع النهائي:

9- بناء موقع مشابه ل Soundcloud باستعمال Quasar

يعتبر Quasar اطار عمل لبناء تطبيقات Vue و لكن ما يتيحه اضافة الى تطبيقات الويب هو أنه يمكنك من بناء تطبيقات الموبايل أيضا :star_struck:

صورة للمشروع النهائي:

في الأخير…

الحقيقة أنه مهما كانت المشاريع التي تعمل عليها فانها ستفيدك في تطوير نفسك. المهم هو أن تواصل التدرب و التطبيق و تحديد أهدافك حسب ما تراه مناسبا بين متطلبات السوق و التقنيات الحديثة :ok_hand:

المقال الأصلي: dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h

16 Likes

موضوع مهم وفي الوقت المناسب شكرا جدا

2 Likes

ما هذا الاطار؟

3 Likes

والله بوركت أخي كثيرا شكرا على حسن التنبيه و المساعدة شكرا :heart_eyes::muscle:

1 Like

شكرا لكم @asmaa_salih @Mosaab.L :heart::rose:

1 Like

أهلا صهيب @sohep

لم أستعملها من قبل لكن حسب الموقع الرسمي فهو إطار عمل لبناء تطبيقات Vue سريعة و في وقت قياسي…
يتيح لك الإطار بناء مختلف أنواع التطبيقات سواءا Desktop, Mobile, PWA… في نفس المستودع

للمزيد يمكنك أن تلق نظرة على الموقع الرسمي: https://quasar.dev

2 Likes

طب عندي سوال دلوقتي انا متعلم
HTML
CSS
JS
BOOTSTRAP
JQUERY
عايز اكمل اتعلم اية كترتيب و منين وبفضل لو انجليش ؟
وسوال تاني مفيش مسار كامل فية كله شئ ع الانترنت مثل كورتبز لكان مستوي متقدم ليس فقط HTML CSS

2 Likes

مرحبا صديقي محمد @Mohamed_Ibrahim98

أكيد التدرب على ما تعلمته يأتي أولا و قبل الانطلاق في البقية … مثلا بناء مواقع من أشكال مختلفة بالتقنيات التي ذكرتها (بورتفوليو, موقع لسلعة معينة, متجر الكتروني, الخ…)
لما تحس نفسك مرتاح مع هاته التقنيات يمكنك الانطلاق في تعلم أطر العمل المختلفة مثل ماهو مذكور في المقال :ok_hand:

المستويات المتقدمة قادمة في أقرب وقت … وستحتوي على كل المواضيع التي تحتاجها كمطور لذلك ابق في الانتظار :grin: سأنبهك أول ما تكون جاهزة

1 Like

انا فعلا مطبق عليهم وليا فترة بتعلم كبيرة بتعلمهم فعايز انقل ع المستوي اللي بعد دا عشان اغلب الشركات في يمصر مش بتشغل حد من غير فريمورك فلازم ابدا في واحد هنتظركم باذن الله بس مفيش ميعاد اتحدد لسه والمسارات المتقدمه هتبقا اية بالظبط

2 Likes

موضوع رائع، شكرا جزيلا على المشاركة.

2 Likes

موضوع جدا رائع و المسارات المطروحه مهم فشكرا جزيلا

:tulip:
بس ممكن معلومات أكثر عن أول مشروع إذا سمحت.

1 Like

أهلا أنس @Abu-Hamza

يمكنك القاء نظرة على هذا الدرس في freecodecamp الذي يشرح كل تفاصيل المشروع

ولو وجدت أي صعوبة أو مشكل لا تنسى أن تطرحه هنا كي يستفيد الجميع
كذلك لا تنسى أن ترينا النتيجة النهائية لمشروعك فور أن تنهي العمل :grin:

بالتوفيق صديقي :rose:

1 Like

هل تحتاج كتابة اكواد ام هي اطر فريموارك جاهز وماهي اللغات المستعملة

السلام عليكم بغيت اسئل ايش الادوات والحاجات اللي تساعدني في تلم تطوير الواجهات

اتحفوني بارائكم ي جميييلين وشكرا :blush:

السلام عليكم ورحمة الله

صراحه أنا أتصدم لما أشوف كم هائل من الفريم وورك الي لازم أتعلمها :frowning:
حاسه ان مع ضيق الوقت ، عندي هذا ضرب من الخيال والله اعلم،
فأنا بحب ألجأ لنقطة أني اتعلم JavaScript وبس مع فريم وورك واحده مثلا، واتقنها لدرجة الأحتراف، بحس ان احنا مش متعلمين JavaScript كويس، الJavaScript قوية جدا، محتاجين نكون فيها فعلا اقوياء،
لو انا فيها هيا بس قوية، اي فريم وورك تانيه هتكون بالنسبه ليا لعبه بلعب بيها والله أعلم،
يعني انا اعرف في الجافاسكريبت، و لم بتعلم الفيو، انا الي كان صعب عليا مش الفيو، الي صعب عليا اني افهم الجافاسكريبت كويس، خاصة الES6، بالدوال الجديده وهكذا وليه بتطبق كده ،
فاحنا محتاجين نرسخ أقدامنا كويس جدا في الجافاسكريبت وان شاء الله هنكون متميزين.

ياريت كلنا نكون واعيين لكده، هنفرق جدا في المجال، والله أعلم :slight_smile:

والله المستعان

2 Likes

يمكنني عملها كلها بـ nuxt/vuejs :smiley: :gift_heart:
حبيبي يا هشام :smiley: :star_struck:

مرحبا @sarahzaki03
يكفيكي فقط vuejs ! ان شاء الله هنعمل المشاريع دي هنا بـvuejs
اتعلمي الجافاسكريبت مع الفيو لأن الفيو مش محتاج أي مستويات متقدمة في الجافسكريبت،
هتنفع أكتر في التعامل مع البيانات والdata

دي بقا المشاريع اللي عملتها لغاية دلوقتي بـVue (كمثال بس لامكانيات فيو وكفاتح للشهية :shallow_pan_of_food::smiley:)

1- Vue-Chat App: https://chat-app-f412a.firebaseapp.com/
2- Vue-pomodro-timer & stopwatch: https://stopwatch-f179e.firebaseapp.com
3- vue-commerce app: https://vue-shop-e3547.firebaseapp.com/en
4- game score tracker: https://fast-brushlands-67141.herokuapp.com/
platform: origin
gamertag: sniperAdmin

my source codes:
1- Vue-Chat: https://github.com/sniperadmin/vue-chat
2- Vue-commerce: https://github.com/sniperadmin/vue-commerce
3- Vue pomodro timer: https://codesandbox.io/s/stop-watch-vuejs-v7fv8

كل ده بفيو بس، ولسة طبعا في حاجات كمان ان شاء الله :smiley:

1 Like

ما شاء الله تبارك الله، بالتوفيق إن شاء الله
وإن شاء الله نستفيد منهم، game score tracker مش فاهمه الغرض منه،
الvue-chat أنا دخلت فيه وسجلت ب Google، واشتغل فعلا :smile:،
الcommerce، كتب أنه unsupported، ممكن تكون عملته من فتره؟
أنا صراحه متشوقه جدا للمزيد من العلم، بس في أولويات في حياة الإنسان، فالله المستعان
إن شاء الله قريبا نقدر نشتغل بالفيو كويس يارب، الله المستعان

1 Like

طيب ياريت لما تبدأوا تعملوا المشاريع تضموني في فريق العمل، ويارب أقدر أساعد

1 Like