Нельзя натренировать мускулы, просто читая о тренировках. Вам нужно ходить в спортивный зал и часами заниматься там. Также и отличным разработчиком можно стать только с практикой. Представляем вашему вниманию восемь отличных проектов, чтобы прокачать свои программистские мускулы.
Цель — создать каждое приложение при помощи любого стека технологий, который вы предпочитаете.
Проект 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 — клон мессенджера (нативное приложение)
Чему вы научитесь:
- Веб-сокеты (мгновенные сообщения).
- Принцип работы нативных приложений.
- Принцип работы нативной разметки.
- Роутинг в нативных приложениях