یک فرانت اند کار ماهر شو

9 پروژه که می‌توانید در سال 2023 انجام داده و به یک فرانت-اند ماهر تبدیل شوید

مقدمه

اگر تازه وارد حوزه برنامه‌نویسی هستید یا حرفه‌ای در این زمینه ، یادگیری مفاهیم و زبان‌ها/چارچوب‌های جدید برای شما ضروری است تا با تغییرات روزافزون این صنعت همراه باشید.

برای مثال، React که تنها چهار سال پیش توسط شرکت Facebook به صورت open-source منتشر شده، در سراسر جهان به چارچوب اول توسعه‌دهندگان JavaScript تبدیل شده است. همچنین Vue و Angular نیز طرفداران پایبند خود را دارد. در ضمن، چارچوب‌هایی مانند Svelte، Next.js یا Nuxt.js، Gatsby، Gridsome و Quasar و … و غیره نیز وجود دارند.

برای تبدیل شدن به یک توسعه‌دهنده حرفه‌ای و برجسته در زمینه فرانت-اند، باید حداقل تجربه‌ای در چارچوب‌ها و کتابخانه‌های مختلف داشته باشید، همچنین تمرین و تسلط بر JS سنتی نیز امری ضروری است.

برای کمک به شما در این مسیر، نه تنها پروژه‌های متنوعی با موضوعات مختلف و با استفاده از چارچوب‌ها و کتابخانه‌های مختلف به عنوان مجموعه فناوری ارائه شده‌اند، بلکه شما می‌توانید این پروژه‌ها را بسازید و آن‌ها را به نمونه کارهای خود اضافه کنید. اما به یاد داشته باشید که تنها ساختن پروژه‌های متعدد بدون تمرین و تسلط بر چارچوب‌ها و کتابخانه‌های مختلف، به شما کمکی نمی‌کند. پس پیش بروید، ذهن خود را تمرین بدهید.

1- ایجاد برنامه جستجوی فیلم با استفاده از React Hooks

اولین چیزی که می‌توانید با آن شروع کنید، ایجاد یک برنامه جستجوی فیلم با استفاده از React است. تصویری از نحوه نمایش نهایی برنامه در زیر آمده است:

چه چیزهایی یاد خواهید گرفت؟

با ساختن این برنامه، مهارت‌های React خود را با استفاده از API Hooks نسبتاً جدید بهبود خواهید داد. پروژه مثال شامل کامپوننت‌های React، بسیاری از Hooks، یک API خارجی و البته چندین قابلیت طراحی با CSS است.

فناوری های استفاده شده و قابلیت ها

• React with hooks
• create-react-app
• JSX
• CSS

بدون استفاده از هیچ کلاسی، این پروژه نقطه ورودی کاملی به React کاربردی است

2- ایجاد یک برنامه چت با Vue

یک پروژه بزرگ دیگر برای شما، ایجاد یک برنامه چت با استفاده از کتابخانه JavaScript مورد علاقه من، VueJS است.

چه چیزهایی یاد خواهید گرفت؟

با دنبال کردن این آموزش، یاد خواهید گرفت که چگونه یک برنامه Vue را از ابتدا راه‌اندازی کنید – ایجاد کامپوننت‌ها، مدیریت وضعیت، ایجاد مسیرها، اتصال به یک سرویس شخص ثالث، و حتی مدیریت تأیید هویت.

فناوری های استفاده شده و قابلیت ها

• Vue
• Vuex
• Vue Router
• Vue CLI
• Pusher
• CSS

واقعاً این پروژه، یک پروژه بزرگ برای شروع با Vue است – یا بهبود مهارت های موجود شما – برای مقابله با توسعه در سال 2023.

3- ایجاد یک برنامه آب و هوای زیبا  با    Angular 8

این مثال به شما در ایجاد یک برنامه آب و هوای زیبا با استفاده از Angular 8 گوگل کمک خواهد کرد

چه چیزهایی یاد خواهید گرفت؟

این پروژه مهارت‌های ارزشمندی را به شما آموزش خواهد داد در حالی که یک برنامه را از ابتدا ایجاد می‌کنید – از طراحی تا توسعه و تمام مراحل تا انتشار قابل تولید.

فناوری های استفاده شده و قابلیت ها

• Angular 8
• Firebase
• Server-side rendering
• CSS with Grid Layout and Flexbox
• Mobile friendly and responsive
• Dark mode
• Beautiful UI

آنچه که واقعاً، واقعاً در این پروژه جامع دوست دارم این است که شما چیزهایی را به صورت پراکنده یاد نمی‌گیرید. بلکه، فرایند توسعه کامل را یاد می‌گیرید ، از طراحی تا انتشار نهایی

4- ایجاد یک برنامه To-Do با  Svelte

Svelte جدید است – حداقل نسبت به React، Vue و Angular. با این حال، در سال 2023 یکی از پرطرفدارها است.

شاید به نظر برسد که برنامه‌های To-Do موضوعات پرطرفداری نیستند، اما این پروژه به شما کمک می‌کند تا مهارت‌های Svelte خود را بهترکنید.

چه چیزهایی یاد خواهید گرفت؟

این آموزش به شما نشان خواهد داد که چگونه با استفاده از Svelte 3، یک برنامه را از ابتدا تا پایان ایجاد کنید. از کامپوننت‌ها، طراحی و برگرداندن رویداد استفاده می‌کند.

فناوری های استفاده شده و قابلیت ها

• Svelte 3
• Components
• Styling via CSS
• ES 6 syntax

