12 پروژه متن‌باز فول‌استک جاوااسکریپت که نباید از دست بدهید (معرفی و مزایا)

اگر تنها با آموزش هایی نظیر ویدیو های آموزشی سروکار داشته اید و چند اپلیکیشن ساده و To Do ساخته اید، این امکان دارد که در تصورتان این باشد که دیگر نیازی به یادگیری نخواهم داشت و در این زمینه مانند پادشاهی بر تخت نشسته ام و بالاترین جایگاه برای من است. اما به این فکر کرده اید که اگر برای اولین بار به سراغ یک پروژه واقعی متن باز بروید. چه می شود؟!

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

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

۱۲ پروژه‌ی متن‌ باز فول‌ استک با جاوا اسکریپت

در ادامه هر پروژه همراه با مثال ها و نکاتی معرفی شده اند تا بتواند درک بهتری را از هر کدام داشته باشید و خود را ارتقا دهید.

FreeCodeCamp  اولین تجربه واقعی متن باز

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

حال که با آن نسبتا آشنا شده‌اید به طبع این سوال در ذهن تان پدیدار می شود که در این پلتفرم قرار است که چه چیزی را یاد بگیریم؟!

• نحوه مشارکت در پروژه های عمومی بر روی Github: یاد خواهید گرفت تا چگونه بتوانید پروژه ها را fork کنید، تغییرات را به شکل pull request ارسال کنید و به فیدبک های تیم اصلی پاسخ های مناسب را بدهید.
• استفاده از Issue های ساده و مناسب برای تازه کاران: بسیاری از پروژه ها از جمله FreeCodeCamp، برچسب هایی مانند good first issue یا help wanted دارند که فرصت‌هایی عالی برای مشارکت اولیه هستند.
• شجاعت و مهارت های لازم در دیباگ کردن کدهای دیگران: حتی خواندن کدهای پروژه های بزرگ و درک ساختار آن، می‌تواند یک تمرین بزرگ و جدی برای رشد ذهن مهندسی شما باشد. بنابراین این فرصت طلایی را از دست ندهید.

مثال کاربردی برای درک بهتر FreeCodeCamp 

فرض کنید که تازه با گیت هاب آشنا شده اید و علاقه مند هستید تا اولین مشارکت متن باز خود را تجربه کنید. به مخزن FreeCodeCamp در GitHub بروید و وارد بخش Issues شوید. ممکن است که باگ کوچکی را ببینید که مانند اشتباه املایی در یک پیام خطا، رنگ نامناسب یک دکمه یا even یک لینک خراب را در مستندات مشاهده کرده اید. اما همین عمل ساده بهترین نقطه شروع برای شما خواهد بود. در این مرحله مشکلات را حل خواهید کرد و  pull request می‌فرستید و پس از بررسی، اولین commit شما به یک پروژه‌ی بین‌المللی ثبت می‌شود. همین تجربه می تواند جرقه بزرگی برای ورود حرفه ای شما به این فضا باشد.

 ساخت داشبورد و پنل‌ های مدیریتی در چند دقیقه Appsmith

Appsmith یک ابزار منبع باز برای ساخت سریع ابزارهای داخلی، مانند پنل مدیریت، داشبورد و فرم های تحت وب است آن هم بدون نیاز به هیچ گونه طراحی. برای این کار کافی است تا API خود را داشته باشید و به Appsmith متصل کنید، مابقی فرآیند ها با Drag & Drop انجام خواهد شد. بنابراین شما با خیال راحت می‌توانید بر روی فعالیت‌های دیگر خود متمرکز باشید و ساخت جداول و فرم‌ها را به این برنامه بسپارید.

حال این سوال در میان می‌آید که چه چیزهایی را یاد خواهید گرفت؟ بیایید عمیق تر به این موضوع نگاهی بیاندازیم.

• اتصال به API های خارجی: یاد خواهید گرفت تا بتوانید یک REST API را به ابزار خود متصل کنید و داده‌ها را به راحتی fetch کنید و از همه مهم‌تر ویجت‌ها را نمایش دهید.
• ساخت فرم‌ها و اعتبار سنجی سمت کلاینت: بدون استفاده از کتابخانه هایی مانند React Hook Form، می‌توانید فرم‌ها داینامیک را طراحی کرده و ورودی ها را اعتبارسنجی کنید.
• نوشتن منطق‌های تعاملی بدون نیاز به فریم ورک فرانت‌اند: با استفاده از اسکریت های بسیار ساده مانند JavaScript، می‌توانید بین ویجت هال تعامل های مورد نیاز را بسازید، رویداد ها را کنترل کنید.

