Front-end dojo: проекти за обучение на умения за разработчици (5 нови + 43 стари)

1. Понятие клонинг

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

www.notion.so

Какво ще научите, като създадете клонинг на Notion:

• HTML API за плъзгане и пускане. Потребителят може да „грабне с мишката“ влачене елемент и го поставете вътре с възможност за изпускане зона.
• Как да синхронизирате данни в реално време между вашия компютър и смартфон.
• Ние позволяваме на потребителите да създават, четат, актуализират и изтриват записи, като по този начин тренират CRUD умения.

Статията е преведена с подкрепата на EDISON Software, която разработва приложения и уебсайтовеИ инвестира в стартиращи компании.

2. Repl.it клонинг

Repl.it е инструмент за съвместно редактиране на код в реално време. Можете да изберете няколко езика: JavaScript, Python, Go и да стартирате кода директно в браузъра. Много полезно за бързи демонстрации и интервюта с код.

repl.it

Какво ще научите, като създадете клонинг на Repl.it:

• Как да стартирате и изпълните код (от страната на сървъра) в браузъра (от страната на клиента).
• Прочетете входните данни (изходния код) и покажете резултата от изпълнението.
• Как да създавате файлове и папки в мрежата и да запазвате резултатите.
• Как да подчертаете синтаксиса на кода.

3. Google Photos Clone

Google Photos е услуга за съхранение и споделяне на снимки.
Всяко модерно приложение за снимки може да изпълнява основни функции: качване, изрязване и т.н. Хората искат да създават свои собствени аватари и да споделят снимки на котки, така че трябва да можете да работите с изображения.

www.google.com/photos/about

Какво ще научите, като създадете клонинг на Google Photos:

• Как да създадете отзивчиви изображения на телефони, таблети, лаптопи и дори гигантски телевизионни екрани.
• Как да обработвате качвания на изображения, особено големи изображения (>1MB) и групови качвания.
• Обработвайте файлове с изображения, изрязвайте и преоразмерявайте снимки за миниатюри или при отваряне на галерия.
• Бонус: как да съхранявате изображения в облака или локална база данни.

4. Gifsky клонинг

Гифски преобразува видео в GIF с помощта на функцииpngquant за ефективни палитри с кръстосани рамки и временно изглаждане. Резултатът е GIF с хиляди цветя на кадър.

gif.ski

Какво ще научите, като създадете Gifski клонинг:

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

Забележка: Gifsky е проект с отворен код и е в GitHub!

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

React Native инструмент за проследяване на криптовалута

Какво ще научите, като създадете инструмент за проследяване на валутните курсове:

• Как да работите с API и да получавате данни дистанционно от API.
• Как да показвате данни като списък.
• Бонус: Ако те интересува, наскоро писах урок за създаване на инструмент за проследяване на цените за криптовалута с React Native.

Забележка: тук е Примерно хранилище на GitHub.

Селекция от проекти от предишни публикации.

слой

www.reddit.com/r/layer

Layer е общност, в която всеки може да нарисува пиксел върху споделена „дъска“. Първоначалната идея се ражда в Reddit. Общността r/Layer е метафора за споделеното творчество, че всеки може да бъде творец и да допринесе за обща кауза.

Какво ще научите, когато създавате свой собствен Layer проект:

• Как работи JavaScript canvas Да знаете как да работите с canvas е критично умение в много приложения.
• Как да координирате потребителските разрешения. Всеки потребител може да рисува по един пиксел на всеки 15 минути, без да се налага да влиза.
• Създаване на бисквитки сесии.

Squoosh

squoosh.app

Squoosh е приложение за компресиране на изображения с много разширени опции.

GIF 20 MB

Създавайки своя собствена версия на Squoosh, ще научите:

• Как се работи с размерите на изображенията
• Научете основите на API Drag'n'Drop
• Разберете как работят API и слушателите на събития
• Как да качвате и експортирате файлове

Забележка: Компресорът за изображения е локален. Не е необходимо да изпращате допълнителни данни към сървъра. Можете да имате компресора у дома или да го използвате на сървър по ваш избор.

калкулатор

Хайде? Сериозно? Калкулатор? Да, точно, калкулатор. Разбирането на основите на математическите операции и как те работят заедно е критично умение за опростяване на вашите приложения. Рано или късно ще трябва да се справите с числата и колкото по-рано, толкова по-добре.

jarodburchill.github.io/CalculatorReactApp

Създавайки свой собствен калкулатор, ще научите:

• Работа с числа и математически операции
• Практикувайте с API за слушатели на събития
• Как да подредите елементи, да разберете стиловете

Обхождане (търсачка)

Всеки е използвал търсачка, така че защо да не създадете своя собствена? За търсене на информация са необходими роботи. Всеки ги използва всеки ден и търсенето на тази технология и специалисти само ще нараства с времето.

Google търсачка

Какво ще научите, като създадете своя собствена търсачка:

• Как работят роботите
• Как да индексирате сайтове и как да ги класирате по рейтинг и репутация
• Как да съхраняваме индексирани сайтове в база данни и как да работим с базата данни

Музикален плейър (Spotify, Apple Music)

Всеки слуша музика - тя просто е неразделна част от живота ни. Нека създадем музикален плейър, за да разберем по-добре как работи основната механика на съвременната платформа за стрийминг на музика.

Spotify

Какво ще научите, като създадете своя собствена платформа за стрийминг на музика:

• Как се работи с API. използвайте API от Spotify или Apple Music
• Как да пуснете, поставите на пауза или превъртите назад към следващата/предишната песен
• Как да промените силата на звука
• Как да управлявате потребителското маршрутизиране и историята на браузъра

Приложение за търсене на филми с React (с куки)

Първото нещо, с което можете да започнете, е да създадете приложение за търсене на филми с React. По-долу е изображение на това как ще изглежда окончателното приложение:

Какво ще научите
Чрез изграждането на това приложение ще подобрите уменията си за React с помощта на сравнително новия API на Hooks. Примерният проект използва React компоненти, много кукички, външен API и разбира се малко CSS стил.

Технически стек и функции

• Реагирайте с куки
• създадете реагира приложенията
• jsx
• CSS

Без да използвате никакви класове, тези проекти ви дават перфектната входна точка във функционалния React и определено ще ви помогнат през 2020 г. можете да намерите примерен проект тук. Следвайте инструкциите или го направете свой собствен.

Приложение за чат с Vue

Друг страхотен проект за вас е да създадете приложение за чат, използвайки моята любима JavaScript библиотека: VueJS. Приложението ще изглежда по следния начин:

Какво ще научите
В този урок ще научите как да създадете приложение Vue от нулата – да създавате компоненти, да обработвате състояния, да създавате маршрути, да се свързвате с услуги на трети страни и дори да управлявате удостоверяване.

Технически стек и функции

• Vue
• vuex
• Vue рутер
• CLI изглед
• Pusher
• CSS

Това е наистина страхотен проект, за да започнете с Vue или да подобрите съществуващите си умения, за да започнете разработка през 2020 г. можете да намерите урок тук.

Красиво приложение за времето с Angular 8

Този пример ще ви помогне да създадете красиво приложение за времето с помощта на Angular 8:

Какво ще научите
Този проект ще ви научи на ценни умения в изграждането на приложения от нулата - от дизайна до разработката, чак до готово за внедряване приложение.

Технически стек и функции

• Ъглова 8
• Firebase
• Изобразяване от страната на сървъра
• CSS с Grid и Flexbox
• Удобство за мобилни устройства и адаптивност
• Тъмен режим
• Красив интерфейс

Това, което наистина харесвам в този цялостен проект е, че не изучавате нещата изолирано. Вместо това научавате целия процес на разработка от дизайна до окончателното внедряване.

Приложение за задачи със Svelte

Svelte е като новото дете в компонентния подход - поне подобен на React, Vue и Angular. И това е един от най-горещите нови продукти за 2020 г.

Приложенията за задачи не са непременно най-горещата тема, но те наистина ще ви помогнат да усъвършенствате уменията си в Selte. Ще изглежда така:

Какво ще научите
Този урок ще ви покаже как да създадете приложение с помощта на Svelte 3, от началото до края. Ще използвате компоненти, стилове и манипулатори на събития

Технически стек и функции

• Изящен 3
• Елементи
• Оформяне с CSS
• Синтаксис ES6

Няма много добри стартови проекти на 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 междинен софтуер

