Список примеров идей веб-приложений

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

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

Он должен быть достаточно простым, но в то же время достаточно сложным, чтобы его стоило сделать.

«Я не хочу создавать еще одно приложение с делами», - слышу я, вы думаете.

Я написал этот пост, чтобы помочь себе, и надеюсь, что это поможет и вам.

Некоторые идеи являются самодостаточными (не предполагают использования внешнего API), некоторые используют известные общедоступные API, из которых вы можете легко получить предварительно созданные данные.

Некоторым требуется серверная часть, некоторым нет, что также может зависеть от вашей реализации.

Но я стараюсь сохранить эти идеи:

  • хорошо построить учебник
  • хорошо экспериментировать с веб-технологиями
  • не то, что потребуется неделя, чтобы понять
  • не «идеи для стартапа»
  • Я ориентируюсь не на мобильные приложения, а на веб-приложения
  • легко объяснить
  • легко построить (менее 24 часов, если подготовлено)
  • легко расширять новыми функциями

Итак, хватит разговоров, вот список!

Простые приложения

Приложение для отслеживания веса

  • Он принимает набор ручных записей измерений веса, выполненных в разные даты.
  • Он может построить график
  • Это может позволить отслеживать несколько объектов, например, вес более одного человека.
  • Храните их где-нибудь

Приложение-калькулятор

Стандартный калькулятор: числа, +, -, *, / и результат

Посмотреть видеоурок

Книжная база данных

  • Введите книги, которые у вас есть
  • Введите книги, которые хотите купить
  • Хранить информацию о книге, изображения

Приложение с рецептами

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

Посмотреть видеоурок

Счетчик счетов

  • Вести счета, суммы и дату
  • Перечислить счета
  • Есть несколько графиков (в этом году / в прошлом году)
  • Храните их где-нибудь

Трекер расходов

  • Регистрируйте расходы, помечайте их (или делайте категории)
  • Перечислить расходы
  • Есть несколько графиков (за прошлый месяц / за прошлый год)
  • Храните их где-нибудь

Приложение для чата

  • Какой-то урезанный Slack
  • Люди входят без аутентификации, и им присваивается имя, которое сохраняется на тот момент, когда они вернутся.
  • Хранить историю
  • Добавить уведомления

Приложение для заметок

  • Добавить новую заметку
  • Перечислите все свои заметки на боковой панели
  • Храните их где-нибудь

Приложение для личного дневника

  • Добавить записи с датой и текстом
  • Записи имеют дату
  • Показывать сначала более свежие
  • Прикрепите картинки
  • Храните их где-нибудь

Приложение для помидоров

  • Введите время
  • Таймер запуска
  • Оповещать, когда время закончится

Посмотреть видеоурок

Генератор мемов

  • Получите 10 популярных изображений мемов
  • Позвольте пользователю добавить текст
  • Результат - изображение + текст
  • Хранить историю

Игра в крестики-нолики

Все мы знаем, что такое игра в крестики-нолики 🙂

Посмотреть видеоурок

Игра жизни

Отличный проект с математикой и графикой.

Посмотреть видеоурок

Движок блога

  • Разрешить вход и добавление сообщений
  • Посетители могут оставлять комментарии
  • Храните данные где-нибудь

Механизм контроля качества

  • Разрешить вход
  • Разрешить добавлять вопросы
  • Разрешить ответить на вопросы
  • Разрешить исходному пользователю выбрать лучший вопрос
  • Храните данные где-нибудь

Движок форума

  • Разрешить вход
  • Разрешить добавлять посты
  • Разрешить комментировать сообщения
  • Храните данные где-нибудь

Встраиваемый чат

Подумайте о Интеркоме или Оларке.

  • Имейте «бэкэнд», на котором вы отвечаете
  • Вставить на веб-страницу
  • Позвольте людям писать вам наедине

Приложения на основе API

Клиент Hacker News

  • Список популярных постов
  • Показать комментарии к публикации
  • Показать профиль пользователя
  • Искать HN

ПроверятьHNPWAиПотрясающие новости хакеровдля вдохновения

Клиент Reddit

  • Список популярных постов
  • Список комментариев к сообщению
  • Показать профиль пользователя

Клиент Instagram

  • Введите хэштег и получайте последние сообщения
  • Введите имя пользователя и получайте последние сообщения
  • Разрешить хранить один или несколько хэштегов / имен пользователей и получать все последние сообщения от них

Клиент API GitHub

  • Список популярных репозиториев за сегодня / неделю / месяц
  • Список последних коммитов в репозитории
  • Показывать публичные репозитории человека или организации, отсортированные по звездочкам

Клиент API Unsplash

  • Искать изображения по теме
  • Позвольте пользователю ввести термин, покажите релевантные изображения

Начать сUnsplash API


Данные для ваших примеров приложений

Иногда вы начинаете делать какое-нибудь простое приложение, но вам скучно находить данные, которые можно использовать. В этом нет необходимости, вы можете использовать реальные или случайные данные.

Общедоступные API, которые вы можете использовать в примерах проектов

Может быть, у вас есть идея для совершенно красивого приложения CRUD или чего-то, что работает с API, но вы не хотите создавать API в первую очередь.

Рекомендую проверитьAirtable, который предоставляет разработчикам отличный API, очень простой в использовании, например, базу данных.

Вы можете использовать удивительные общедоступные API:

Заполнители изображений для ваших примеров проектов

Генераторы изображений

Аватары:

Генератор образцов текста для ваших образцов проектов

Lorem Ipsum скучен. Приправьте это:

Если вы настаиваете на использовании Lorem Ipsum,Лорипсумхороший генератор.

Другие поддельные данные

FakeJSONимеет массу возможностей создания поддельных данных.

JSONPlaceholderсодержит фальшивые сообщения, комментарии, фотографии, задачи, пользователей, альбомы, готовые для использования в REST.

Требуется создание поддельного имени / пользовательских данных? ПроверятьИмена пользовательского интерфейсаиRandomUser

Подведение итогов

Надеюсь, этот список достаточно исчерпывающий, чтобы удовлетворить ваши потребности!

Радоваться, веселиться!

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: