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

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

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

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

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

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

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

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

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

Github Repository.

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

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

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

Github repository.

На какъвто и да е език: Swift, Objective-C, React Native, Java, Kotlin.

Ще изучим:

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

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

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

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

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

Изисквания:

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

Тук има страхотен ресурс за напълно начинаещи.

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

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

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

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

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

TodoMVC.

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

Научете се:

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