مثال کاربردی برای درک بهتر Appsmith

بیایید با مثال این بخش را بهتر درک کنیم. فرض کنید یک API ساده در اختیار دارید که اطلاعات کاربران را از یک دیتابیس دریافت می‌کند و ارائه می‌دهد، به عنوان مثال آدرس https://yourdomain.com/api/users. را در نظر بگیرید.

مراحل به صورت زیر خواهد بود:

1. ابتدا باید وارد بخش Datasource شوید و URL را به عنوان منبع داده تعریف کنید.
2. بعد از آن باید یک جدول آماده از ویجت‌ها را انتخاب کنید و آن را به همین API وصل کنید.
3. در عرض چند دقیقه، لیست کاربران بر روی پنل شما نمایش خواهد داده شد.

نکته جالب: اگر بخواهید بر روی هر سطر دکمه ای را بگذارید برای حذف و ویرایش، کافی است تا یک دکمه را اضافه کنید و یک تابع کوچک JS بنویسید که به API مربوطه متصل شود.

Outline ساخت یک ویرایشگر متنی مشابه به Notion

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

نکته جالب: Outline از React برای رابط کاربری، Koa.js برای معماری سمت سرور، و Slate.js برای ساخت ویرایشگر متنی قدرتمند استفاده می‌کند. شما می‌توانید از این ترکیب ها برای ساخت ابزارهای تعاملی و مقیاس پذیر استفاده کنید.

در این قسمت چه چیزی را یاد خواهید گرفت؟

• ساخت و مدیریت ویرایشگر های متنی پیچیده: با استفاده از Slate.js، می‌توانید یاد بگیرید تا چگونه یک ویرایشگر با قابلیت های فرمت بندی متن، لیست، تو در تو کردن عناصر، Undo/Redo و درج محتوای تعاملی را به راحتی بسازید.
• رندر بلادرنگ محتوای طولانی و سنگین: Outline برای رند بلادرنگ یا همان (real-time rendering) ساخته شده است و به این معنی است که شما چگونه می‌توانید محتوای چند کاربره را با سرعت و بدون افت عملکرد مدیریت کنید.
• آشنایی با معماری بک اند با Koa: این پروژه ساختار ماژولار مانندی را دارد و برخلاف فریم ورک های مانند Express، از Koa استفاده می‌کند که سینتکس ساده تری را به کاربر خود می‌دهد.

مثال کاربردی برای درک بهتر Outline

فرض کنید که قصد دارید تا برای تیم خود یک فضای مستند سازی داخلی مانند Notion را بسازید که امکان نوشتن، ویرایش، کامنت گذاری و جستجوی محتوا را داشته باشد.

با بررسی ساختار Outline می‌توانید:

• مشاهده کنید که ویرایشگر چگونه Slate.js و قابلیت هایی مانند Drag & Drop یا تودرتو کردن را دارد.
• یاد بگیرید که چگونه از Koa برای مدیریت API ها و احراز هویت استفاده می‌شود.
• تعامل React با ویرایشگر و سرور را درک کنید.

نکته مهم و حائز اهمیت: این پروژه تنها برای یادگیری نخواهد بود. اگر توسعه دهنده باشید و به دنبال ساخت ابزارهای تعاملی با قابلیت های نگهداری بالا هستید، بایستی به‌صورت دقیق بررسی های لازم را انجام دهید.

Hasura ساخت سریع GraphQL بدون نیاز به توسعه‌ بک‌ اند

Hasura ابزاری بسیار قدرتمند برای توسعه دهنگانی است که قصد دارند بدون نوشتن هیچ گونه المانی به سرعت یک API مبتنی بر GraphQL را داشته باشند. برای این عمل کافی است که یک دیتابیس Postgres داشته باشید. نکته جالب این است که Hasura به صورت کاملا خودکار کوئری ها، mutation ها و subscription های لازم را تولید می‌کند.

حال اگر این سوال پیش بیاید که چه چیزی را یاد خواهیم گرفت ادامه را از دست ندهید!

• آشنایی با مفاهیم پایه GraphQL و ساختار کوئری‌ها
• نحوه تعریف و اعمال کنترل دسترسی دقیق (Authorization) بر روی API
• استفاده از Subscription برای دریافت داده های بلادرنگ (Real-time)

مثال کاربردی برای درک بهتر Hasura

فرض کنید که جدولی با نام products را در پایگاه داده خود در اختیار دارید. به محض اینکه اتصال انجام شد، می‌توانید کوئری هایی مانند getAllProducts یا insertProduct را بدون نوشتن حتی یک خط کد بک‌اند، مستقیما اجرا کنید.

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

