У разработчиков, как и у писателей, бывает ступор, когда хочешь что-то написать, но не знаешь что.

Мы с моим другом Джимом собрали коллекцию идей для приложений, чтобы решить эту проблему. ?

Для чего это нужно:

  • Улучшить навыки программирования.
  • Опробовать новые технологии.
  • Наполнить портфолио.
  • Использовать как примеры, создавая собственные уроки.
  • Их легко выполнить, а также можно добавлять новые фичи.

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

В описании каждого проекта вы найдёте:

  1. Постановку задачи.
  2. Описание возможностей, которые должны быть реализованы (это скорее подсказка, чем жёсткое условие. Вы можете добавлять собственные функции, если хотите).
  3. Список дополнительных фич, реализация которых поможет прокачать ваш проект и мозги.
  4. Ссылки на ресурсы, которые помогут вам выполнить проект.

Проекты

Все проекты разделены на три уровня сложности:

  1. Начальный — для новичков, которые как правило сосредоточены на разработке пользовательских приложений.
  2. Средний — более опытные разработчики, которые уже знакомы с UI/UX, умеют пользоваться инструментами разработки и внедрять API сервисы в свои приложения.
  3. Продвинутый — те, кто прошёл две предыдущие стадии и хочет улучшить навыки изучив новые техники, например внедрение бэкенд приложений и баз данных.

Далее представлены по 5 проектов для каждого уровня (всего 15). На данный момент мы собрали более 30 проектов, их можно найти на GitHub. В дальнейшем мы планируем пополнить этот список.

1. Записная книжка

Уровень: 1 — Начальный

Описание: создаёт и хранит напоминания

Возможности

  • Создать запись.
  • Редактировать запись.
  • Удалить запись.
  • При закрытии окна, записи сохраняются. Открыв приложение, сохранённые записи восстанавливаются.

Дополнительные фичи

  • Пользователь может создавать и редактировать записи в формате Markdown. При сохранении данные конвертируются в HTML.
  • Пользователь может посмотреть дату создания записи.

Ссылки и ресурсы

Пример проекта

2. Гирлянда

Уровень: 1 — Начальный

Описание: вам необходимо создать мигающую гирлянду. Задача — нарисовать ряд из семи разноцветных кружков (огоньков), интенсивность каждого огонька будет меняться в зависимости от таймера. Когда текущий огонёк становится ярче, предыдущий тускнеет, возвращаясь к исходной интенсивности.

Проще говоря, симуляция новогодней гирлянды.

Возможности

  • Кнопка для запуска/остановки мигания.
  • Можно менять интервал мигания.

Дополнительные фичи

  • Выбор цвета каждого огонька.
  • Выбор уровня яркости.
  • Изменение размера любого огонька.
  • Выбор количества рядов (от 1 до 7).

Ссылки и ресурсы

Пример проекта

3. Вращение изображений

Уровень: 1 — Начальный

Описание: для веб-разработчика важно понимать основы работы с изображениями, потому что UI/UX современных приложений во многом на них опирается.

В приложении вы реализуете возможность вращения изображения. На экране отображается 4 копии одного изображения, представленного в матрице 2 на 2. Используя стрелки вверх, вниз, влево и вправо рядом с каждым изображением, пользователь может повернуть их вертикально или горизонтально.

Допускается использовать только чистый HTML, CSS, и Javascript. Сторонние библиотеки не допускаются.

Возможности

  • Отображение 4 копий одного изображения в матрицы 2 на 2.
  • Рядом с каждой копией есть стрелочки вверх, вниз, влево и вправо, с помощью которых пользователь может вращать каждое изображение.

Дополнительные фичи

  • Пользователь может изменить изображение по умолчанию, введя URL другого изображения в поле ввода.
  • Отобразить новое изображение можно, нажав кнопку «Показать» рядом с полем ввода.
  • Если изображение не найдено, пользователь увидит сообщение об ошибке.

Ссылки и ресурсы

Пример проекта

4. Тестирование

Уровень: 1 — Начальный

Описание: тест, в котором можно проверить свои знания, отвечая на вопросы.

Создайте приложение для других разработчиков, в котором они смогут проверить свои знания HTML, CSS, JavaScript, Python, PHP и т.д.

Возможности

  • Есть кнопка для начала тестирования.
  • Для каждого вопроса предусмотрено 4 варианта ответа.
  • После выбора ответа отображается следующий вопрос. Так до конца теста.
  • В конце теста отображается статистика:
  1. Время, за которое был выполнен тест.
  2. Количество правильных ответов.
  3. Сообщение с результатом теста (пройден/не пройден).

Дополнительные фичи

  • Пользователь может поделиться результатом тестирования в соц. сетях.
  • Добавить больше тестов с возможностью выбора одного из них.
  • Создать аккаунт для хранения результатов тестирования. Пользователь может пройти тест множество раз.

Ссылки и ресурсы

Open Trivia Database

Пример проекта

5. Конвертация римских чисел в десятичные

Уровень: 1 — Начальный

Описание: каждый римский символ имеет своё фиксированное целое значение, которое можно преобразовать в десятичный формат. В наши дни используют семь символов:

  • I — 1
  • V — 5
  • X — 10
  • L — 50
  • C — 100
  • D — 500
  • M — 1000

Возможности

  • Ввод римского символа в поле ввода.
  • После нажатия кнопки выводится эквивалент введённого числа в десятичном формате.
  • Если введён недопустимый символ, пользователь увидит сообщение об ошибке.

Дополнительные фичи

  • Автоматический вывод ответа без нажатия кнопки (сразу после ввода символа).
  • Возможность обратной конвертации (десятичные в римские).

Ссылки и ресурсы

Не пропустите 5 приложений среднего уровня сложности во второй части.

Перевод статьи Florin PopHere are some app ideas you can build to level up your coding skills

Читайте так же Почему вам нужно учить больше языков программирования

Предыдущая статьяОбъяснение понятия «состояние» в JavaScript на примере приготовления простого блюда
Следующая статьяСоздание чат-приложения в режиме реального времени с Vue.js, Socket.IO и Node.js