Восемь проектов для развития навыков разработчика

Нельзя натренировать мускулы, просто читая о тренировках. Вам нужно ходить в спортивный зал и часами заниматься там. Также и отличным разработчиком можно стать только с практикой. Представляем вашему вниманию восемь отличных проектов, чтобы прокачать свои программистские мускулы.

Цель — создать каждое приложение при помощи любого стека технологий, который вы предпочитаете.

Проект 1 — клон Trello

Чему вы научитесь, создавая клон Trello:

• Роутинг.
• Drag and drop.
• Создание новых объектов (досок, списков, карт).
• Управление входными данными и их валидация.
• Сторона клиента: использование локального хранилища, сохранение данных в локальное хранилище, чтение данных из локального хранилища.
• Сторона сервера: использование баз данных, сохранение данных в базу, чтение данных из базы.

Вот репозиторий с примером, сделанным при помощи React и Redux.

Проект 2 — панель управления пользователями

Это простое базовое CRUD-приложение. Чему вы научитесь:

• Создание и управление пользователями.
• Взаимодействие с базой данных — создание, чтение, редактирование, удаление пользователей.
• Оценка входных данных и работа с формами.

Проект 3 — Трекер криптовалют (нативное приложение)

Для создания приложения можно использовать Swift, Objective-C, React Native, Java или Kotlin. Чему вы научитесь:

• Как работают нативные приложения.
• Получение данных из API.
• Как работает нативная разметка.
• Как работает мобильный симулятор.

Используйте этот API. Если вам интересно, как я это сделал, вы можете почитать туториал.

Проект 4 — установите собственную конфигурацию webpack с нуля

Это не совсем приложение, но очень полезно понять, как работает веб-пакет. Он перестанет быть для вас черным ящиком, а станет мощным инструментом.

Требования:

• Компиляция es7 в es5.
• Компиляция jsx в js или vue в js (вы узнаете о загрузчиках).
• Установка webpack dev server и перезагрузка hot module (используйте vue-cli и create-react-app).
• Создание готовой к продакшну сборки и её развертывание при помощи Heroku, now.sh или GitHub.
• Установка препроцессора, чтобы провести компиляцию в css — scss, less, stylus.
• Использование изображений и svg в webpack.

Вот отличный ресурс для начинающих.

Проект 5 — клон Hacker News

Каждый уже создал свою версию Hacker News, не будьте исключением. Что вы узнаете:

• Взаимодействие с API Hacker News.
• Создание одностраничных приложений.
• Применение функций просмотра комментариев и профилей.
• Роутинг.

Вот документация API Hacker News.

Проект 6 — приложение со списком дел

Серьезно? Еще один todo-менеджер? Да, это отличный способ изучить основы. Сначала попытайтесь сделать приложение при помощи только JavaScript, а потом — при помощи любимого фреймворка или библиотеки.

Чему вы научитесь:

• Создание новых задач.
• Валидация полей.
• Фильтрация задач (завершенные, активные, все). Используйте функции filter и reduce.
• Понимание основ JavaScript.

Проект 7 — сортируемый drag and drop список

Это полезно для понимания Drag and Drop API, который поможет вам создавать сложные приложения. Чему вы научитесь:

• Drag and Drop API.
• Создание интересных интерфейсов.

Проект 8 — клон мессенджера (нативное приложение)

Чему вы научитесь:

• Веб-сокеты (мгновенные сообщения).
• Принцип работы нативных приложений.
• Принцип работы нативной разметки.
• Роутинг в нативных приложениях