Каждый раз, когда я начинаю обучение, я оказываюсь в подвешенном состоянии, пытаясь понять, какое приложение мне создать. Приложение с делами? Только не снова!
Если вы читаете этот пост, вы ищете идею, простое приложение, которое вы можете использовать в своем учебнике или в своем примерном проекте для тестирования нового фреймворка или API, но вы не можете найти ничего, что действительно резонировало бы с вами.
Он должен быть достаточно простым, но в то же время достаточно сложным, чтобы его стоило сделать.
«Я не хочу создавать еще одно приложение с делами», - слышу я, вы думаете.
Я написал этот пост, чтобы помочь себе, и надеюсь, что это поможет и вам.
Некоторые идеи являются самодостаточными (не предполагают использования внешнего API), некоторые используют известные общедоступные API, из которых вы можете легко получить предварительно созданные данные.
Некоторым требуется серверная часть, некоторым нет, что также может зависеть от вашей реализации.
Но я стараюсь сохранить эти идеи:
- хорошо построить учебник
- хорошо экспериментировать с веб-технологиями
- не то, что потребуется неделя, чтобы понять
- не «идеи для стартапа»
- Я ориентируюсь не на мобильные приложения, а на веб-приложения
- легко объяснить
- легко построить (менее 24 часов, если подготовлено)
- легко расширять новыми функциями
Итак, хватит разговоров, вот список!
- Простые приложения
- Приложение для отслеживания веса
- Приложение-калькулятор
- Книжная база данных
- Приложение с рецептами
- Счетчик счетов
- Трекер расходов
- Приложение для чата
- Приложение для заметок
- Приложение для личного дневника
- Приложение для помидоров
- Генератор мемов
- Игра в крестики-нолики
- Игра жизни
- Движок блога
- Механизм контроля качества
- Движок форума
- Встраиваемый чат
- Приложения на основе API
- Данные для ваших примеров приложений
- Подведение итогов
Простые приложения
Приложение для отслеживания веса
- Он принимает набор ручных записей измерений веса, выполненных в разные даты.
- Он может построить график
- Это может позволить отслеживать несколько объектов, например, вес более одного человека.
- Храните их где-нибудь
Приложение-калькулятор
Стандартный калькулятор: числа, +, -, *, / и результат
Книжная база данных
- Введите книги, которые у вас есть
- Введите книги, которые хотите купить
- Хранить информацию о книге, изображения
Приложение с рецептами
- Введите имя, описание с шагами
- Есть фотографии
- Получите рейтинг по сложности и качеству
- Добавьте необходимое время
- Сделайте разные шаги с изображением для каждого
- Храните их где-нибудь
Счетчик счетов
- Вести счета, суммы и дату
- Перечислить счета
- Есть несколько графиков (в этом году / в прошлом году)
- Храните их где-нибудь
Трекер расходов
- Регистрируйте расходы, помечайте их (или делайте категории)
- Перечислить расходы
- Есть несколько графиков (за прошлый месяц / за прошлый год)
- Храните их где-нибудь
Приложение для чата
- Какой-то урезанный Slack
- Люди входят без аутентификации, и им присваивается имя, которое сохраняется на тот момент, когда они вернутся.
- Хранить историю
- Добавить уведомления
Приложение для заметок
- Добавить новую заметку
- Перечислите все свои заметки на боковой панели
- Храните их где-нибудь
Приложение для личного дневника
- Добавить записи с датой и текстом
- Записи имеют дату
- Показывать сначала более свежие
- Прикрепите картинки
- Храните их где-нибудь
Приложение для помидоров
- Введите время
- Таймер запуска
- Оповещать, когда время закончится
Генератор мемов
- Получите 10 популярных изображений мемов
- Позвольте пользователю добавить текст
- Результат - изображение + текст
- Хранить историю
Игра в крестики-нолики
Все мы знаем, что такое игра в крестики-нолики 🙂
Игра жизни
Отличный проект с математикой и графикой.
Движок блога
- Разрешить вход и добавление сообщений
- Посетители могут оставлять комментарии
- Храните данные где-нибудь
Механизм контроля качества
- Разрешить вход
- Разрешить добавлять вопросы
- Разрешить ответить на вопросы
- Разрешить исходному пользователю выбрать лучший вопрос
- Храните данные где-нибудь
Движок форума
- Разрешить вход
- Разрешить добавлять посты
- Разрешить комментировать сообщения
- Храните данные где-нибудь
Встраиваемый чат
Подумайте о Интеркоме или Оларке.
- Имейте «бэкэнд», на котором вы отвечаете
- Вставить на веб-страницу
- Позвольте людям писать вам наедине
Приложения на основе API
Клиент Hacker News
- Список популярных постов
- Показать комментарии к публикации
- Показать профиль пользователя
- Искать HN
ПроверятьHNPWAиПотрясающие новости хакеровдля вдохновения
Клиент Reddit
- Список популярных постов
- Список комментариев к сообщению
- Показать профиль пользователя
Клиент Instagram
- Введите хэштег и получайте последние сообщения
- Введите имя пользователя и получайте последние сообщения
- Разрешить хранить один или несколько хэштегов / имен пользователей и получать все последние сообщения от них
Клиент API GitHub
- Список популярных репозиториев за сегодня / неделю / месяц
- Список последних коммитов в репозитории
- Показывать публичные репозитории человека или организации, отсортированные по звездочкам
Клиент API Unsplash
- Искать изображения по теме
- Позвольте пользователю ввести термин, покажите релевантные изображения
Начать сUnsplash API
Данные для ваших примеров приложений
Иногда вы начинаете делать какое-нибудь простое приложение, но вам скучно находить данные, которые можно использовать. В этом нет необходимости, вы можете использовать реальные или случайные данные.
Общедоступные API, которые вы можете использовать в примерах проектов
Может быть, у вас есть идея для совершенно красивого приложения CRUD или чего-то, что работает с API, но вы не хотите создавать API в первую очередь.
Рекомендую проверитьAirtable, который предоставляет разработчикам отличный API, очень простой в использовании, например, базу данных.
Вы можете использовать удивительные общедоступные API:
- Cat API
- API собак
- API Чака Норриса
- Fuck Off As A Service API
- Котировки API
- Котировки API
- API Spotify
- API New York Times
- API Википедии
- API Викиданных
- Средний API
- Design Quotes API
- API GoodReads
- API Dribbble
- API 500px
- API Unsplash
- Giphy API - гифки!
- API Pixabay
- Обменные курсы
- API скриншотов сайта
- Оксфордский словарь API
- API веб-технологий
- API Mapbox
- API музыкальных текстов от Genius
- API метатегов сайта
- API EventBrite
- Журналы изменений проектов с открытым исходным кодом
- API REST GitHub
- GitHub GraphQL API
- QR-коды API
- API StackExchange
- Слова и синонимы
- API НАСА
- API SpaceX
- API Hacker News
- API Instagram
- Reddit API
- Slack API
- Twitter API
- API YouTube
- Worldwide Holidays API
Заполнители изображений для ваших примеров проектов
Генераторы изображений
Аватары:
- РобоХэш
- Очаровательные аватары
- DiceBear Аватары(пиксельная графика)
Генератор образцов текста для ваших образцов проектов
Lorem Ipsum скучен. Приправьте это:
- Кошачий Ипсум
- Бекон Ipsum
- Кекс Ипсум
- Хипстерский Ипсум
- Офисный Ипсум
- Сэмюэл Л. Ипсум
- Зомби Ипсум
- Доктор Ипсум
- SF Ipsum
Если вы настаиваете на использовании Lorem Ipsum,Лорипсумхороший генератор.
Другие поддельные данные
FakeJSONимеет массу возможностей создания поддельных данных.
JSONPlaceholderсодержит фальшивые сообщения, комментарии, фотографии, задачи, пользователей, альбомы, готовые для использования в REST.
Требуется создание поддельного имени / пользовательских данных? ПроверятьИмена пользовательского интерфейсаиRandomUser
Подведение итогов
Надеюсь, этот список достаточно исчерпывающий, чтобы удовлетворить ваши потребности!
Радоваться, веселиться!
Скачать мою бесплатнуюРуководство для начинающих по JavaScript
Больше руководств по js:
- Чего следует избегать в JavaScript (плохие части)
- Отсрочки и обещания в JavaScript (+ пример Ember.js)
- Как загрузить файлы на сервер с помощью JavaScript
- Стиль кодирования JavaScript
- Введение в массивы JavaScript
- Введение в язык программирования JavaScript
- Полное руководство по ECMAScript 2015-2019
- Понимание обещаний JavaScript
- Лексическая структура JavaScript
- Типы JavaScript
- Переменные JavaScript
- Список примеров идей веб-приложений
- Введение в функциональное программирование с помощью JavaScript
- Современный асинхронный JavaScript с Async и Await
- Циклы и область действия JavaScript
- Структура данных JavaScript карты
- Заданная структура данных JavaScript
- Руководство по шаблонным литералам JavaScript
- Дорожная карта для изучения JavaScript
- Выражения JavaScript
- Откройте для себя таймеры JavaScript
- Объяснение событий JavaScript
- Циклы JavaScript
- Пишите циклы JavaScript, используя map, filter, reduce и find
- Цикл событий JavaScript
- Функции JavaScript
- Глоссарий JavaScript
- Замыкания JavaScript объяснены
- Учебник по функциям стрелок в JavaScript
- Руководство по регулярным выражениям JavaScript
- Как проверить, содержит ли строка подстроку в JavaScript
- Как удалить элемент из массива в JavaScript
- Как глубоко клонировать объект JavaScript
- Introduction to Unicode and UTF-8
- Юникод в JavaScript
- Как ввести первую букву строки в верхний регистр в JavaScript
- Как отформатировать число как денежное значение в JavaScript
- Как преобразовать строку в число в JavaScript
- это в JavaScript
- Как получить текущую метку времени в JavaScript
- Строгий режим JavaScript
- Выражения функции немедленного вызова JavaScript (IIFE)
- Как перенаправить на другую веб-страницу с помощью JavaScript
- Как удалить свойство из объекта JavaScript
- Как добавить элемент в массив в JavaScript
- Как проверить, не определено ли свойство объекта JavaScript
- Введение в модули ES
- Введение в CommonJS
- Асинхронное программирование и обратные вызовы JavaScript
- Как заменить все вхождения строки в JavaScript
- Краткое справочное руководство по современному синтаксису JavaScript
- Как обрезать ведущий ноль в числе в JavaScript
- Как проверить объект JavaScript
- Полное руководство по датам JavaScript
- Учебник Moment.js
- Точка с запятой в JavaScript
- Арифметические операторы JavaScript
- Объект JavaScript Math
- Создавайте случайные и уникальные строки в JavaScript
- Как заставить ваши функции JavaScript спать
- Прототипное наследование JavaScript
- Исключения JavaScript
- Как использовать классы JavaScript
- Поваренная книга JavaScript
- Цитаты в JavaScript
- Как проверить адрес электронной почты в JavaScript
- Как получить уникальные свойства набора объектов в массиве JavaScript
- Как проверить, начинается ли строка с другой в JavaScript
- Как создать многострочную строку в JavaScript
- Руководство по ES6
- Как получить текущий URL в JavaScript
- Руководство ES2016
- Как инициализировать новый массив значениями в JavaScript
- Руководство ES2017
- Руководство ES2018
- Как использовать Async и Await с Array.prototype.map ()
- Асинхронный и синхронный код
- Как сгенерировать случайное число между двумя числами в JavaScript
- Учебное пособие по HTML Canvas API
- Как получить индекс итерации в цикле for-of в JavaScript
- Что такое одностраничное приложение?
- Введение в WebAssembly
- Введение в JSON
- Руководство по JSONP
- Should you use or learn jQuery in 2020?
- Как скрыть элемент DOM с помощью простого JavaScript
- Как объединить два объекта в JavaScript
- Как очистить массив JavaScript
- Как закодировать URL-адрес с помощью JavaScript
- Как установить значения параметров по умолчанию в JavaScript
- Как отсортировать массив объектов по значению свойства в JavaScript
- Как подсчитать количество свойств в объекте JavaScript
- call () и apply () в JavaScript
- Введение в PeerJS, библиотеку WebRTC
- Работа с объектами и массивами с помощью Rest и Spread
- Разрушение объектов и массивов в JavaScript
- Полное руководство по отладке JavaScript
- Руководство по TypeScript
- Динамически выбирать метод объекта в JavaScript
- Передача undefined в JavaScript с немедленным вызовом функциональных выражений
- Свободно типизированные языки против строго типизированных языков
- Как стилизовать элементы DOM с помощью JavaScript
- Трансляция в JavaScript
- Руководство по генераторам JavaScript
- Размер папки node_modules не является проблемой. Это привилегия
- Как решить непредвиденную ошибку идентификатора при импорте модулей в JavaScript
- Как перечислить все методы объекта в JavaScript
- Метод String replace ()
- Метод String search ()
- Как я запускаю небольшие фрагменты кода JavaScript
- Руководство ES2019
- Метод String charAt ()
- Метод String charCodeAt ()
- Метод String codePointAt ()
- Метод String concat ()
- Метод String EndWith ()
- Метод String includes ()
- Метод String indexOf ()
- Метод String lastIndexOf ()
- Метод String localeCompare ()
- Метод String match ()
- Метод String normalize ()
- Метод String padEnd ()
- Метод String padStart ()
- Метод String repeat ()
- Метод String slice ()
- Метод String split ()
- Метод String startWith ()
- Метод String substring ()
- Метод String toLocaleLowerCase ()
- Метод String toLocaleUpperCase ()
- Метод String toLowerCase ()
- Метод String toString ()
- Метод String toUpperCase ()
- Метод String trim ()
- Метод String trimEnd ()
- Метод String trimStart ()
- Мемоизация в JavaScript
- Метод String valueOf ()
- Ссылка на JavaScript: Строка
- Метод Number isInteger ()
- Метод Number isNaN ()
- Метод Number isSafeInteger ()
- Метод Number parseFloat ()
- Метод Number parseInt ()
- Метод Number toString ()
- Метод Number valueOf ()
- Метод Number toPrecision ()
- Метод Number toExponential ()
- Метод Number toLocaleString ()
- Метод Number toFixed ()
- Метод Number isFinite ()
- Ссылка на JavaScript: номер
- Дескрипторы свойств JavaScript
- Метод Object assign ()
- Метод Object create ()
- Метод Object defineProperties ()
- Метод Object defineProperty ()
- Метод записи объекта ()
- Метод Object freeze ()
- Метод Object getOwnPropertyDescriptor ()
- Метод Object getOwnPropertyDescriptors ()
- Метод Object getOwnPropertyNames ()
- Метод Object getOwnPropertySymbols ()
- Метод Object getPrototypeOf ()
- Метод Object is ()
- Метод Object isExtensible ()
- Метод Object isFrozen ()
- Метод Object isSealed ()
- Метод Object keys ()
- Метод Object preventExtensions ()
- Метод Object seal ()
- Метод Object setPrototypeOf ()
- Метод значений объекта ()
- Метод Object hasOwnProperty ()
- Метод Object isPrototypeOf ()
- Метод Object propertyIsEnumerable ()
- Метод Object toLocaleString ()
- Метод Object toString ()
- Метод Object valueOf ()
- Справка по JavaScript: объект
- Оператор присваивания JavaScript
- Интернационализация JavaScript
- Оператор типа JavaScript
- Новый оператор JavaScript
- Операторы сравнения JavaScript
- Правила приоритета операторов JavaScript
- Оператор instanceof в JavaScript
- Заявления JavaScript
- Область действия JavaScript
- Преобразования типов JavaScript (приведение)
- Операторы равенства JavaScript
- Условное выражение if / else в JavaScript
- Условное переключение JavaScript
- Оператор удаления JavaScript
- Параметры функции JavaScript
- Оператор распространения JavaScript
- Возвращаемые значения JavaScript
- Логические операторы JavaScript
- Тернарный оператор JavaScript
- Рекурсия JavaScript
- Свойства объекта JavaScript
- Объекты ошибок JavaScript
- Глобальный объект JavaScript
- Функция JavaScript filter ()
- Функция JavaScript map ()
- Функция JavaScript reduce ()
- Оператор `in` в JavaScript
- Операторы JavaScript
- Как получить значение свойства CSS в JavaScript
- Как добавить прослушиватель событий к нескольким элементам в JavaScript
- Поля частного класса JavaScript
- Как отсортировать массив по значению даты в JavaScript
- Поля открытого класса JavaScript
- Символы JavaScript
- Как использовать библиотеку JavaScript bcrypt
- Как переименовывать поля при деструктуризации объекта
- Как проверять типы в JavaScript без использования TypeScript
- Как проверить, содержит ли массив JavaScript определенное значение
- При чем тут оператор двойного отрицания !! делать в JavaScript?
- Какой оператор равенства следует использовать при сравнении JavaScript? == против ===
- Стоит ли изучать JavaScript?
- Как вернуть результат асинхронной функции в JavaScript
- Как проверить, пустой ли объект в JavaScript
- Как выйти из цикла for в JavaScript
- Как добавить элемент в массив по определенному индексу в JavaScript
- Почему не следует изменять прототип объекта JavaScript
- В чем разница между использованием let и var в JavaScript?
- Ссылки, используемые для активации функций JavaScript
- Как соединить две строки в JavaScript
- Как соединить два массива в JavaScript
- Как проверить, является ли значение JavaScript массивом?
- Как получить последний элемент массива в JavaScript?
- Как отправить urlencoded данные с помощью Axios
- Как получить дату завтрашнего дня с помощью JavaScript
- Как получить вчерашнюю дату с помощью JavaScript
- Как получить название месяца из даты JavaScript
- Как проверить, совпадают ли две даты в один и тот же день в JavaScript
- Как проверить, относится ли дата к дню в прошлом в JavaScript
- Операторы с пометкой JavaScript
- Как дождаться выполнения 2 или более обещаний в JavaScript
- Как получить дни между двумя датами в JavaScript
- Как загрузить файл с помощью Fetch
- Как отформатировать дату в JavaScript
- Как перебирать свойства объекта в JavaScript
- Как рассчитать количество дней между двумя датами в JavaScript
- Как использовать ожидание верхнего уровня в модулях ES
- Динамический импорт JavaScript
- Необязательная цепочка JavaScript
- Как заменить пробел внутри строки в JavaScript
- Нулевое объединение JavaScript
- Как сгладить массив в JavaScript
- Это десятилетие в JavaScript
- Как отправить заголовок авторизации с помощью Axios
- Список ключевых слов и зарезервированных слов в JavaScript
- Как преобразовать массив в строку в JavaScript
- Как удалить все содержимое папок node_modules
- Как удалить дубликаты из массива JavaScript
- Let vs Const в JavaScript
- Один и тот же вызов POST API в различных библиотеках JavaScript.
- Как получить первые n элементов массива в JS
- Как разделить массив на несколько равных частей в JS
- Как замедлить цикл в JavaScript
- Как загрузить изображение на холст HTML
- Как разрезать строку на слова в JavaScript
- Как разделить массив пополам в JavaScript
- Как написать текст на холсте HTML
- Как удалить последний символ строки в JavaScript
- Как удалить первый символ строки в JavaScript
- Как исправить ошибку TypeError: невозможно назначить только для чтения свойство «exports» объекта «# & lt; Object & gt;» ошибка
- Как создать всплывающее окно с намерением выхода
- Как проверить, является ли элемент потомком другого
- Как принудительно вводить учетные данные для каждого запроса Axios
- Как устранить ошибку "не функция" в JavaScript
- Гэтсби, как изменить фавикон
- Загрузка внешнего файла JS с помощью Gatsby
- Как определить темный режим с помощью JavaScript
- Посылка, как исправить ошибку `регенераторВремя выполнения не определено`
- Как определить, используется ли блокировщик рекламы с JavaScript
- Деструктуризация объектов с типами в TypeScript
- Справочник Deno: краткое введение в Deno 🦕
- Как получить последний сегмент пути или URL-адреса с помощью JavaScript
- Как перемешать элементы в массиве JavaScript
- Как проверить, существует ли ключ в объекте JavaScript
- Возбуждение событий и захват событий
- event.stopPropagation против event.preventDefault () против return false в событиях DOM
- Примитивные типы и объекты в JavaScript
- Как узнать, к какому типу относится значение в JavaScript?
- Как вернуть несколько значений из функции в JavaScript
- Стрелочные функции и обычные функции в JavaScript
- Как мы можем получить доступ к значению свойства объекта?
- В чем разница между null и undefined в JavaScript?
- В чем разница между методом и функцией?
- Как мы можем выйти из цикла в JavaScript?
- Цикл for..of в JavaScript
- Что такое деструктуризация объектов в JavaScript?
- Что такое подъем в JavaScript?
- Как заменить запятые на точки с помощью JavaScript
- Важность тайминга при работе с DOM
- Как перевернуть массив JavaScript
- Как проверить, является ли значение числом в JavaScript
- Как принять неограниченное количество параметров в функции JavaScript
- Объекты прокси JavaScript
- Делегирование событий в браузере с использованием ванильного JavaScript
- Ключевое слово JavaScript super
- Введение в XState
- Значения передаются по ссылке или по значению в JavaScript?
- Пользовательские события в JavaScript
- Пользовательские ошибки в JavaScript
- Пространства имен в JavaScript
- Любопытное использование запятых в JavaScript
- Цепочка вызовов методов в JavaScript
- Как справиться с отклонением обещаний
- Как поменять местами два элемента массива в JavaScript
- Как я исправил ошибку "cb.apply is not a function" при использовании Gitbook
- Как добавить элемент в начало массива в JavaScript
- Гэтсби, исправьте ошибку "не удается найти модуль gatsby-cli / lib / reporter"
- Как получить индекс элемента в массиве JavaScript
- Как проверить пустой объект в JavaScript
- Как деструктурировать объект до существующих переменных в JavaScript
- Структура данных JavaScript в виде массива
- Структура данных Stack JavaScript
- Структуры данных JavaScript: очередь
- Структуры данных JavaScript: Установить
- Структуры данных JavaScript: словари
- Структуры данных JavaScript: связанные списки
- JavaScript, как экспортировать функцию
- JavaScript, как экспортировать несколько функций
- JavaScript, как выйти из функции
- JavaScript, как найти символ в строке
- JavaScript, как фильтровать массив
- JavaScript, как расширить класс
- JavaScript, как найти дубликаты в массиве
- JavaScript, как заменить элемент массива
- Алгоритмы JavaScript: линейный поиск
- Алгоритмы JavaScript: двоичный поиск
- Алгоритмы JavaScript: сортировка выбора
- Алгоритмы JavaScript: быстрая сортировка
- Алгоритмы JavaScript: сортировка слиянием
- Алгоритмы JavaScript: пузырьковая сортировка