نکته قابل توجه و مهم: Hasura انتخاب مناسبی براس ساخت سریع داشبوردهای مدیریتی، اپلیکیشن های موبایل ریل تایم، یا MVP هایی هستند که به GraphQL نیاز دارند اما زمان یا منابع کافی برای پیاده سازی دستی بک اند وجود ندارد.

Strapi سیستم مدیریت محتوا برای توسعه‌ دهندگان

وردپرس بیشتر بر روی ساخت صفحات آماده تمرکز دارد، اما Strapi یک (Headless CMS) است، یعنی تنها داده را به شما می‌دهد و آزادی کامل را در طراحی رابط کاربری را در اختیار توسعه دهنده قرار می‌دهد. بنابراین به این معنی است که دیگر شما مجبور به آن نخواهید بود تا با قالب های آماده یا محدودیت های فرانت اند وردپرس چالشی را داشته باشید. شما ساختار داده را به صورتی طراحی خواهید کرد تا Strapi API تولید کند و با هر فریم ورکی که نیاز داشته اید از آن استفاده کنید.

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

• تعریف مدل‌های داده دقیقا بر اساس نیاز پروژه به عنوام مثال (ترکیب پست، نویسنده، دسته بندی، برچسب)
• استفاده از middleware های دلخواه و مورد نیاز برای اعتبارسنجی، احراز هویت یا تغییر API
• طراحی پنل مدیریت برای تیم محتوا بدون آنکه کدنویسی فرانت لازم باشد.
• گسترش پروژه ها با پلاگین های سفارشی یا تعامل با دیتابیس های موجود

مثال کاربردی برای درک بهتر Strapi

فرض قصد دارید تا یک وبلاگ حرفه ای بسازید. در Strapi می‌توانید تنها با چند حرکت ساده، مدل های زیر را تعریف کنید.

• Post: یا فیلدهایی مانند عنوان، متن، تصویر شاخص، زمان انتشار
• Author: شامل نام، بیوگرافی، آواتار
• Category: برای دسته‌بندی محتوا

بعد از تعریف مدل‌ها، Strapi خودش به صورت خودکار، API های لازم را برای خواندن، نوشتن، آپدیت و حذف محتوا را تولید می‌کند. شما تنها عملی که انجام می‌دهید این است که در Next.js بسازید و با استفاده از fetch یا Axios به این API متصل شوید.

نکته مهم و حائز: اگر پروژه شما قابلیت بزرگ تر شدن را داشت، Strapi این امکان را به شما می‌دهد تا نقش های کاربری را تعریف کنید، سطح دسترسی تعیین کنید و حتی از Webhook برای ارسال اعلان در زمان ساخت محتوای جدید از آن استفاده کنید.

Cal.com ساخت یک سیستم رزرو وقت حرفه‌ای مانند Calendly

اگر از Calendly استفاده کرده باشید می‌دانید تا روز کردن وقت و هماهنگی جلسات با این ابزار چه مقدار راحت خواهد بود. حال تصور کنید همین تجربه حرفه ای را با یک پروزه متن باز و قابل توسعه خود آن را پیاده سازی کنید. Cal.com دقیقا همین امکان را فراهم خواهد کرد، یک پلتفرم منبع باز برای مدیریت قرار ملاقات ها، با قابلیت هایی مانند اتصال به Google Calendar، انتخاب تایم، قالب های زمانی و حتی افزدون مراحل تایید دستی یا پرداخت را به شما می‌دهد.

در این پروژه چه المانی را یاد خواهید گرفت؟! بیایید نگاه دقیق تری را داشته باشیم.

• احراز هویت با OAuth (مانند ورود با اکانت گوگل یا اپل)
• همگام سازی دو طرفه با تقویم ها
• طراحی رابط کاربری برای انتخاب زمان، دید بازه‌های خالی و رزور قرار ملاقات
• ساخت صفحه پروفایل حرفه ای برای هر کاربر با امکان اشتراک گذاری لینک رزرو
• کار با Webhook برای اطلاع رسانی در زمان رزرو جدید یا تغییر زمان جلسه

مثال کاربردی برای درک بهتر Cal.com

فرض کنید فریلنسر هستید که قصد دارید برای مشتری ها از بین زمان های آزاد تقویم یک بازه‌ای که شما آن را انتخاب کرده‌اید جلسه را رزور کنند. با استفاده از پروژه Cal.com می‌توانید:

