مهم نیست که از کجا شروع می کنید، چه یک تازه کار یا یک قدیمی در برنامه نویسی، به روز رسانی مداوم مفاهیم، زبان ها و چارچوب های جدید برای همگام شدن با روندها بسیار ضروری است.

به عنوان مثال، 4 سال پیش، React، منبع باز فیس بوک، انتخاب شماره 1 توسعه دهندگان جاوا اسکریپت در سراسر جهان بود. با این حال، Vue و Angular جایگاه خاصی در بازار داشتند و به دنبال آن فریمورک‌های Next.js، Nuxt.js و Gatsby، Gridsome، Quasar متولد شدند. اگر قصد دارید یک برنامه نویس حرفه ای جاوا اسکریپت باشید، باید تجربه زیادی در بسیاری از چارچوب های مختلف داشته باشید. و اگر واقعاً قصد دارید استاد شوید، به شما تبریک می‌گوییم، مجموعه‌های زیر 9 پروژه هستند، از جمله موضوعات خاص با کتابخانه‌های جاوا اسکریپت برای مرجع شما. به یاد داشته باشید که فقط زمانی به آن مسلط می شوید که تمرین کنید و خودتان را بسازید.

پس از توضیح هر مثال یک نمونه عملی پیاده سازی و یا آموزش در اختیار شما قرار گرفته است که می توانید از آن استفاده کنید.

1- ساخت اپلیکیشن جستجوی فیلم با استفاده از React (با Hooks)

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

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

ویژگی ها:

• کار با Hook ها در React
• ایجاد برنامه با React
• JSX
• CSS

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

2- ساخت اپلیکیشن برنامه های چت با استفاده از  Vue

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

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

ویژگی ها:

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

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

3- ساخت یک اپلیکیشن آب و هوای زیبا  با استفاده از Angular 8

ویژگی ها:

• Angular 8
• Firebase
• Server-Side Rendering
• CSS with Grid Layout and Flexbox
• Mobile friendly & responsive
• Dark Mode
• Beautiful UI

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

4- ساخت اپلیکیشن to-do با استفاده از Svelte

علیرغم اینکه Svelte در مقایسه با React، Vue و Angular مبتدی است، به نوعی یکی از داغ‌ترین پروژه‌های هم اکنون در دنیاست.
چه چیزی یاد خواهید گرفت؟

این آموزش به شما نشان می دهد که چگونه با استفاده از Svelte 3 از ابتدا تا انتها یک برنامه ایجاد کنید. از اجزاء، استایل و کنترل کننده رویداد استفاده می کند.
ویژگی ها:

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

در این لینک می توانید یکی از پروژه های مرتبط و خوب را مشاهده کنید.

5- ساخت یک ecommerce cart با استفاده از Next.js

NextJs محبوب ترین فریم ورک برای ایجاد برنامه های React است که از رندر سمت سرور پشتیبانی می کنند.
چه چیزی یاد خواهید گرفت؟

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

ویژگی ها:

• Next.js
• Components and Pages
• Data Fetching
• Styling
• Deployment
• SSR and SPA

این سایت یک مثال اجراشده واقعی از این برنامه می باشد.

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

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

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

ویژگی ها:

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

قطعا کار با Nuxt واقعاً شما را به یک توسعه دهنده Vue بهتر تبدیل می کند! در این لینک می توانید آموزش کامل و مرحله به مرحله ببینید.

7- ساخت یک وبلاگ با گتسبی

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

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

• Gatsby
• React
• GraphQL
• Plugins & Themes
• MDX / Markdown
• Bootstrap CSS
• Templates

در این لینک می توانید آموزش این موضوع را مشاهده کنید.

8- ساخت یک بلاگ با استفاده از Gridsome

مشابه Next/Nuxt، Gridsome و Gatsby هر دو از GraphQL به عنوان لایه داده استفاده می کنند اما Gridsome از VueJS استفاده می کند. Gridsome یک مولد سایت استاتیک عالی است که به شما در ایجاد وبلاگ کمک می کند.
چه چیزی یاد خواهید گرفت؟

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

ویژگی ها:

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

در این لینک آموزش آن را مشاهده کنید.

9- برنامه های پخش کننده صوتی مانند SoundCloud را با Quasar بسازید

Quasar یکی دیگر از فریمورک های Vue است که برای ساخت اپلیکیشن های موبایل نیز استفاده می شود. در این پروژه شما یک اپلیکیشن پخش کننده صوتی مانند زیر ایجاد خواهید کرد:
چه چیزی یاد خواهید گرفت؟

در حالی که پروژه‌های دیگر عمدتاً بر روی برنامه‌های کاربردی وب تمرکز دارند، این پروژه به شما نشان می‌دهد که چگونه یک برنامه تلفن همراه با استفاده از Vue از طریق چارچوب Quasar ایجاد کنید. باید به صورت دستی یک راه‌اندازی Cordova با پیکربندی android studio/xcode ایجاد کنید.

ویژگی ها:

• Quasar
• Vue
• Cordova
• Wavesurfer
• UI Components

در این لینک بخشی از آموزش را می توانید مشاهده کنید.