🥇Front-end додзё: проекты для тренировки навыков разработчика (5 новых + 43 старых)

1. Клон Notion

Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.

www.notion.so

Чему вы научитесь, создавая клон Notion:

HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

مقاله د EDISON سافټویر په ملاتړ ژباړل شوې ، کوم چې разрабатывает приложения и сайтыاو همدارنګه په پیل کې پانګونه کوي.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

repl.it

Чему вы научитесь, создавая клон Repl.it:

Как запускать и выполнять код (server-side) в браузере (client-side).
Считывать входные данные (исходный код) и выводить на экран результат выполнения.
Как создавать файлы и папки в вебе и сохранять результаты.
Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
بونس: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

ګیفسکي конвертирует видео в GIF используя функцииpngquant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

Чему вы научитесь, создавая клон Gifski:

Как конвертировать видео файлы (.mp4 в .gif).
Как использовать API Drag and Drop HTML.
Как работают оптимизация и обработка изображений.

نوټ: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

Как работать с API и получать данные удаленно из API.
Как отобразить данные в виде списка.
بونس: Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

نوټ: دلته GitHub example repository.

Подборка проектов из предыдущих публикаций.

طبقه

www.reddit.com/r/layer

پرت یوه ټولنه ده چیرې چې هرڅوک کولی شي په ګډ "بورډ" کې پکسل رسم کړي. اصلي نظر په Reddit کې زیږیدلی و. د r/Layer ټولنه د ګډ خلاقیت لپاره یو استعاره ده، چې هرڅوک کولی شي یو جوړونکی وي او په یو ګډ لامل کې مرسته وکړي.

هغه څه چې تاسو به یې زده کړئ کله چې خپل پرت پروژه رامینځته کړئ:

د جاواسکریپټ کینوس څنګه کار کوي د کینوس چلولو څرنګوالي پوهیدل په ډیری غوښتنلیکونو کې یو مهم مهارت دی.
د کارونکي اجازې همغږي کولو څرنګوالی. هر کاروونکی کولی شي په هرو 15 دقیقو کې د ننوتلو پرته یو پکسل رسم کړي.
د کوکي ناستې جوړې کړئ.

سکوټوش

squoosh.app

اسکوش د عکس کمپریشن غوښتنلیک دی چې ډیری پرمختللي اختیارونه لري.

GIF 20 MB

د Squosh د خپل نسخه په جوړولو سره تاسو به زده کړئ:

د عکس اندازې سره څنګه کار کول
د Drag'n'Drop API اساسات زده کړئ
پوهیږئ چې API او د پیښې اوریدونکي څنګه کار کوي
د فایلونو پورته کولو او صادرولو څرنګوالی

نوټ: د عکس کمپرسور ځایی دی. دا اړینه نده چې سرور ته اضافي معلومات واستوي. تاسو کولی شئ په کور کې کمپرسور ولرئ، یا تاسو کولی شئ دا په سرور کې وکاروئ، ستاسو انتخاب.

کیلکټرونکی

زه نو؟ په جدي توګه؟ محاسبه کوونکی؟ هو، دقیقا، یو کیلکولیټر. د ریاضی عملیاتو اساساتو پوهیدل او دا چې څنګه دوی یوځای کار کوي ستاسو د غوښتنلیکونو ساده کولو لپاره یو مهم مهارت دی. ژر یا وروسته تاسو باید د شمیرو سره معامله وکړئ او څومره ژر چې ښه وي.

jarodburchill.github.io/CalculatorReactApp

د خپل کیلکولیټر په جوړولو سره تاسو به زده کړئ:

د شمیرو او ریاضی عملیاتو سره کار وکړئ
د پیښې اوریدونکو API سره تمرین وکړئ
څنګه عناصر تنظیم کړئ، په سټایلونو پوه شئ

کرالر (د لټون انجن)

هرڅوک د لټون انجن کارولی، نو ولې خپل ځان جوړ نه کړئ؟ د معلوماتو لټون کولو لپاره کرالر ته اړتیا ده. هرڅوک دوی هره ورځ کاروي او د دې ټیکنالوژۍ او متخصصینو غوښتنه به یوازې د وخت په تیریدو سره وده وکړي.

د ګوګل لټون انجن

هغه څه چې تاسو به د خپل ځان د لټون انجن په جوړولو سره زده کړئ:

کرالر څنګه کار کوي
د سایټونو لیست کولو څرنګوالی او د درجه بندي او شهرت له مخې دوی څنګه درجه بندي کول
په ډیټابیس کې د شاخص شوي سایټونو ذخیره کولو څرنګوالی او د ډیټابیس سره څنګه کار کول

د میوزیک پلیر (Spotify، Apple Music)

هرڅوک میوزیک اوري - دا زموږ د ژوند یوه لازمي برخه ده. راځئ چې د میوزیک پلیر رامینځته کړو ترڅو ښه پوه شي چې څنګه د عصري میوزیک سټیمینګ پلیټ فارم لومړني میکانیکونه کار کوي.

Spotify

هغه څه چې تاسو به یې د خپل میوزیک سټیمینګ پلیټ فارم رامینځته کولو سره زده کړئ:

د API سره څنګه کار کول. د سپوټایف یا ایپل میوزیک څخه API وکاروئ
راتلونکي / مخکیني ټریک ته څنګه لوبې کول ، وقف کول یا بیرته راګرځول
د حجم بدلولو څرنګوالی
د کارونکي روټینګ او براوزر تاریخ اداره کولو څرنګوالی

د عکس العمل په کارولو سره د فلم لټون ایپ (د هکسونو سره)

لومړی شی چې تاسو یې پیل کولی شئ د عکس العمل په کارولو سره د فلم لټون ایپ رامینځته کول دي. لاندې یو عکس دی چې وروستی غوښتنلیک به څنګه ښکاري:

تاسو به څه زده کړئ
د دې اپلیکیشن په جوړولو سره، تاسو به د نسبتا نوي Hooks API په کارولو سره خپل د غبرګون مهارتونه ښه کړئ. د مثال پروژه د عکس العمل اجزا ، ډیری هکونه ، یو بهرنی API ، او البته ځینې CSS سټایل کاروي.

ټیک سټیک او ځانګړتیاوې

د هکونو سره غبرګون وکړئ
د - عکس العمل ایپ
JSX
سی ایس ایس

د کوم ټولګیو کارولو پرته ، دا پروژې تاسو ته په فعال عکس العمل کې د ننوتلو کامل نقطه درکوي او یقینا به په 2020 کې ستاسو سره مرسته وکړي. تاسو موندلی شئ د پروژې مثال دلته. لارښوونې تعقیب کړئ یا خپل ځان جوړ کړئ.

د Vue سره د چیټ ایپ

ستاسو لپاره بله عالي پروژه زما د غوره جاواسکریپټ کتابتون په کارولو سره د چیټ ایپ رامینځته کول دي: VueJS. غوښتنلیک به داسې ښکاري:

تاسو به څه زده کړئ
پدې ټیوټوریل کې ، تاسو به زده کړئ چې څنګه له سکریچ څخه Vue ایپ رامینځته کړئ - د اجزاو رامینځته کول ، حالت اداره کول ، لارې رامینځته کول ، د دریمې ډلې خدماتو سره وصل کول ، او حتی د تصدیق اداره کول.

ټیک سټیک او ځانګړتیاوې

پیشنهاد
وویکس
Vue راوټر
Vue CLI
Pusher
سی ایس ایس

دا واقعیا یوه عالي پروژه ده چې د Vue سره پیل وکړئ یا په 2020 کې پراختیا ته د رسیدو لپاره خپل موجوده مهارتونه ښه کړئ. تاسو موندلی شئ دلته سبق.

د Angular 8 سره د هوا ښکلی ایپ

دا مثال به تاسو سره د Angular 8 په کارولو سره د ښکلي هوا ایپ رامینځته کولو کې مرسته وکړي:

تاسو به څه زده کړئ
دا پروژه به تاسو ته له سکریچ څخه د غوښتنلیکونو په جوړولو کې ارزښتناکه مهارتونه درکړي - د ډیزاین څخه د پراختیا له لارې، د پلي کولو لپاره چمتو غوښتنلیک پورې.

ټیک سټیک او ځانګړتیاوې

انګړ 8
د اور وژنې
د سرور اړخ وړاندې کول
د ګریډ او فلیکس بکس سره CSS
د ګرځنده دوستانه او تطبیق وړ
تیاره حالت
ښکلی انٹرفیس

هغه څه چې زه واقعیا د دې هر اړخیزې پروژې په اړه خوښوم دا دی چې تاسو شیان په انزوا کې مه مطالعه کوئ. پرځای یې ، تاسو د ډیزاین څخه تر وروستي ګمارلو پورې د پراختیا ټوله پروسه زده کړئ.

د Svelte په کارولو سره د ترسره کولو غوښتنلیک

سویلټ د برخې پراساس چلند کې د نوي ماشوم په څیر دی - لږترلږه د عکس العمل ، ویو او انګولر سره ورته. او دا د 2020 لپاره یو له خورا ګرمو نویو محصولاتو څخه دی.

د ترسره کولو ایپس اړین ندي چې ترټولو ګرمه موضوع وي، مګر دا به واقعیا تاسو سره ستاسو د سویلټ مهارتونو په ښه کولو کې مرسته وکړي. دا به داسې ښکاري:

تاسو به څه زده کړئ
دا ټیوټوریل به تاسو ته وښیې چې څنګه د پیل څخه تر پای پورې د Svelte 3 په کارولو سره غوښتنلیک رامینځته کړئ. تاسو به اجزا، سټایل، او د پیښې سمبالونکي وکاروئ

ټیک سټیک او ځانګړتیاوې

Svelte 3
اجزاء
د CSS سره سټایل کول
ES 6 ترکیب

دلته ډیری ښه سویلټ سټارټر پروژې شتون نلري ، نو ما وموندله دا د پیل کولو لپاره یو ښه اختیار دی.

د Next.js په کارولو سره د ای کامرس ایپ

Next.js د عکس العمل غوښتنلیکونو جوړولو لپاره خورا مشهور چوکاټ دی چې د بکس څخه بهر د سرور اړخ رینډرنګ ملاتړ کوي.

دا پروژه به تاسو ته وښیې چې څنګه د ای کامرس غوښتنلیک رامینځته کړئ چې داسې ښکاري:

تاسو به څه زده کړئ
په دې پروژه کې، تاسو به زده کړئ چې څنګه د Next.js سره وده وکړئ—نوې پاڼې او برخې جوړې کړئ، ډاټا استخراج کړئ، او سټایل او د راتلونکی غوښتنلیک ځای په ځای کړئ.

ټیک سټیک او ځانګړتیاوې

Next.js
اجزا او پاڼې
د معلوماتو نمونه کول
سټایلیزیشن
د پروژې پلي کول
SSR او SPA

دا تل خورا ښه دی چې د ریښتیني نړۍ مثال ولرئ لکه د ای کامرس ایپ ترڅو یو څه نوي زده کړئ. تاسو یې کولای شئ دلته سبق ومومئ.

د Nuxt.js سره بشپړ څو ژبی بلاګ

Nuxt.js د Vue لپاره دی، څه Next.js د عکس العمل لپاره دی: د سرور-سایډ رینډرینګ او واحد مخ غوښتنلیکونو ځواک ترکیب لپاره عالي چوکاټ
وروستی غوښتنلیک چې تاسو یې رامینځته کولی شئ داسې ښکاري:

تاسو به څه زده کړئ

په دې نمونه پروژه کې، تاسو به زده کړئ چې څنګه د Nuxt.js په کارولو سره یوه بشپړه ویب پاڼه جوړه کړئ، د ابتدايي ترتیب څخه تر وروستي ګمارلو پورې.

دا د ډیری غوره ځانګړتیاو څخه ګټه پورته کوي چې Nuxt یې وړاندیز کوي، لکه پاڼې او برخې، او د SCSS سره سټایل کول.

ټیک سټیک او ځانګړتیاوې

نکسټ. js
اجزا او پاڼې
د کیسې بلاک ماډل
هګ فش
د دولت مدیریت لپاره Vuex
د سټایل کولو لپاره SCSS
Nuxt Middlewares

دا واقعیا په زړه پوری پروژه دهپه کوم کې چې د Nuxt.js ډیری غوره ځانګړتیاوې شاملې دي. زه په شخصي توګه د Nuxt سره کار کولو سره مینه لرم نو تاسو باید دا هڅه وکړئ ځکه چې دا به تاسو ته یو لوی Vue پراختیا کونکی هم کړي.

د ګټسبي سره بلاګ

ګیټسبي د عکس العمل او ګراف کیو ایل په کارولو سره یو عالي جامد سایټ جنریټر دی. دا د پروژې پایله ده:

تاسو به څه زده کړئ

پدې ټیوټوریل کې ، تاسو به زده کړئ چې څنګه د ګیټسبي کارولو لپاره یو بلاګ رامینځته کړئ چې تاسو به یې د عکس العمل او ګراف کیو ایل په کارولو سره د خپلو مقالو لیکلو لپاره وکاروئ.

ټیک سټیک او ځانګړتیاوې

ګيټسبي
غبرګون
ګراف
پلگ انونه او موضوعات
MDX/مارک ډاون
بوټسټراپ سی ایس ایس
کينډۍ

که تاسو کله هم غوښتل چې بلاګ پیل کړئ، دا یو ښه مثال دی د عکس العمل او ګراف کیو ایل په کارولو سره دا څنګه جوړ کړئ.

زه نه وایم چې ورڈپریس یو بد انتخاب دی، مګر د ګیټسبي سره تاسو کولی شئ د عکس العمل په کارولو سره د لوړ فعالیت ویب پاڼې جوړې کړئ - کوم چې یو حیرانتیا ترکیب دی.

د Gridsome سره بلاګ

د Vue لپاره Gridsome... ښه، موږ دا دمخه د Next/Nuxt سره درلودل.
مګر ورته د ګریډسم او ګټسبي لپاره ریښتیا ده. دواړه GraphQL د دوی د ډیټا پرت په توګه کاروي ، مګر ګریډسم VueJS کاروي. دا یو حیرانونکی جامد سایټ جنریټر هم دی چې تاسو سره به د عالي بلاګونو رامینځته کولو کې مرسته وکړي:

تاسو به څه زده کړئ

دا پروژه به تاسو ته درس درکړي چې څنګه د Gridsome، GraphQL او Markdown سره پیل کولو لپاره یو ساده بلاګ جوړ کړئ. دا د Netlify له لارې د غوښتنلیک پلي کولو څرنګوالی هم پوښي.

ټیک سټیک او ځانګړتیاوې

سخت
پیشنهاد
ګراف
نښه کول
Netliify

دا په حقیقت کې خورا هراړخیز ټیوټوریل ندی ، مګر دا د ګریډسم لومړني مفکورې پوښي او مارک ډاون ممکن یو ښه پیل ټکی وي.

د ساونډ کلاډ په څیر آډیو پلیر د Quasar په کارولو سره

Quasar یو بل Vue چوکاټ دی چې د ګرځنده غوښتنلیکونو جوړولو لپاره کارول کیدی شي. پدې پروژه کې به تاسو د آډیو پلیر غوښتنلیک رامینځته کړئ ، د مثال په توګه:

تاسو به څه زده کړئ

پداسې حال کې چې نورې پروژې په عمده توګه په ویب غوښتنلیکونو تمرکز کوي، دا به تاسو ته وښيي چې څنګه د Vue او Quasar چوکاټ په کارولو سره د ګرځنده غوښتنلیک رامینځته کول.
تاسو باید دمخه د Android سټوډیو/ ایکس کوډ ترتیب شوي سره کارډووا چل کړئ. که نه، لارښود د Quasar ویب پاڼې سره اړیکه لري چیرې چې دوی تاسو ته ښیې چې څنګه هرڅه تنظیم کړئ.

ټیک سټیک او ځانګړتیاوې

کوثر
پیشنهاد
Cordova
WaveSurfer
د UI اجزا

کوچنۍ پروژهد موبایل اپلیکیشنونو جوړولو لپاره د Quasar وړتیاوې ښودل.

Форма кредитной карты

د اسانه او خوندور مایکرو تعاملاتو سره یو ښه کریډیټ کارت شکل. د نمبر فارمیټ کول، تصدیق کول او د اتوماتیک کارت ډول کشف کول شامل دي. دا په Vue.js کې جوړ شوی او په بشپړ ډول ځواب ویونکی دی. (تاسو لیدلی شئ دلته.)

د کریډیټ کارت فورمه