Това е наистина страхотен проект., който включва много от страхотните функции на Nuxt.js. Аз лично обичам да работя с Nuxt, така че трябва да го опитате, тъй като това също ще ви направи страхотен разработчик на Vue.

Блог с Гетсби

Gatsby е страхотен генератор на статичен сайт, използващ React и GraphQL. Това е резултатът от проекта:

Какво ще научите

В този урок ще научите как да използвате Gatsby, за да създадете блог, който ще използвате, за да пишете свои собствени статии с помощта на React и GraphQL.

Технически стек и функции

• Гетсби
• Реагират
• GraphQL
• Плъгини и теми
• MDX/Markdown
• Bootstrap CSS
• Templates

Ако някога сте искали да започнете блог, това е чудесен пример как да го направите с помощта на React и GraphQL.

Не казвам, че WordPress е лош избор, но с Gatsby можете да създавате високопроизводителни уебсайтове с помощта на React - което е невероятна комбинация.

Блог с Gridsome

Страшно за Vue… Добре, вече имахме това с Next/Nuxt.
Но същото важи и за Гридсъм и Гетсби. И двете използват GraphQL като техен слой данни, но Gridsome използва VueJS. Освен това е страхотен генератор на статичен сайт, който ви помага да създавате страхотни блогове:

Какво ще научите

Този проект ще ви научи как да създадете прост блог, за да започнете с Gridsome, GraphQL и Markdown. Той също така обяснява как да внедрите приложение чрез Netlify.

Технически стек и функции

• Страшно
• Vue
• GraphQL
• Markdown
• netlify

Това със сигурност не е най-пълният урок, но обхваща основните концепции на Gridsome and Markdown и може да бъде добра отправна точка.

Аудио плейър, подобен на SoundCloud, използващ Quasar

Quasar е друга рамка на Vue, която може да се използва за създаване на мобилни приложения. В този проект ще създадете приложение за аудио плейър, например:

Какво ще научите

Докато други проекти се фокусират предимно върху уеб приложения, този ще ви покаже как да създадете мобилно приложение с помощта на Vue и рамката Quasar.
Трябва вече да имате работеща Cordova с настройка на Android Studio/Xcode. Ако не, ръководството има връзка към уебсайта на Quasar, където ви показват как да настроите всичко.

Технически стек и функции

• квазер
• Vue
• Cordova
• вълнов сърфист
• Компоненти на потребителския интерфейс

малък проект, демонстрирайки възможностите на Quasar за изграждане на мобилни приложения.

Формуляр за кредитна карта

Страхотна форма на кредитна карта с плавни и приятни микровзаимодействия. Включва форматиране на номера, проверка и автоматично разпознаване на типа карта. Той е изграден на Vue.js и също е напълно отзивчив. (Можеш да видиш тук.)

формуляр за кредитна карта

Какво ще научите:

• Обработвайте и валидирайте формуляри
• Обработване на събития (например, когато полетата се променят)
• Разберете как да показвате и поставяте елементи на страницата, особено информацията за кредитната карта, която се появява в горната част на формуляра

стълбовидна диаграма

Хистограмата е диаграма или графика, която представя категорични данни с правоъгълни ленти с височини или дължини, пропорционални на стойностите, които представляват.

Те могат да се прилагат вертикално или хоризонтално. Вертикалната лентова диаграма понякога се нарича линейна диаграма.

Какво ще научите:

• Показвайте данните по структуриран и разбираем начин
• Допълнително: Научете как да използвате елемента canvas и как да рисувате елементи с него

Тук можете да намерите данни за световното население. Сортирани са по години.

Анимация на сърцето в Twitter

През 2016 г. Twitter представи тази невероятна анимация за своите туитове. Към 2019 г. той все още изглежда като част, така че защо не създадете такъв сами?

Какво ще научите:

• Работа с CSS атрибут keyframes
• Манипулирайте и анимирайте HTML елементи
• Комбинирайте JavaScript, HTML и CSS

Хранилища на GitHub с възможност за търсене

Тук няма нищо изискано – хранилищата на GitHub са просто прославен списък.
Целта е да се покажат хранилищата и да се позволи на потребителя да ги филтрира. Използвайте официален API на GitHub за да получите хранилища за всеки потребител.

Страница на профила в GitHub - github.com/indreklasn

Какво ще научите:

