Что вы узнаете, создав клон Trello:

  • Маршрутизация.
  • Перетащите и отпустите.
  • Создание новых объектов (доски, списки, карточки).
  • Обработка входных данных и проверка.
  • Путь на стороне клиента: как использовать локальное хранилище, сохранять данные в локальное хранилище и читать данные из локального хранилища.
  • Серверный путь: как использовать базы данных, сохранять данные в базе данных и читать данные из базы данных.

Вот пример репозитория, созданного с помощью React и Redux.



indreklasn / simple-trello
📋. Участвуйте в разработке indreklasn / simple-trello, создав учетную запись на GitHub. github.com



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

Простое приложение CRUD, отлично подходящее для фундаментальных знаний. Что вы узнаете:

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

Проект 3. Криптовалютный трекер (собственное мобильное приложение)

Имеет быть родным приложением - разрешены Swift, Objective-C, React Native, Java и Kotlin.

Что вы узнаете:

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

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

Если вам интересно, как это было построено, я написал для него учебник.

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

Что ж, технически это не приложение, но все же очень полезно понять, как под капотом работает webpack. Это уже будет не черный ящик, а надежный инструмент под вашим поясом.

Требования :

  • Скомпилируйте es7 в es5 (основы).
  • Скомпилируйте .jsx в .js или .vue в .js (вы узнаете о загрузчиках).
  • Настройка сервера webpack dev и перезагрузка горячего модуля. (vue-cli и create-react-app используют оба.)
  • Сделайте готовую сборку и разверните ее с помощью страниц Heroku, now.sh или GitHub. (Вы узнаете, как развертывать проекты webpack.)
  • Настройте свой любимый препроцессор для компиляции в простой CSS - SCSS, Меньше, Стилус.
  • Узнайте, как использовать изображения и SVG в webpack.

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

Проект 5. Клон Hacker News

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

Вы узнаете следующее:

  • Взаимодействие с Hacker News API.
  • Создание одностраничных приложений.
  • Как реализовать такие функции, как просмотр комментариев, отдельных комментариев и профилей.
  • Маршрутизация.

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

Проект 6. Приложение "Список дел"

Действительно? Приложение с делами? Сколько их уже есть? Да, я знаю. Но выслушайте меня - они так популярны не просто так.

Приложение с делами - отличный способ убедиться, что вы изучите основы. Попробуйте создать его на простом ванильном JavaScript, а затем на своем любимом фреймворке / библиотеке.

Что вы узнаете

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

Проект 7. Сортируемый список перетаскивания

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

Что вы узнаете:

  • Перетащите API.
  • Создание богатого пользовательского интерфейса.

Проект 8. Клон Messenger (собственное приложение)

Понимание того, как работают нативные приложения и веб-приложения, выделит вас из толпы.

Что вы узнаете:

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

Заключение

P.S: Ищете еще идеи для программирования? Идеи для программирования никогда не иссякнут. Получите здесь доступ к множеству задач, которые я выполняю.

Они должны занять вас на месяц или два, выбрать что-нибудь и просто построить! Если для начала вам нужна небольшая мотивация, вот руководство Как сохранить мотивацию в качестве разработчика.



Прогнозы тенденций в программировании на 2020 год
Прогнозирование того, какие технологии программирования появятся в 2020 году medium.com



Да, и если вы хотите быть в курсе - мой информационный бюллетень - отличный ресурс для этого.

Спасибо за прочтение! ❤