• یک فرم رزور طراحی کنید که به اکانت گوگل کاربر متصل باشد.
• زمان های در دسترس را از طریق API گوگل دریافت کنید.
• جلسه جدیدی را به صورت خودکار در Google Calendar ثبت کنید.
• در صورت نیاز، تایید دستی برای هر جلسه فعال کنید یا حتی فاکتور را بفرستید.

نکته تکمیلی: اگر به دنبال این هستید تا رزور وقت را در سرویس SaaS خود ادغام کنید، یا برای تیم خود یک سیستم رزرو داخلی راه بیندازید، کدهای Cal.com می‌توانند بهترین نقطه برای شروع باشند، هم از نظر معماری و هم از نظر تجربه کاربری.

Novu ساخت سیستم نوتیفیکیشن چند کاناله برای اپلیکیشن‌ ها

تجربه کاربری تنها برای رابط کاربری ختم نمی‌شود، اطلاع رسانی به موقع و حرفه ای به کاربر، بخش جدا ناپذیر از هر اپلیکیشنی خواهد بود. Novu یک پلتقرم متن باز و جدید برای مدیریت نوتیفیکشن های چند کاناله است، به این معنی است که شما می‌توانید با یک سیستم مرکزی، پیام ها را همزمان از طریق ایمیل، SMS، نوتیفیکشن داخل اپ، پیام تلگرام یا Slack و حتی push notification ارسال کنید، بدون آنکه لازم باشد برای هر کانال کد جداگانه ای را بنویسید.

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

• طراحی ساختار نوتیفیکشن بر اساس رخداد های اپلیکیشن (event-driven)
• اتصال به سرویس های پیام رسانی مانند Slack , Twilio , SendGrid
• تعیین اولویت، زمان بندی و شرط های ارسال برای نوتیفیکشن ها
• ساخت پنل مدیریت نوتیفیکشن برای کاربران (خوانده شده/ نشده، حذف، ذخیره سازی)
• ارسال نوتیفیکشن های دسته جمعی یا شخصی سازی شده برای هر کاربر

مثال کاربردی برای درک بهتر Novu

فرض کنید در حال توسعه دادن یک فروشگاه آنلاین هستید و زمانی که کاربر سفارشی را ثبت می‌کند، شما نیاز دارید تا:

• یک ایمیل تایید برای مشتری ارسال شود.
• یک پیامک حاوی شماره پیگیری ارسال شود.
• در پنل کاربری هم یک نوتیفیکشن نمایش داده بشود.
• مدیر سیستم هم در Slack مطلع شود که سفارش ثبت شده است.

با Novu تنها کافی است که یک event به اسم order_placed تعریف کنید، و باقی کارها رh با تنظیمات داخل Novu انجام دهید. بدون نیاز به هیچ گونه مدیریت جداگانه‌ ای در کانال های پیام‌رسانی.

نکته ویژه: Novu برای تیم های کوچک و استارتاپی مفید است، به این دلیل که به جای صرف کردن وقت برای ساخت سیستم نوتیفیکشن های داخلی، می‌توانید از یک ابزار متن باز و ماژولار استفاده کنید که به راحتی با فریم ورک هایی مانند NestJS , Express , Next.js و Laravel هم ادغام شود.

Supabase نسخه‌ متن‌ باز Firebase با قدرت PostgreSQL

اگر به دنبال یک راهکار سریع و حرفه ای بررای ساخت بک اند هستید، بدون دردسر راه اندازی سرور، نوشتن API یا پیاده سازی auth Supabase یکی از بهترین گزینه‌ها است. این پلتفرم متن باز تمام چیزی که برای ساهت یک اپلیکیشن نیاز دارید را به شما می‌دهد:

• دیتابیس
• احراز هویت
• ذخیره سازی
• قابلیت های ریل تایم real-time

حال این سوال پیش می‌آید که چه چیزی را یاد خواهید گرفت؟

• ساخت API خودکار: به‌محض ایجاد جدول، Supabase به‌صورت خودکار endpoint های REST و GraphQL تولید خواهد کرد.
• احراز هویت مدرن: با magic link و OAuth (گوگل، گیت‌هاب) بدون نیاز به تنظیمات سخت، ثبت‌نام و ورود را در چند دقیقه راه‌اندازی خواهید کرد.
• مدیریت امنیت سطح ردیف (Row-Level Security): می‌تونید دقیقا مشخص کنید چه کاربری به کدام رکوردها دسترسی داشته باشد.
• قابلیت real-time بدون کدنویسی اضافی: هر زمان داده‌ای تغییر کرد، می‌توانید اپلیکیشن را آپدیت کنید.