• Получавайте данни от API
• Показване на данни от API
• Филтрирайте и покажете подходящи данни за всяко търсене
• По избор: Ако сте готови за предизвикателство, използвайте API v4, създаден с помощта на GraphQL. Ако искате да научите GraphQL, отидете на една от предишните ми статии.

Чатове в стил Reddit

Чатовете са популярен начин за комуникация поради тяхната простота и лекота на използване. Но какво наистина подхранва съвременните чат стаи? WebSockets!

Какво ще научите:

• Използвайте WebSockets, комуникация в реално време и актуализации на данни
• Работа с потребителски нива на достъп (например собственикът на чат канал има ролята admin, и други в стаята - user)
• Обработвайте и потвърждавайте формуляри - не забравяйте, че прозорецът за чат за изпращане на съобщение е input
• Създавайте и се присъединявайте към различни чатове
• Работа с лични съобщения. Потребителите могат да разговарят частно с други потребители. По същество вие ще установите WebSocket връзка между двама потребители.

Навигация в стил на ивици

Това, което прави тази навигация уникална, е, че изскачащият контейнер се трансформира, за да пасне на съдържанието. Има елегантност в този преход в сравнение с традиционното поведение на отваряне и затваряне на нов изскачащ прозорец.

Какво ще научите:

• Комбинирайте CSS анимации с преходи
• Затъмнете съдържанието и приложете активен клас към плаващ елемент

Pacman

Създайте своя собствена версия на Pacman. Това е чудесен начин да добиете представа как се разработват игрите и да разберете основите. Използвайте JavaScript framework, React или Vue.

Ще се научиш:

• Как се движат елементите
• Как да определите кои клавиши да натиснете
• Как да определите момента на сблъсък
• Можете да отидете по-далеч и да добавите контроли за движение на призраци

Ще намерите пример за този проект в хранилището GitHub

Управление на потребители

Проект в хранилището GitHub

Създаването на приложение тип CRUD за потребителско администриране ще ви научи на основите на разработката. Това е особено полезно за нови разработчици.

Ще се научиш:

• Какво е маршрутизиране
• Как да работим с формуляри за въвеждане на данни и да проверяваме какво е въвел потребителят
• Как се работи с базата данни - действия за създаване, четене, актуализиране и изтриване

Проверка на времето във вашето местоположение

Проект в хранилището GitHub

Ако искате да създавате приложения, започнете с приложение за времето. Този проект може да бъде завършен с помощта на Swift.

В допълнение към придобиването на опит в създаването на приложение, вие ще научите:

• Как се работи с API
• Как да използваме геолокация
• Направете приложението си по-динамично, като добавите въвеждане на текст. В него потребителите ще могат да въведат местоположението си, за да проверят времето на определено място.

Ще ви трябва API. За да получите данни за времето, използвайте OpenWeather API. Повече информация за OpenWeather API тук.

Прозорец за чат

Моят прозорец за чат в действие, отворен в два раздела на браузъра

Създаването на прозорец за чат е идеалният начин да започнете със сокетите. Изборът на технологичен стек е огромен. Node.js, например, е перфектен.

Ще научите как работят сокетите и как да ги реализирате. Това е основното предимство на този проект.

Ако сте разработчик на Laravel, който иска да работи със сокети, прочетете моя Статия

GitLab CI

източник

Ако сте нов в непрекъснатата интеграция (CI), поиграйте си с GitLab CI. Настройте няколко среди и опитайте да изпълните няколко теста. Това не е много труден проект, но съм сигурен, че ще научите много от него. Много екипи за разработка вече използват CI. Полезно е да знаете как да го използвате.

Ще се научиш:

• Какво е GitLab CI
• Как да конфигурирате .gitlab-ci.ymlкойто казва на потребителя на GitLab какво да прави
• Как да внедрите в други среди

Анализатор на уебсайтове

Направете скрепер, който анализира семантиката на уебсайтовете и създава тяхната оценка. Например, можете да проверите за липсващи alt тагове в изображенията. Или проверете дали страницата има SEO мета тагове. Скрепер може да бъде създаден без потребителски интерфейс.

Ще се научиш:

• Как работи скреперът?
• Как да създадете DOM селектори
• Как се пише алгоритъм
• Ако не искате да спирате дотук, създайте потребителски интерфейс. Можете също така да създадете отчет за всеки уебсайт, който проверявате.

