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

14 Likes

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

1 Like

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

2 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

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