8 навчальних проектів

«Майстер робить більше помилок, ніж новачок — спроб»

Пропонуємо 8 варіантів проектів, які можна зробити по фану, щоб отримати реальний досвід розробки.

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

Клон Trello від Indrek Lasn.

Що ви освоїте:

• Організація маршрутів обробки запитів (Routing).
• Перетягнути і кинути.
• Як створювати нові об'єкти (дошки, списки, картки).
• Обробка та перевірка вхідних даних.
• З боку клієнта: як використовувати локальне сховище, як зберігати дані у локальному сховищі, як читати дані з локального сховища.
• З боку сервера: як використовувати базу даних, як зберігати дані в базі, як читати дані з бази.

Тут приклад репозиторіюна 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 (прийдеться вивчити завантажувачі)
• Налаштувати 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.

Тут чудовий ресурс для повних новачків.

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

Кожен джедай має зробити свій власний Hackernews.

Що ви освоїте дорогою:

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

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

TodoMVC.

Серйозно? Тудушка? Їхні ж тисячі. Але повірте, чи є причина такої популярності.
Туду-додаток - це чудовий спосіб переконатися, що розумієш основи. Спробуйте написати один додаток на ванільному Javascript і один на своєму улюбленому фреймворку.

Навчіться:

• Створювати нові завдання.
• Перевіряти наповнення полів.
• Фільтрувати завдання (завершена, активна, все). Використовуйте filter и reduce.
• Розуміти основи Javascript.

Проект 7. Сортований drag and drop список

Сховище Github.

Дуже корисно, щоб зрозуміти drag and drop api.

Навчимося:

• Drag and drop API
• Створювати rich UIs

Проект 8. Клон месенджера (нативний додаток)

Ви будете розуміти як працюють і веб-додатки і нативні програми, що виділить вас з сірої маси.

Що вивчимо:

• Web sockets (миттєві повідомлення)
• Як працюють нативні програми.
• Як працюють шаблони у нативних програмах.
• Організація маршрутів обробки запитів у нативних програмах.

Цього вам вистачить на місяць-другий.

Переклад виконано за підтримки компанії EDISON Software, яка професійно займається розробкою додатків та сайтів на PHP для великих замовників, а також розробкою хмарних сервісів та мобільних додатків на Java.

Джерело: habr.com