Откриване на настроения в социалните мрежи

източник

Откриването на настроения в социалните медии е чудесен начин да се запознаете с машинното обучение.

Можете да започнете, като анализирате само една социална мрежа. Всеки обикновено започва с Twitter.

Ако вече имате опит с машинното обучение, опитайте да съберете данни от различни социални мрежи и да ги комбинирате.

Ще се научиш:

• Какво е машинно обучение

Клонинг на Trello

Клонинг на Trello от Indrek Lasn.

Какво ще научите:

• Организация на маршрутите за обработка на заявки (Routing).
• Дръпни и пусни.
• Как да създадете нови обекти (дъски, списъци, карти).
• Обработка и проверка на входните данни.
• От страна на клиента: как да използвате локално хранилище, как да записвате данни в локално хранилище, как да четете данни от локално хранилище.
• От страна на сървъра: как да използвате бази данни, как да запазвате данни в базата данни, как да четете данни от базата данни.

Ето пример за хранилище, направени в React+Redux.

Административен панел

Github хранилище.

Просто приложение CRUD, идеално за изучаване на основите. Да научим:

• Създавайте потребители, управлявайте потребители.
• Взаимодействайте с базата данни - създавайте, четете, редактирайте, изтривайте потребители.
• Валидиране на въведените данни и работа с формуляри.

Проследяване на криптовалута (родно мобилно приложение)

Github хранилище.

Всичко: Swift, Objective-C, React Native, Java, Kotlin.

Нека учим:

• Как работят собствените приложения.
• Как да извлечете данни от API.
• Как работят собствените оформления на страници.
• Как се работи с мобилни симулатори.

Опитайте този API. Ако намерите нещо по-добро, пишете в коментарите.

Ако се интересувате, ето го ето урок.

Настройте своя собствена конфигурация на webpack от нулата

Технически това не е приложение, но е много полезна задача да разберете как работи webpack отвътре. Сега това няма да бъде „черна кутия“, а разбираем инструмент.

Изисквания:

• Компилирайте es7 до es5 (основи).
• Компилирайте jsx в js - или - .vue в .js (ще трябва да научите зареждащи програми)
• Настройте сървър за разработка на webpack и презареждане на горещ модул. (vue-cli и create-react-app използват и двете)
• Използвайте Heroku, now.sh или Github, научете как да внедрявате проекти за webpack.
• Настройте любимия си препроцесор за компилиране на css - scss, less, stylus.
• Научете как да използвате изображения и svgs с webpack.

Това е невероятен ресурс за напълно начинаещи.

Клонинг на Hackernews

От всеки джедай се изисква да създаде свой собствен Hackernews.

Какво ще научите по пътя:

• Как да взаимодействаме с API на hackernews.
• Как да създадете едностранично приложение.
• Как да внедрите функции като преглед на коментари, индивидуални коментари, профили.
• Организация на маршрутите за обработка на заявки (Routing).

Тудушечка

TodoMVC.

Сериозно? Тудушка? Те са хиляди. Но повярвайте ми, има причина за тази популярност.
Приложението Tudu е чудесен начин да сте сигурни, че разбирате основите. Опитайте да напишете едно приложение във ванилен Javascript и едно в любимата си рамка.

Уча:

• Създавайте нови задачи.
• Проверете дали полетата са попълнени.
• Филтриране на задачи (завършени, активни, всички). Използвайте filter и reduce.
• Разберете основите на Javascript.

Сортируем списък с плъзгане и пускане

Github хранилище.

Много полезно за разбиране API за плъзгане и пускане.

Да научим:

• API с плъзгане и пускане
• Създавайте богати потребителски интерфейси

Клонинг на Messenger (родно приложение)

Ще разберете как работят както уеб приложенията, така и нативните приложения, което ще ви отличи от сивата маса.

Какво ще изучаваме:

• Уеб сокети (незабавни съобщения)
• Как работят собствените приложения.
• Как работят шаблоните в собствените приложения.
• Организиране на маршрути за обработка на заявки в собствени приложения.

Текстов редактор

Целта на текстовия редактор е да намали усилията на потребителите, които се опитват да преобразуват своето форматиране във валидно HTML маркиране. Добрият текстов редактор позволява на потребителите да форматират текст по различни начини.

В някакъв момент всеки е използвал текстов редактор. Така че защо не създайте го сами?

Клонинг на Reddit

Reddit е сайт за събиране на социални новини, рейтинг на уеб съдържание и дискусионен сайт.

Reddit отнема по-голямата част от времето ми, но продължавам да се мотая в него. Създаването на клонинг на Reddit е ефективен начин да научите програмирането (като едновременно разглеждате Reddit).

Reddit ви предоставя много богат API. Не пропускайте никакви функции и не правете нещата случайно. В реалния свят с клиенти и клиенти не можете да работите хаотично или бързо ще загубите работата си.

Интелигентните клиенти веднага ще разберат, че работата се изпълнява лошо и ще намерят някой друг.

API на Reddit

Публикуване на NPM пакет с отворен код

Ако пишете Javascript код, има вероятност да използвате пакетен мениджър. Мениджърът на пакети ви позволява да използвате повторно съществуващ код, който други хора са написали и публикували.

Разбирането на пълния цикъл на разработка на пакет ще осигури много добро изживяване. Има много неща, които трябва да знаете, когато публикувате код. Трябва да помислите за сигурността, семантичното управление на версиите, скалируемостта, конвенциите за именуване и поддръжката.

Опаковката може да бъде всякаква. Ако нямате идея, създайте свой собствен Lodash и го публикувайте.

Лодаш: lodash.com

Притежаването на нещо, което сте направили онлайн, ви поставя с 10% над останалите. Ето някои полезни ресурси относно отворени кодове и пакети.

Учебна програма на freeCodeCamp

FCC учебна програма

freeCodecamp събра много цялостен курс по програмиране.

freeCodeCamp е организация с нестопанска цел. Състои се от интерактивна уеб-базирана платформа за обучение, онлайн форум на общността, чат стаи, публикации на Medium и местни организации, които възнамеряват да направят учебната уеб разработка достъпна за всички.

Ще бъдете повече от квалифицирани за първата си работа, ако успеете да завършите целия курс.

Създайте HTTP сървър от нулата

HTTP протоколът е един от основните протоколи, чрез които съдържанието пътува в Интернет. HTTP сървърите се използват за обслужване на статично съдържание като HTML, CSS и JS.

Възможността да внедрите HTTP протокола от нулата ще разшири познанията ви за това как нещата си взаимодействат.

Например, ако използвате NodeJs, тогава знаете, че Express предоставя HTTP сървър.

За справка вижте дали можете:

• Настройте сървър, без да използвате библиотеки
• Сървърът трябва да обслужва HTML, CSS и JS съдържание.
• Внедряване на рутер от нулата
• Следете промените и актуализирайте сървъра

Ако не знаете защо, използвайте Отиди lang и опитайте да създадете HTTP сървър Кутийка за чай от нулата.

Десктоп приложение за бележки

Всички си водим бележки, нали?

Нека създадем приложение за бележки. Приложението трябва да записва бележки и да ги синхронизира с базата данни. Създайте родно приложение, като използвате Electron, Swift или каквото искате и работи за вашата система.

Чувствайте се свободни да комбинирате това с първото предизвикателство (текстови редактор).

Като бонус опитайте да синхронизирате версията си за настолен компютър с уеб версията.

Подкасти (Overcast клонинг)

Кой не слуша подкасти?

Създайте уеб приложение със следната функционалност:

• Създай профил
• Търсете подкасти
• Оценявайте и се абонирайте за подкасти
• Спиране и възпроизвеждане, промяна на скоростта, функции за напред и назад за 30 секунди.

Опитайте да използвате iTunes API като отправна точка. Ако знаете за други ресурси, моля, публикувайте в коментарите.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

Заснемане на екрана

Здравейте! В момента снимам екрана си!

Създайте десктоп или уеб приложение, което ви позволява да заснемате екрана си и да запазвате клипа като .gif

тук е някои съветикак да постигнем това.

източници

• Още 5 смели проекта за обучение за разработчика (Layer, Squoosh, Calculator, Website Crawler, Music Player)
• 9 проекта, за да усъвършенствате вашите Front-End умения
• Шест задачи за Front-End разработчик
• Забавна практика за разработчик
• 8 образователни проекта
• Друг списък с проекти, върху които да практикувате

Източник: www.habr.com