پروژه‌های شروع کننده Svelte خوبی وجود ندارد، بنابراین من فکر می‌کنم این یک شروع خوب باشد.

5- ایجاد یک سبد خرید E-Commerce با Next.js

Next.js پرکاربردترین چارچوب برای ایجاد برنامه های React است که به طور پیش فرض پشتیبانی از سمت سرور برای ایجاد صفحات خروجی دارد.

این پروژه به شما نشان خواهد داد که چگونه یک سبد خرید E-Commerce را بسازید

چه چیزهایی یاد خواهید گرفت؟

در این پروژه، شما یاد خواهید گرفت که چگونه محیط توسعه Next.js را راه‌اندازی کنید ، ایجاد صفحات و کامپوننت‌های جدید، بازیابی داده‌ها، و طراحی و استقرار یک برنامه Next  از موارد این پروژه است

فناوری های استفاده شده و قابلیت ها

• js
• Components and pages
• Data fetching
• Styling
• Deployment
• SSR and SPA

همیشه خوب است یک نمونه واقعی جهانی، مانند یک نمایشگاه E-Commerce، برای یادگیری چیزی جدید داشته باشیم

6- ایجاد یک وب سایت وبلاگ چند زبانه کامل با Nuxt.js

Nuxt.js معادل Vue برای React است: یک چارچوب عالی برای ترکیب قدرت رندرینگ سمت سرور و برنامه‌های سینگل پیج است.

چه چیزهایی یاد خواهید گرفت؟

این پروژه به شما یاد خواهد داد که چگونه یک وب سایت کامل را با استفاده از Nuxt.js ایجاد کنید – از راه‌اندازی اولیه تا استقرار نهایی.

این پروژه از بسیاری از ویژگی‌های جالب Nuxt استفاده می‌کند، مانند صفحات و کامپوننت‌ها، همچنین طراحی با استفاده از SCSS.

فناوری های استفاده شده و قابلیت ها

• js
• Components and pages
• Storyblok module
• Mixins
• Vuex for state management
• SCSS for styling
• Nuxt middlewares

این یک پروژه واقعاً عالی برای شماست و بسیاری از ویژگی‌های بزرگ Nuxt.js را پوشش می‌دهد. من شخصاً با کار کردن با Nuxt از آن لذت می‌برم، بنابراین باید واقعاً این را امتحان کنید، زیرا این کار به شما به عنوان یک توسعه دهنده Vue نیز کمک خواهد کرد

7 – ایجاد یک وبلاگ با Gatsby

Gatsby یک سازنده سایت استاتیک عالی است که از React و GraphQL در زیرساخت استفاده می‌کند.

چه چیزهایی یاد خواهید گرفت؟

در این آموزش، شما یاد خواهید گرفت که چگونه با استفاده از Gatsby یک وبلاگ برجسته را بسازید که می‌توانید برای نوشتن مقالات خود استفاده کنید در حالی که از React و GraphQL استفاده می‌کنید.

فناوری های استفاده شده و قابلیت ها

• Gatsby
• React
• GraphQL
• Plugins and themes
• MDX/Markdown
• Bootstrap CSS
• Templates

اگر تا به حال می‌خواستید یک وبلاگ راه اندازی کنید، این یک نمونه بزرگ برای استفاده از React و GraphQL برای ایجاد آن است.

من نمی‌گویم که همیشه WordPress یک انتخاب بد است، اما با Gatsby می‌توانید سایت‌های با عملکرد بالا را با استفاده از React ایجاد کنید – که یک ترکیب شگفت انگیز است.

8 – ایجاد یک وبلاگ با Gridsome

Gridsome برای Vue است … خب، ما قبلاً این را با Next/Nuxt داشتیم.

اما همینطور که برای Gridsome و Gatsby درست است. هر دو از GraphQL به عنوان یک لایه داده استفاده می‌کنند، اما Gridsome از VueJS استفاده می‌کند. همچنین یک سازنده سایت استاتیک عالی است که به شما در ایجاد وبلاگ‌های بزرگ کمک می‌کند

چه چیزهایی یاد خواهید گرفت؟

این پروژه به شما یاد خواهد داد که چگونه یک وبلاگ ساده را با استفاده از Gridsome، GraphQL و Markdown بسازید. همچنین نحوه استقرار برنامه از طریق Netlify را پوشش می‌دهد.

فناوری های استفاده شده و قابلیت ها

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

این بدون شک آموزش جامعی نیست، اما مفاهیم پایه Gridsome و Markdown را پوشش می‌دهد و می‌تواند یک نقطه شروع خوبی باشد

9 – ایجاد یک برنامه پخش صدای مانند SoundCloud با  Quasar

Quasar یک چارچوب Vue دیگر است که می‌تواند برای ساخت برنامه‌های تلفن همراه استفاده شود.

چه چیزهایی یاد خواهید گرفت؟

هرچند پروژه های دیگر عمدتاً برنامه‌های وب را مورد توجه قرار می‌دهند، این پروژه به شما نشان می‌دهد که چگونه با استفاده از چارچوب Quasar و Vue، یک برنامه تلفن همراه را ایجاد کنید.

شما در حالت کار کردن با Cordova با Android Studio/Xcode تنظیم شده خواهید بود.

فناوری های استفاده شده و قابلیت ها

• Quasar
• Vue
• Cordova
• WaveSurfer
• UI Components

یک پروژه کوچک که قدرت Quasar برای ساخت برنامه‌های تلفن همراه را نشان می‌دهد.

منبع :

https://levelup.gitconnected.com/9-projects-you-can-do-to-become-a-front-end-master-in-2023-a4389153148c