Хотите построить что-нибудь веселое? Вот список примеров идей для веб-приложений.

hotite postroit chto nibud veseloe vot spisok primerov idej dlya veb prilozhenij

Интересно изучать JavaScript? Получите мою электронную книгу на jshandbook.com

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

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

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

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

Что вы найдете ниже

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

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

Но я пытался убедиться, что эти идеи:

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

Итак, достаточно разговоров, вот список!

Простые программы без внешних зависимостей

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

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

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

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

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

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

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

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

Трекер счетов

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

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

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

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

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

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

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

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

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

Программа pomodoro

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

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

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

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

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

Игра жизни

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

Двигатель блога

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

Двигатель QA

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

Форумный двигатель

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

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

Подумайте о Intercom или Olark.

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

Программы на основе API

Клиент Hacker News

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

Просмотрите HNPWA и Awesome Hacker News, чтобы получить вдохновение.

Клиент Reddit

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

Клиент Instagram

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

Клиент API GitHub

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

Клиент Unsplash API

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

Начните с Unsplash API для вдохновения.

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

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

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

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

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

Вот несколько отличных публичных API, которые вы можете использовать:

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

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

Аватары:

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

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

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

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

FakeJSON обладает множеством возможностей генерации поддельных данных.

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

Нужно ли создание поддельных имен/пользователей? Проверьте имена UI и RandomUser.

Подведению

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

Веселитесь!

Интересно изучать JavaScript? Получите мою электронную книгу на jshandbook.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *