1. Клон Notion
Додаток Notion сподобався багатьом, дозволяє оптимізувати робочий процес, працювати з документами, планувати завдання, синхронізувати дані між пристроями.
Чому ви навчитеся, створюючи клон Notion:
- . Користувач може «схопити мишкою» перетягується елемент і помістити його в опускається зону.
- Як синхронізувати дані в режимі реального часу між комп'ютером і смартфоном.
- Ми дозволяємо користувачам створювати, читати, оновлювати та видаляти записи, тим самим ми тренуємо CRUD-навички.
Статтю перекладено за підтримки компанії EDISON Software, яка , а також .
2. Клон Repl.it
Repl.it це інструмент для спільного редагування коду в реальному часі. Можна вибрати кілька мов: JavaScript, Python, Go та виконувати код прямо у браузері. Дуже корисно для швидких демонстрацій та код-інтерв'ю.
Чого ви навчитеся, створюючи клон Repl.it:
- Як запускати та виконувати код (server-side) у браузері (client-side).
- Зчитувати вхідні дані (вихідний код) та виводити на екран результат виконання.
- Як створювати файли та папки в Інтернеті та зберігати результати.
- Як підсвічувати синтаксис коду
3. Клон Google Photos
Google Photos – це сервіс для зберігання та обміну фоток.
Будь-який сучасний додаток по роботі з фотографіями вміє виконувати базові функції: завантажувати, обрізати та ін. Люди хочуть створювати свої аватарки та ділитися фотками котиків, тому треба вміти працювати із зображеннями.
Чого ви навчитеся, створюючи клон Google Photos:
- Як створювати адаптивні зображення на телефонах, планшетах, ноутбуках та навіть на гігантських екранах телевізорів.
- Як обробляти завантаження зображень, особливо великих зображень (>1МБ) та масових завантажень.
- Обробка файлів зображень, обрізка та зміна розміру фотографій для мініатюр або під час відкриття галереї.
- бонус: як зберігати зображення у хмарі чи локальній базі даних.
4. Клон Gifsky
конвертує відео в GIF використовуючи функції для ефективних палітр крос-кадрів та тимчасового згладжування. В результаті виходить гіфка із тисячами кольорів на кадр.
Чому ви навчитеся, створюючи клон Gifski:
- Як конвертувати відео файли (.mp4 в .gif)
- Як використовувати API Drag and Drop HTML.
- Як працюють оптимізація та обробка зображень.
Примітка: і є на GitHub!
5. Моніторинг курсів криптовалют
React Native cryptocurrency tracker
Чого ви навчитеся, створюючи трекер курсу валют:
- Як працювати з API та отримувати дані віддалено з API.
- Як відобразити дані у вигляді списку.
- бонус: Якщо вам цікаво, я нещодавно написав на криптовалюту із React Native.
Примітка: Ось .
Добірка проектів із попередніх публікацій.
шар
Layer — це спільнота, де кожен може намалювати піксель на спільній дошці. Оригінальна ідея народилася Reddit. Спільнота r/Layer — це метафора спільної творчості, що кожен може бути творцем і робити внесок у спільну справу.
Чому ви навчитеся створювати свій проект Layer:
- Як працюють JavaScript canvas, вміння оперувати canvas - критично важлива навичка у багатьох додатках.
- Як координувати user permissions (дозволи користувача). Кожен користувач може малювати один піксель раз на 15 хвилин і при цьому не треба логінуватися.
- Створювати cookie sessions.
Squoosh
Squoosh - це програма зі стиснення зображень з безліччю просунутих опцій.
Гіфка на 20 мб
Створюючи свою версію Squoosh ви навчитеся:
- Як працювати з розмірами зображень
- Опануйте основи Drag'n'Drop API
- Розберетеся як працюють API та еvent listeners
- Як завантажувати та експортувати файли
Примітка: компресор зображень локальний. Не обов'язково надсилати додаткові дані на сервер. Можна мати компресор у себе, а можна на сервер, на ваш вибір.
Калькулятор
Та гаразд? Серйозно? Калькулятор? Так, саме калькулятор. Розуміти основи математичних операцій та як вони працюють спільно – критично важлива навичка для спрощення ваших додатків. Рано чи пізно вам доведеться розбиратися з числами і що раніше, тим краще.
Створюючи свій калькулятор ви навчитеся:
- Працювати з числами та мат операціями
- Попрактикуєтеся з event listeners API
- Як розташовувати елементи, розберетеся зі стилями
Crawler (Пошуковий двигун)
Кожен користувався пошуковою системою, то чому б не створити власну? Краулери потрібні, щоб шукати інформацію. Ними користуються всі кожен день і попит з часом на цю технологію і фахівців тільки зростатиме.
Пошуковик Гугла
Чому навчитеся, створюючи свою пошукову систему:
- Як працюють краулери
- Як індексувати сайти та як їх ранжувати за рейтингом та репутацією
- Як зберігати індексовані сайти в базі даних та як працювати з базою даних
Музичний плеєр (Spotify, Apple Music)
Усі слухають музику — це просто невід'ємна частина нашого життя. Давайте створимо музичний програвач, щоб краще зрозуміти, як працює базова механіка сучасної платформи потокової передачі музики.
Spotify
Чому навчитеся, створюючи свою музичну стрімінгову платформу:
- Як працювати з API використовувати API від Spotify або Apple Music
- Як програвати, зупиняти або перемотувати на наступну/попередню композицію
- Як міняти гучність
- Як керувати маршрутизацією користувачів та історією браузера
Додаток для пошуку фільмів за допомогою React (з хуками)
Перше, з чого ви могли б почати, це створити додаток для пошуку фільмів за допомогою React. Нижче наведено зображення того, як виглядатиме фінальна програма:
Що ви дізнаєтеся
Створюючи цю програму, ви покращите свої навички React, використовуючи порівняно новий API Hooks. У прикладі проекту використовуються компоненти React, безліч хуків, зовнішній API та, звичайно, деякі стилі CSS.
Технічний стек та фічі
- React з hook'ами
- створити-реагувати-додаток
- JSX
- CSS
Без використання будь-яких класів, ці проекти дають вам ідеальну точку входу в функціональний React і допоможуть вам у 2020 році. Ви можете знайти . Виконуйте інструкції або зробіть все на власний смак.
Програма чату за допомогою Vue
Ще один чудовий проект для вас – створити програму чату, використовуючи мою улюблену бібліотеку JavaScript: VueJS. Додаток буде виглядати приблизно так:
Що ви дізнаєтеся
З цього посібника ви дізнаєтеся, як зробити програму Vue з нуля — створювати компоненти, обробляти стани, створювати маршрути, підключатися до сторонніх сервісів і навіть обробляти автентифікацію.
Технічний стек та фічі
- Vue
- vuex
- Маршрутизатор Vue
- Вигляд CLI
- Штовхач
- CSS
Це дійсно чудовий проект, щоб почати працювати з Vue або покращити свої існуючі навички, щоб зайнятися розробкою у 2020 році. Ви можете знайти .
Прекрасний додаток для перегляду погоди з Angular 8
Цей приклад допоможе вам створити красиву програму для перегляду погоди за допомогою Angular 8:
Що ви дізнаєтеся
Цей проект навчить вас цінним навичкам при створенні додатків з нуля — починаючи з проектування і до розробки, аж до готового до розгортання програми.
Технічний стек та фічі
- Кутова 8
- Firebase
- Рендеринг на стороні сервера
- CSS з сіткою та Flexbox
- Mobile friendly та адаптивність
- темний режим
- Гарний інтерфейс
Що мені дійсно дуже подобається в цьому всеосяжному проекті, то це те, що ви не вивчаєте речі ізольовано. Натомість ви вивчаєте весь процес розробки — від проектування до остаточного розгортання.
To-Do додаток за допомогою Svelte
Svelte це як нова дитина у компонентному підході — принаймні схожа на React, Vue та Angular. І це одна з найгарячіших новинок на 2020 рік.
To-Do програми не обов'язково є найгарячішою темою, але це дійсно допоможе вам відточувати свої навички Svelte. Це буде виглядати так:
Що ви дізнаєтеся
З цього туторіалу ви дізнаєтеся, як створити програму за допомогою Svelte 3, від початку до кінця. Ви будете використовувати компоненти, стилізацію та обробники подій
Технічний стек та фічі
- Svelte 3
- Компоненти
- Стилізація за допомогою CSS
- Синтаксис ES 6
Існує не так багато хороших стартових проектів з Svelte, тому я знайшов .
Програма для електронної комерції за допомогою Next.js
Next.js є найпопулярнішим фреймворком для створення програм React, які підтримують рендеринг на стороні сервера з коробки.
Цей проект покаже вам, як створити програму для електронної комерції, яка виглядає так:
Що ви дізнаєтеся
У цьому проекті ви дізнаєтеся, як розробляти за допомогою Next.js — створювати нові сторінки та компоненти, отримувати дані, а також стилізувати та розгортати Next.
Технічний стек та фічі
- Next.js
- Компоненти та сторінки
- Вибірка даних
- стилізація
- Розгортання проекту
- SSR та SPA
Завжди чудово мати реальний приклад, такий як додаток для електронної комерції, щоб дізнатися щось нове. Ви можете .
Повноцінний мультимовний блог із Nuxt.js
Nuxt.js для Vue, теж що і Next.js для React: чудовий фреймворк для об'єднання можливостей рендерингу на стороні сервера та односторінкових додатків
Остання програма, яку ви можете створити, буде виглядати так:
Що ви дізнаєтеся
У цьому прикладі проекту ви дізнаєтесь, як створити повноцінний веб-сайт із використанням Nuxt.js — від початкового налаштування до остаточного розгортання.
Він використовує безліч цікавих функцій, які Nuxt може запропонувати, наприклад, сторінки та компоненти, а також стилізацію за допомогою SCSS.
Технічний стек та фічі
- Nuxt.js
- Компоненти та сторінки
- Storyblock модуль
- Міксини
- Vuex для керування станом
- SCSS для стилізації
- Nuxt middlewares
, який включає безліч чудових можливостей Nuxt.js. Я особисто люблю працювати з Nuxt, так що вам варто спробувати його, тому що це також зробить вас чудовим розробником Vue.
Блог з Gatsby
Gatsby - відмінний генератор статичних сайтів, що використовує React та GraphQL. Це результат проекту:
Що ви дізнаєтеся
У цьому посібнику ви дізнаєтеся, як використовувати Gatsby для створення блогу, який ви будете використовувати для написання своїх власних статей, використовуючи React та GraphQL.
Технічний стек та фічі
- Гетсбі
- Реагувати
- GraphQL
- Плагіни та теми
- MDX/Markdown
- Завантажувальний CSS
- Шаблони
Якщо ви коли-небудь хотіли завести блог, як зробити його, використовуючи React і GraphQL.
Я не говорю, що WordPress є поганим вибором, але з Gatsby ви можете створювати високопродуктивні сайти, використовуючи React — що є дивовижною комбінацією.
Блог з Gridsome
Gridsome для Vue… Гаразд, у нас вже це з Next/Nuxt.
Але те саме вірно для Gridsome і Gatsby. Обидва використовують GraphQL як шар даних, але Gridsome використовує VueJS. Це також чудовий генератор статичних сайтів, який допоможе вам створювати чудові блоги:
Що ви дізнаєтеся
Цей проект навчить вас, як створити простий блог, щоб почати роботу з Gridsome, GraphQL та Markdown. У ньому також розповідається, як розгорнути програму через Netlify.
Технічний стек та фічі
- Гридсом
- Vue
- GraphQL
- Markdown
- netlify
Це, звичайно, не найповніший туторіал, але він охоплює основні поняття Gridsome і .
Аудіо плеєр, схожий на SoundCloud, за допомогою Quasar
Quasar – це ще один фреймворк Vue, який можна використовувати для створення мобільних програм. У цьому проекті ви створите програму аудіо-плеєра, наприклад:
Що ви дізнаєтеся
У той час як інші проекти зосереджені в основному на веб-додатках, цей покаже вам, як створити мобільний додаток з використанням Vue та фреймворку Quasar.
У вас вже має бути працююча Cordova з налаштованою Android Studio/Xcode. Якщо ні, то в посібнику є посилання на веб-сайт Quasar, де вони показують, як все налаштувати.
Технічний стек та фічі
- Quasar
- Vue
- Кордова
- WaveSurfer
- UI Компоненти
, демонструючий можливості Quasar для створення мобільних додатків.
Форма кредитної картки
Кльова форма кредитної картки з гладкими та приємними мікровзаємодіями. Включає форматування чисел, перевірку та автоматичне визначення типу картки. Вона побудована на Vue.js і повністю адаптивна. (Подивитися можна .)
Чому навчитеся:
- Обробляти та валідувати форми
- Обробляти події (наприклад, при зміні полів)
- Розберетеся як відображати та розміщувати елементи на сторінці, особливо дані кредитної картки, яка поверх форми
Гістограма
Гістограма - це діаграма або графік, який представляє категорійні дані з прямокутними стовпцями з висотами або довжинами, пропорційними значенням, які вони представляють.
Вони можуть бути нанесені вертикально чи горизонтально. Вертикальна гістограма іноді називається лінійною діаграмою.
Чому навчитеся:
- Відображати дані у структурованому та зрозумілому вигляді
- Додатково: Дізнаєтесь, як використовувати елемент
canvasта як малювати елементи з ним
Ви можете знайти дані про населення світу. Вони відсортовані за роками.
Анімація серця Twitter
Ще у 2016 році Twitter представив цю дивовижну анімацію для своїх твітів. Станом на 2019 рік воно все ще виглядає гідно, то чому б не створити його самостійно?
Чому навчитеся:
- Працювати з CSS-атрибутом
keyframes - Маніпулювати та анімувати елементи HTML
- Об'єднувати JavaScript, HTML та CSS
Репозиторії GitHub із функцією пошуку
Тут немає нічого незвичайного – репозиторії GitHub – це просто уславлений список.
Завдання полягає в тому, щоб відобразити репозиторії та дозволити користувачеві фільтрувати їх. Використовуйте для отримання репозиторіїв кожного користувача.
GitHub profile page
Чому навчитеся:
- Отримувати дані з API
- Відображати дані з API
- Фільтрувати та показувати релевантні дані для кожного пошуку
- Додатково: Якщо ви готові прийняти дзвінок, використовуйте , Створений з використанням GraphQL. .
Чати у стилі Reddit
Чати є популярним способом спілкування завдяки простоті та зручності використання. Але що насправді живить сучасні чати? WebSockets!
Чому навчитеся:
- Використовувати WebSockets, застосовувати комунікацію в режимі реального часу та оновлення даних
- Працювати з рівнями доступу користувачів (наприклад, власник каналу чату має роль
admin, а інші в кімнаті -user) - Обробляти та валідувати форми – пам'ятайте, вікно чату для відправки повідомлення є
input - Створювати та вступати в різні чати
- Працювати із особистими повідомленнями. Користувачі можуть спілкуватися з іншими користувачами приватно. По суті, ви будете встановлювати з'єднання WebSocket між двома користувачами.
Навігація у стилі Stripe
Унікальність цієї навігації полягає в тому, що контейнер Popover трансформується під вміст. У цьому переході є елегантність у порівнянні з традиційною поведінкою відкриття та закриття нового поповера.
Чому навчитеся:
- Поєднувати CSS-анімацію з переходами
- Затіняти контент і застосовувати активний клас для елемента, що переміщається
Pacman
Створіть свою версію Pacman. Це чудовий спосіб отримати уявлення про те, як розробляються ігри, зрозуміти основи. Використовуйте JavaScript-фреймворк, React або Vue.
Ви дізнаєтеся:
- Як пересуваються елементи
- Як визначити, які клавіші натискати
- Як визначити момент зіткнення
- Ви можете не зупинятися на досягнутому та додати керування рухом привидів
Приклад цього проекту ви знайдете GitHub
Керування користувачами
Проект GitHub
Створення програми типу CRUD для адміністрування користувачів навчить вас основ розробки. Це особливо корисно розробникам-початківцям.
Ви дізнаєтеся:
- Що таке маршрутизація
- Як поводитися з формами для введення даних та перевіряти що ввів користувач
- Як працювати з базою даних – створювати, читати, оновлювати та видаляти дії
Перевірка погоди у вашому місці
Проект GitHub
Якщо ви хочете створювати програми, почніть із програми визначення погоди. Цей проект можна виконати за допомогою Swift.
Крім отримання досвіду зі створення програми, ви дізнаєтесь:
- Як працювати з API
- Як використовувати геолокацію
- Зробіть програму більш динамічною, додавши текстове введення. У ньому користувачі зможуть ввести місце розташування, щоб перевірити погоду в певному місці.
Вам знадобиться API. Щоб отримати інформацію про погоду, використовуйте API OpenWeather. Більше інформації про API OpenWeather.
Вікно чату
Моє вікно чату в дії, відкрите у двох вкладках браузера
Створення вікна чату - це ідеальний спосіб почати роботу з сокетами. Вибір технічного стека величезний. Відмінно підійде Node.js, наприклад.
Ви дізнаєтесь, як працюють сокети та як їх реалізувати. Це головна перевага цього проекту.
Якщо ви розробник Laravel, який хоче працювати із сокетами, прочитайте мою
GitLab CI
Якщо ви новачок у безперервній інтеграції (CI), пограйтеся з GitLab CI. Налаштуйте кілька середовищ і спробуйте запустити кілька тестів. Це не дуже складний проект, але я впевнений, що ви багато чого навчитеся завдяки йому. Багато команд розробників зараз використовують CI. Вміти ним користуватися корисно.
Ви дізнаєтеся:
- Що таке GitLab CI
- Як конфігурувати
.gitlab-ci.yml, який говорить користувачу GitLab, що робити - Як деплоїти в інших середовищах
Аналізатор сайтів
Зробіть скрапер, який аналізує семантику веб-сайтів та створює їхній рейтинг. Наприклад, ви можете перевірити наявність відсутніх alt-тегів на зображеннях. Або перевірити чи є на сторінці мета теги SEO. Скрапер можна створити і без інтерфейсу користувача.
Ви дізнаєтеся:
- Як працює скрапер
- Як створювати DOM селектори
- Як писати алгоритм
- Якщо не хочете зупинятися на досягнутому, створіть інтерфейс користувача. Можна також скласти звіт про кожен перевірений веб-сайт.
Визначення настроїв у соціальних мережах
Визначення настроїв у соціальних мережах – це чудовий спосіб познайомитися з машинним навчанням.
Ви можете почати з аналізу лише однієї соціальної мережі. Зазвичай усі починають із Twitter.
Якщо ви вже маєте досвід роботи з машинним навчанням, спробуйте зібрати дані різних соціальних мереж і об'єднати їх.
Ви дізнаєтеся:
- Що являє собою машинне навчання
Клон Trello
Що ви освоїте:
- Організація маршрутів обробки запитів (Routing).
- Перетягнути і кинути.
- Як створювати нові об'єкти (дошки, списки, картки).
- Обробка та перевірка вхідних даних.
- З боку клієнта: як використовувати локальне сховище, як зберігати дані у локальному сховищі, як читати дані з локального сховища.
- З боку сервера: як використовувати базу даних, як зберігати дані в базі, як читати дані з бази.
на React+Redux.
Панель адміну
Просте CRUD додаток, ідеально підходить для вивчення основ. Навчимося:
- Створити користувачів, керувати користувачами.
- Взаємодіяти з базою даних – створювати, читати, редагувати, видаляти користувачів.
- Перевірка введення та робота з формами.
Трекер криптовалют (нативний мобільний додаток)
На чому завгодно: Swift, Objective-C, React Native, Java, Kotlin.
Вивчимо:
- Як працюють нативні програми.
- Як отримувати дані з API.
- Як працюють нативні макети сторінок.
- Як працювати з мобільними симуляторами
. Знайдете краще – напишіть у коментах.
Якщо цікаво, ось .
Налаштувати власний конфіг webpack з нуля
Технічно, це не додаток, але дуже корисне завдання зрозуміти як працює webpack зсередини. Тепер це буде не «чорна скринька», а зрозумілий інструмент.
вимоги:
- Компілювати es7 на es5 (основи).
- Компілювати jsx в js - або - .vue в .js (прийдеться вивчити завантажувачі)
- Налаштувати webpack dev server та hot module reloading. (vue-cli and create-react-app use both)
- Використовувати Heroku, now.sh чи Github, навчитися розгортати webpack проекти.
- Налаштувати свій улюблений препроцесор, щоб компілювати css - scss, less, stylus.
- Вивчити використання зображення і svgs з webpack.
Клон Hackernews
Кожен джедай має зробити свій власний Hackernews.
Що ви освоїте дорогою:
- Як взаємодіяти з hackernews API.
- Як створити односторінкову програму.
- Як реалізувати такі фічі як перегляд коментарів, окремих коментарів, профілів.
- Організація маршрутів обробки запитів (Routing).
Тудушечка
Серйозно? Тудушка? Їхні ж тисячі. Але повірте, чи є причина такої популярності.
Туду-додаток - це чудовий спосіб переконатися, що розумієш основи. Спробуйте написати один додаток на ванільному Javascript і один на своєму улюбленому фреймворку.
Навчіться:
- Створювати нові завдання.
- Перевіряти наповнення полів.
- Фільтрувати завдання (завершена, активна, все). Використовуйте
filterиreduce. - Розуміти основи Javascript.
Сортований drag and drop список
Дуже корисно, щоб зрозуміти .
Навчимося:
- Drag and drop API
- Створювати rich UIs
Клон месенджера (нативний додаток)
Ви будете розуміти як працюють і веб-додатки і нативні програми, що виділить вас з сірої маси.
Що вивчимо:
- Web sockets (миттєві повідомлення)
- Як працюють нативні програми.
- Як працюють шаблони у нативних програмах.
- Організація маршрутів обробки запитів у нативних програмах.
Текстовий редактор
Мета текстового редактора — зменшити зусилля користувачів, які намагаються перетворити їхнє форматування як валідну розмітку HTML. Хороший текстовий редактор дозволяє користувачам форматувати текст по-різному.
Якоїсь миті кожен використовував текстовий редактор. Так чому б не ?
Клон Reddit
— це агрегація соціальних новин, рейтинг веб-контенту та сайт для обговорень.
Reddit займає більшу частину мого часу, але я продовжую зависати на ньому. Створення клону Reddit це ефективний спосіб вивчення програмування (при одночасному перегляді Reddit).
Reddit надає вам дуже багатий. Не втрачайте будь-які функції і не робіть абияк. У реальному світі з клієнтами і покупцями, ви не зможете працювати абияк, або ви швидко втратите роботу.
Розумні клієнти одразу здогадаються, що робота виконується погано, і знайдуть когось іншого.
Публікація пакета NPM з відкритим кодом
Якщо ви пишете код на Javascript, швидше за все, ви використовуєте менеджер пакетів. Менеджер пакетів дозволяє повторно використовувати існуючий код, який написали та опублікували інші люди.
Розуміння повного циклу розробки пакету дасть дуже добрий досвід. Є багато речей, які вам потрібно знати під час публікації коду. Вам потрібно подумати про безпеку, семантичне управління версіями, масштабованість, угоди про імена та обслуговування.
Пакет може бути будь-яким. Якщо у вас немає ідеї, створіть свій власний Lodash та опублікуйте його.
Лодаш:
Наявність чогось, що ви зробили в Інтернеті, ставить вас на 10% вище за інших. про відкриті джерела та пакети.
Навчальний план freeCodeCamp
freeCodecamp зібрав дуже .
freeCodeCamp – це некомерційна організація. Вона складається з інтерактивної навчальної веб-платформи, онлайн-форуму спільноти, чатів, публікацій Medium та місцевих організацій, які мають намір зробити доступним для всіх вивчення веб-розробки.
Ви будете більш, ніж кваліфіковані для своєї першої роботи, якщо вам вдасться завершити весь курс.
Створіть HTTP-сервер з нуля
Протокол HTTP одна із основних протоколів, якими контент потрапляє до Інтернету. HTTP-сервери використовуються для обслуговування статичного контенту, такого як HTML, CSS та JS.
Можливість реалізувати протокол HTTP з нуля розширить ваші знання про те, як усе взаємодіє.
Наприклад, якщо ви використовуєте NodeJs, ви знаєте що Express надає HTTP-сервер.
Для довідки, подивіться, чи зможете ви:
- Налаштувати сервер без використання будь-яких бібліотек
- Сервер повинен обслуговувати вміст HTML, CSS та JS.
- Використання маршрутизатора з нуля
- Слідкувати за змінами та оновлювати сервер
Якщо ви не знаєте з чого, скористайтесь та спробуйте створити HTTP-сервер з нуля.
Десктопний додаток для нотаток
Ми всі робимо нотатки, чи не так?
Давайте створимо програму для нотаток. Додаток повинен зберігати нотатки та синхронізувати їх з базою даних. Створіть нативну програму за допомогою Electron, Swift або чогось ще, що вам подобається, і що підходить для вашої системи.
Не соромтеся поєднувати це з першим челендж (текстовий редактор).
Як бонус спробуйте синхронізувати десктопну версію з веб-версією.
Подкасти (клон Overcast)
Хто не слухає подкасти?
Створіть веб-додаток з такими функціями:
- Завести обліковий запис
- Пошук подкастів
- Оцінювати та підписуватись на подкасти
- Зупинка та відтворення, зміна швидкості, функції вперед та назад на 30 секунд.
Як відправна точка спробуйте використовувати iTunes API. Якщо ви знаєте інші ресурси, напишіть у коментарях.
Захоплення екрану
Вітання! Я знімаю свій екран зараз!
Створіть десктопну або веб-додаток, яка дозволить вам захопити ваш екран та зберегти кліп як .gif
Ось , як досягти цього.
Джерела
Джерело: habr.com