مهدی نیسی
مهدی نیسی
خواندن ۴ دقیقه·۴ سال پیش

5 پروژه جاوااسکریپت که باید به عنوان توسعه دهنده Junior Frontend بسازید

توسعه دهنده فرانت اند

وقتی به دنبال کار اول به عنوان توسعه دهنده Junior Front-end هستید، نشان دادن تجربه خود به عنوان یک برنامه نویس بسیار سخت است. پروژه های شما به عنوان زمین بازی برای یادگیری مهارت های جدید به ندرت کیفیت کد خوبی را ارائه می دهند. اگر برای اولین بار چیزی بنویسید نوشتن کد کامل غیرممکن است!

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




1. ساخت یک قالب وبلاگ با HTML و CSS

قالب وبلاگ با html و css
قالب وبلاگ با html و css

هنگامی که تازه شروع به یادگیری توسعه front-end می کنید، مهم است که دانش خود را در مورد HTML و CSS ادغام کنید. ساخت یک قالب وبلاگ ایده خوبی برای اولین پروژه بزرگ شماست. در مورد طراحی نگران نباشید، منابع زیادی به صورت آنلاین در دسترس هستند.

الزامات پروژه:

  1. ساخت صفحه اصلی (homepage)، صفحه مختص هر پست (single post page) و تماس با ما
  2. سعی کنید از CSS Grid و Flexbox استفاده کنید
  3. حتما باید سایت شما واکنش گرا (responsive) باشد

موارد اضافه تر:

  1. اضافه کردن اسلایدر (slider)
  2. به جای lorem ipsum از متن واقعی استفاده کنید



2. یک بازی tic-tac-toe با جاوااسکریپت خالص بسازید

بازی tic-tac-toe با جاوااسکریپت
بازی tic-tac-toe با جاوااسکریپت

ساخت یک بازی در یک مرورگر می تواند یک تمرین عالی برای آزمایش مهارت های جاوااسکریپت شما باشد. شما باید به رویدادهای کاربر واکنش نشان دهید، با DOM تعامل کنید و داده های بازی را ذخیره کنید. این همچنین یک پروژه عالی برای نشان دادن به همکاران و خانواده شما است!

الزامات پروژه:

  1. صفحه خوش آمدید با نام و نماد ورودی (symbol input) برای هر بازیکن
  2. رندر کردن یک نماد (symbol) هنگامی که کاربر بر روی سلول (cell) خالی کلیک می کند
  3. نمایش برنده

موارد اضافه تر:

  1. ساخت یک جدول امتیاز و ذخیره آن در local storage
  2. استفاده از انیمیشن ها (animations)



3. اشتراک گذاری مکان با جاوااسکریپت خالص و سرویس Maps

اشتراک گذاری مکان با جاوااسکریپت خالص و سرویس Maps
اشتراک گذاری مکان با جاوااسکریپت خالص و سرویس Maps

یک برنامه ساده که در آن می توانید مکان خود را با دوست خود به اشتراک بگذارید می تواند هم یک پروژه طلبکارانه باشد و هم یک ابزار بسیار مفید که می توانید استفاده کنید. در این پروژه، از جاوااسکریپت برای تعامل با سرویس های خارجی نقشه (از قبیل Google Maps یا OpenStreetMap) استفاده خواهید کرد.

الزامات پروژه:

  1. نمایش مکان فعلی شما روی نقشه
  2. ساخت دکمه اشتراک (Share) که لینکی با مکان فعلی شما ایجاد می کند

موارد اضافه تر:

  1. به اشتراک گذاری مکان به صورت realtime، شما باید آن را ذخیره کنید و هر چند ثانیه یک بار آن را از یک پایگاه داده خارجی بخوانید (مثلا Firebase)
  2. نمایش موقعیت مکانی به صورت realtime در صفحه دوست شما، زمانی که دسترسی به آن داشته باشد



3. ساخت TV Series Tracker با یکی از فریم ورک های جاوااسکریپت (Vuejs - Angular - React یا موارد دیگر)

tv series tracker
tv series tracker

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

الزامات پروژه:

  1. جستجوی مجموعه های تلویزیونی با استفاده از API خارجی (به عنوان مثال TVMaze API)
  2. اضافه کردن مجموعه های تلویزیونی به لیست پیگیری (tracking list)
  3. نمایش لیست دنبال شده سریال های تلویزیونی همراه با جدیدترین تاریخ پخش قسمت
  4. نمای تک صفحه با جزئیات بیشتر درباره سریال های تلویزیونی
  5. ذخیره لیست پیگیری در local storage

موارد اضافه تر:

  1. ارسال ایمیل یا نمایش اعلان ها (notifications) زمانی که قسمت جدید منتشر می شود



3. ساخت برنامه بودجه خانگی با یکی از فریم ورک های جاوااسکریپت (Vuejs - Angular - React یا موارد دیگر)

برنامه بودجه خانگی
برنامه بودجه خانگی

ایجاد برنامه بودجه خانگی یک بررسی نهایی برای مهارت های شما به عنوان یک توسعه دهنده Junior Frontend خواهد بود. این توانایی شما در ایجاد فرم ها و ذخیره اطلاعات را بررسی می کند، اما همچنین می تواند به شما در صرفه جویی در هزینه کمک کند!

الزامات پروژه:

  1. افزودن یک دسته (category)
  2. اضافه کردن هزینه با نام (name)، مقدار (amount) و دسته (category)
  3. جمع بندی هزینه های ماهانه تقسیم شده به دسته ها
  4. ذخیره اطلاعات در یک پایگاه داده خارجی (به عنوان مثال Firebase)

موارد اضافه تر:

  1. بخش های ثبت نام، ورود و مدیریت نقش کاربران (role)



خلاصه

پروژه های جانبی یک روش عالی برای نشان دادن مهارت های شما برای به دست آوردن شغل اول به عنوان Junior Front-end Developer است. به کارفرمای خود بگویید که تاکنون چه چیزی هایی ساخته اید. آنها نه تنها به صفحه وب نگاه می کنند بلکه کد شما را نیز تجزیه و تحلیل می کنند، بنابراین از تمیز بودن آن اطمینان حاصل کنید.

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

به یاد داشته باشید، لازم نیست که آن مثالها را 1 به 1 تقلید کنید. در صورت تمایل جزئیات مورد علاقه خود را تغییر، اضافه یا حذف کنید. اگر پروژه های قدیمی تری دارید که از آنها برای یادگیری مهارت های جدید استفاده کرده اید، همیشه می توانید آن را بازسازی کرده و در یک نمونه کارها قرار دهید.

برگرفته از www.slawkolodziej.com

برنامه نویسیفرانت اندجاوااسکریپتری اکتطراحی سایت
فرانت‌اند دولوپر
شاید از این پست‌ها خوشتان بیاید