🥇8 учебни проекта

«Майсторът прави повече грешки от новичка — опити»

Предлагаме 8 варианта проекта, които можете да направите "за забавление", за да получите реален опит в разработката.

Проект 1. Клонинг на Trello

Клонинг на Trello от Индрек Ласн.

Какво ще усвоите:

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

Тук е пример за репозитория, направен на React+Redux.

Проект 2. Административен панел

Github Repository.

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

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

Проект 3. Тракер за криптовалути (нативно мобилно приложение)

Github репозитория.

На каквато и да е технология: Swift, Objective-C, React Native, Java, Kotlin.

Ще изучим:

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

Опитайте това API. Намерете по-добро — пишете в коментарите.

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

Проект 4. Настройте собствен конфиг webpack от нулата

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

Изисквания:

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

Тук е страхотен ресурс за пълни новаци.

Проект 5. Клонинг на Hackernews

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

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

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

Проект 6. Тудушка

TodoMVC.

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

Научете се:

Да създавате нови задачи.
Да проверявате попълването на полета.
Да филтрирате задачи (завършена, активна, всички). Използвайте filter и reduce.
Да разбирате основите на Javascript.