идеи для web приложений
50 идей для мобильных и веб-проектов на 2021 год
Редактор новостей Highload
Разработчик Эндрю Байсден опубликовал в блоге список из 50 идей для создания веб- и мобильных проектов. Каждый разделен по уровню сложности — начальный, средний и продвинутый — и по специализации — фронтенд-, бэкенд- и фулстек-разработка.
Технологический стек автора подборки:
По словам Эндрю Байсдена, технологический стек может меняться и зависит от индивидуальных навыков или того, какой инструмент разработчик хочет освоить. Некоторые из представленных идей уже существуют и реализуются, но это не мешает разработчикам вдохновиться и придумать что-то свое или сделать лучшую версию существующего приложения.
#1 Дашборд Social Media
Приложение, которое объединяет множество социальных сетей в один интерфейс. Это означает единый UI и то, что будет открыта только одна вкладка браузера.
Уровень сложности: продвинутый;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, TypeScript, React, Redux, React Native;
Бэкенд: Node.JS, NoSQL.
#2 Менеджер приложений для знакомств
Подойдет тем, кто привык использовать несколько таких приложений и сталкивался с трудностями при мониторинге запланированных дат свиданий. С помощью приложения можно отслеживать всех людей, с которыми налажено общение, а также основную информацию: имена, номера телефонов, локации встреч и так далее.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, React Native;
Бэкенд: Node.JS, NoSQL.
#3 Приложение-компаньон для компьютерных игр
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, TypeScript, React, React Native;
Бэкенд: Node.JS, NoSQL.
#4 Приложения для поиска работы
Как вариант, Эндрю Байсден предлагает создать не обычное приложение для поиска работы, а что-то вроде Tinder. Тогда, вместо банальной отправки резюме, пользователи будут искать совпадения с потенциальными работодателями. Взаимодействие с HR-специалистом станет более неформальным.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, React Native;
Бэкенд: Node.JS, NoSQL.
#5 Приложение 100DaysOfCode
Челлендж 100DaysOfCode позволяет людям последовательно научиться программировать. В основном разработчик просто использует одноименный хештег, а затем пишет в Twitter о ежедневных достижениях. На данный момент нет простого способа отслеживать и планировать твиты для хештега. Создание приложения, которое будет автоматически планировать твиты, а также любые прикрепленные мультимедийные файлы, вероятно, было бы очень полезно для разработчиков.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Flutter/Dart;
#6 Социальная сеть для общения на тему здоровья
Пандемия так или иначе повлияла на психологическое здоровье каждого человека. Суть идеи — создать безопасное место, где люди могли бы поговорить об этом и делиться историями.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Flutter/Dart;
#7 Приложение «Профессиональный певец»
По задумке Эндрю Байсдена, такое приложение может позволить обычному человеку спеть песню, которая после обработки специальным алгоритмом будет звучать так, как будто ее исполнил профессиональный певец.
Уровень сложности: продвинутый;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Flutter/Dart;
#8 Приложение с персональным руководством по стилю
Приложение, которое генерирует индивидуальный стиль пользователя на основе выбранных им шаблонных элементов одежды, после чего предоставляются ссылки на веб-сайты, где можно купить нужный элемент гардероба. По сути, это персональное руководство по стилю, которое дает рекомендации по тому, что модно и что купить.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Flutter/Dart;
#9 Приложение Dating Life Community
Не все легко знакомятся с другими людьми, поэтому автор подборки предлагает создать приложения, где люди будут делиться советами и личным опытом о том, как встречаться и устанавливать контакт с другими.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, TypeScript, React, React Native;
Бэкенд: Node.JS, NoSQL.
#10 Приложение «Потерянные животные»
Приложение, которое позволяет отметить на карте место, где пользователь нашел потерянного кем-то питомца, чтобы владельцы животного искали его в конкретной локации. Плюс на карте можно расположить информацию о наличии ближайших ветеринарных клиниках и питомниках.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Flutter/Dart;
#11 Агрегатор сайтов с обзорами курсов по программированию
Разработчикам бывает трудно найти хороший курс по программированию. С помощью специального агрегатора они могли бы искать и находить подходящие курсы, а также фильтровать их для выбора наиболее подходящего.
Уровень сложности: продвинутый;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, React Native;
Бэкенд: Node.JS, NoSQL.
#12 Генератор случайных сайтов
При отсутствии опыта в дизайне, может быть сложно придумать дизайн для приложения или сайта. Выходом может стать генератор случайных веб-сайтов, который будет рандомно собирать сайты из разных блоков и цветовых решений. В перспективе можно превратить генератор в полноценный конструктор веб-сайтов с генерацией кода.
Уровень сложности: продвинутый;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript.
#13 Приложение для знакомств
Существует множество мобильных приложений, но, по мнению автора подборки, нет особенного. У всех есть свои плюсы и минусы, поэтому создание приложения для знакомств, сочетающее в себе лучшие функции уже существующих, а также бесплатное, было бы конкурентным на рынке
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, Flutter/Dart.
#14 Веб-сайт для электронной торговли
Торговые сайты всегда пользуются большим спросом, ведь людям всегда есть, что продавать. Разработка собственной площадки для продажи нестандартных продуктов, уверен автор, может привести к успеху.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, Flutter/Dart.
Бэкенд: Node.JS, NoSQL.
#15 Приложение «Генератор случайных блюд»
Это приложение, которое может случайным образом генерировать блюда и выбирать ингредиенты, которые хорошо сочетаются друг с другом для прокачки кулинарных навыков.
Уровень сложности: начальный;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript.
#16 Платформа для разработчиков-фрилансеров
Аналог Upwork и Fiverr, но только для разработчиков-фрилансеров. Это может быть платформа, на которой специалисты смогут находить друг друга, связываться, общаться и совместно работать над проектами.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, React Native.
Бэкенд: Node.JS, NoSQL.
#17 Приложение для отслеживания телепрограмм
Это может быть простое приложение, которое просто позволит планировать, что посмотреть в течение недели, чтобы не полагаться на электронные программы передач или бумажные телегиды.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript.
#18 Приложение «Инвентаризация покупок»
Многие для отслеживания покупок используют электронную таблицу. Автор подборки считает, что это было бы проще делать в форме специального приложения. В него также можно встроить индикатор запаса того или иного продукта, чтобы знать, когда нужно купить еще.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript.
#19 Приложение «Орел или решка»
Из-за пандемии многие перешли на бесконтактный способ оплаты, поэтому реже носят с собой мелочь, которую также часто используют для принятия решений.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript, Flutter/Dart.
#20 Приложение для создания случайных текстов песен
Вероятно, автор имеет ввиду приложение, которое будет выдавать случайную последовательность текста с рифмой на основе нейросети GPT-3.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript.
#21 Приложение для генерации случайных мемов
Отличительной чертой от уже созданных приложений может быть комбинирование случайного текста с изображением или чем-то анимированным.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript.
#22 Приложение со списком фильмов и сериалов для просмотра
В API могут храниться заметки обо всех сериалах и фильмах, которые хочет посмотреть пользователь. Это позволит отслеживать историю просмотров, а также, добавив фронтенд, получить персональное приложение со своими предпочтениями в фильмах и сериалах.
Уровень сложности: начальный;
Тип проекта: бэкенд.
#23 Генератор случайных карт для видеоигр
Основной целью генератора может быть экономия времени. Необязательно создавать что-то сложное и трехмерное. Достаточно создания карт для простых 2D-игр с боковой прокруткой или с видом сверху.
Уровень сложности: средний;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript
#24 Генератор случайных шуток
Название говорит само за себя.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript
#25 Приложение для отслеживания приема лекарств с уведомлениями
Приложение для контроля над приемом лекарств — что, когда и в какой дозировке. Можно также добавить функции для создания заметок от врачей.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript
#26 Приложение для подбора образа
Приложение для подбора нарядов на неделю на основе ряда пользовательских предустановок. Подойдет для нерешительных людей.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript
#27 Приложение-напоминалка
Приложение для хранения нужной информации.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Flutter/Dart.
#28 Приложение для шифрования и декодирования текста
По задумке автора подборки, такое приложение могло бы создавать и расшифровывать секретные сообщения. На входе текст шифруется с помощью специального алгоритма, а на выходе, когда его получает адресат, оно декодируется.
Уровень сложности: продвинутый;
Тип проекта: бэкенд.
#29 API для генерации аватара
Автор подборки предлагает начинить такое приложение функциями, позволяющими случайным образом создавать аватары для использования в профилях на веб-сайтах.
Уровень сложности: начальный;
Тип проекта: бэкенд.
#30 API для генерации случайного логотипа
Созданные логотипы можно использовать в производстве или для тестирования. Например, разработчик создает тестовый сайт, а официального логотипа пока нет. Вместо того, чтобы делать макет в Photoshop, можно использовать специальный API для генерации логотипа.
Уровень сложности: средний;
Тип проекта: бэкенд.
#31 Агрегатор новостей
Как вариант, можно создать сайт-агрегатор новостей, который будет получать информацию из нескольких источников с единым интерфейсом и на одной платформе для чтения.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, React Native
Бэкенд: Node.JS, NoSQL.
#32 API генератор случайных имен пользователей
Порой трудно сгенерировать хорошее имя пользователя. Было бы проще автоматически сгенерировать имя пользователя на основе нескольких ключевых слов.
Уровень сложности: средний;
Тип проекта: бэкенд.
#33 Чат-бот
Чат-бот — это личный помощник. Например, можно создать бота, который будет отслеживать повседневные задачи и давать рекомендации по повышению производительности.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, React Native.
Бэкенд: Node.JS, NoSQL.
#34 Приложение «Библиотека игр»
Цель — создать приложение для хранения истории игр. Где пользователь играл, когда и во что, с фильтрацией по году, жанру, платформе и так далее. В перспективе можно превратить приложение в социальную сеть, чтобы можно было следить за списками игр других людей.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, React Native.
Бэкенд: Node.JS, NoSQL.
#35 Социальная сеть о еде и кулинарии
Место, где люди могли бы делиться рецептами, фотографиями, планами питания а также информацией о ресторанах, барах и кафе, которые они советуют посетить другим людям.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, React Native.
Бэкенд: Node. JS, NoSQL.
#36 Приложение для дизайна интерьера
Приложение для создания планов этажей для различных комнат с возможностью добавления мебели и шейрингом с другими пользователями, чтобы получить обратную связь.
Уровень сложности: средний;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript.
#37 Социальная сеть для геймеров
В ней пользователи могут делиться личным опытом и советами, видео и пошаговыми инструкциями о том, как стать профессиональным игроком.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, React Native.
Бэкенд: Node.JS, NoSQL.
#38 Приложение «Генератор разговоров»
В таком приложении можно использовать машинное обучение, которое позволит застенчивым и неуверенным в себе людям улучшить разговорные навыки.
Уровень сложности: продвинутый;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, React Native.
#39 Социальная сеть для любителей Lego
В ней пользователи могут делить тем, что они построили с помощью конструктора Lego, а также выкладывать уроки по созданию моделей.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, React Native.
Бэкенд: Node.JS, NoSQL.
#40 Приложение «Менеджер для поиска работы»
Приложение для мониторинга заявок на вакансии, которых могут быть десятки, интервью и отзывов. Для удобства можно добавить возможность экспорта данных в виде файла CSV или json.
Уровень сложности: средний;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, Flutter/Dart.
#41 Приложение для нестандартных вычислений
Вместо традиционных вычислений можно разработать приложение, которое будет рассчитывать стоимость проживания или ссуду с процентами в зависимости от ее размера. Вариантов масса.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript.
#42 Приложение для генерации случайных хобби
Приложение призвано выбирать за пользователей то, чем они будут заниматься. В него можно также встроить индикатор заинтересованности новым времяпрепровождением. Приложение подходит как способ формирования новых привычек.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript.
#43 Клон приложений Clubhouse или Twitter Spaces
Такого рода приложения сейчас популярны, поэтому автор подборки считает, что создание аналога будет не только полезным, но, возможно, и прибыльным, так как есть вероятность, что именно ваша версия станет более популярной.
Уровень сложности: продвинутый;
Тип проекта: фулстек.
Фронтенд: HTML, CSS, JavaScript, React, Redux, Flutter/Dart.
#44 Приложение веб-краулер
Поисковые роботы используются для сбора данных с различных веб-сайтов для дальнейшей индексации, поэтому Эндрю Байсден как вариант предлагает создать собственного бота для таких целей.
Уровень сложности: начальный;
Тип проекта: бэкенд.
#45 Инструмент автоматизации
Инструмент автоматизации дает возможность ускорить рабочие процессы, которые часто используются. Например, настройка структуры продукта для приложения или преобразование всех файлов в папке во что-то новое, например, изменение jpg в png.
Уровень сложности: начальный;
Тип проекта: бэкенд.
#46 API компьютерной игры
Например, разработчик хочет создать игру с большим количеством данных. Можно сделать внутренний API для хранения информации об играх, которая может использовать во фронтенд-приложении.
Уровень сложности: начальный;
Тип проекта: бэкенд.
#47 Приложение для отслеживания бюджета
Приложение, в котором будут отображаться все доходы и расходы, а также все покупки, сделанные за год. Также можно добавить обзор по дням, месяцам и годам, чтобы отследить то, чего пользователь покупает чаще или реже всего.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript.
#48 Дневник питания
Приложение для отслеживания еды, которую пользователь ест каждый день. Можно добавить подсчет веса, калорий и прочих важным показателей.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript.
#49 Журнал для отслеживания настроения
Это может быть простое приложение, позволяющее отслеживать настроение в течение дня. В перспективе можно превратить его в дневник с возможностью добавления заметок.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript, React.
#50 Игра «Угадай изображение»
Приложение для угадывания скрытого изображения из нескольких вариантов.
Уровень сложности: начальный;
Тип проекта: фронтенд.
Фронтенд: HTML, CSS, JavaScript.
ТОП-13 крутых идей веб-проектов для прокачки навыков
Иногда хочется написать что-то эдакое, а идей нет. Вот вам подборка классных идей для веб-проектов на любой случай и вкус.
Данные приложения поспособствуют:
Список идей разделен на три базовых уровня сложности:
1. Блокнот
Уровень: beginner
Описание: создание и сохранение заметок.
Возможности:
Бонус:
Полезные ссылки:
Пример:
HTML
2. Рождественские огни
Уровень: beginner
Описание: ваша задача нарисовать в ряд семь цветных окружностей и по таймеру изменять интенсивность свечения каждого из них. После прохода нескольких рядов «лампочек» последовательность подсвечивания меняется.
Возможности:
Бонус:
Пример:
HTML
Следующий вариант из списка веб-проектов часто приходится реализовывать на практике.
3. Тестирование
Уровень: beginner
Описание: создайте приложение-опрос для тестирования навыков программирования разработчиков.
Возможности:
Бонус:
Полезные ссылки:
Пример:
HTML
4. Конвертер римских чисел в десятичные
Уровень: beginner
Описание: римские цифры включают в себя семь символов, каждый с фиксированным целым значением:
Возможности:
Бонус:
Полезные ссылки:
Пример:
5. Поиск книг
Уровень: intermediate
Описание: приложение для поиска книги по запросу (название, автор и т. д.). Список книг отображается со всей информацией о них.
Возможности:
Бонус:
Полезные ссылки:
Пример:
HTML
6. Карточная игра
Уровень: intermediate
Описание: эта игра на время, в которой после клика по карточке, появляется изображение. Необходимо найти такую же картинку среди других карточек.
Возможности:
Бонус:
Пример:
HTML
7. Markdown-генератор
Уровень: intermediate
Описание: данное приложение преобразует обычную таблицу с данными в форматированную Markdown-таблицу.
Возможности:
Бонус:
Полезные ссылки:
Пример:
8. Линии
Данный кандидат из списка веб-проектов уже реализован много раз, но его необходимо выполнить для тренировки своих навыков.
Уровень: intermediate
Описание: приложение автоматически рисует разноцветные линии. Когда линия касается края окна, она меняет свое направление. Полосы постепенно исчезают. Библиотеки анимации не используются. Применяйте только Vanilla HTML/CSS/язык JavaScript.
Возможности:
Бонус:
Полезные ссылки:
Пример:
HTML
9. Список дел
Уровень: intermediate
Описание: классическое приложение, где пользователь может записать все мысли, задачи и цели, чтобы не забыть.
Возможности:
Бонус:
Полезные ссылки:
Пример:
HTML
10. Морской бой
Уровень: advanced
Описание: текстовый вариант графической версии игры. Игра состоит из движка (BGE) и консольной части.
Возможности:
Консольная часть
Полезные ссылки:
Пример:
11. Чат
Это приложение самое интересное из подборки веб-проектов и самое популярное на данные момент.
Уровень: advanced
Описание: классический мессенджер.
Возможности:
Бонус:
15 идей для вашего приложения. Часть 1
Jun 21, 2019 · 4 min read
У разработчиков, как и у писателей, бывает ступор, когда хочешь что-то написать, но не знаешь что.
Мы с моим другом Джимом собрали коллекцию идей для приложений, чтобы решить эту проблему. 👍
Для чего это нужно:
Это не просто список проектов. Здесь есть детальное описание каждого задания, чтобы помочь вам начать разработку с нуля.
В описании каждого проекта вы найдёте:
Проекты
Все проекты разделены на три уровня сложности:
Далее представлены по 5 проектов для каждого уровня (всего 15). На данный момент мы собрали более 30 проектов, их можно найти на GitHub. В дальнейшем мы планируем пополнить этот список.
1. Записная книжка
Уров е нь: 1 — Начальный
Описание: создаёт и хранит напоминания
Возможности
Дополнительные фичи
Ссылки и ресурсы
Пример проекта
2. Гирлянда
Уровень: 1 — Начальный
Описание: вам необходимо создать мигающую гирлянду. Задача — нарисовать ряд из семи разноцветных кружков (огоньков), интенсивность каждого огонька будет меняться в зависимости от таймера. Когда текущий огонёк становится ярче, предыдущий тускнеет, возвращаясь к исходной интенсивности.
Проще говоря, симуляция новогодней гирлянды.
Возможности
Дополнительные фичи
Ссылки и ресурсы
Пример проекта
3. Вращение изображений
Уровень: 1 — Начальный
Описание: для веб-разработчика важно понимать основы работы с изображениями, потому что UI/UX современных приложений во многом на них опирается.
В приложении вы реализуете возможность вращения изображения. На экране отображается 4 копии одного изображения, представленного в матрице 2 на 2. Используя стрелки вверх, вниз, влево и вправо рядом с каждым изображением, пользователь может повернуть их вертикально или горизонтально.
Допускается использовать только чистый HTML, CSS, и Javascript. Сторонние библиотеки не допускаются.
Возможности
Дополнительные фичи
Ссылки и ресурсы
Пример проекта
4. Тестирование
Уровень: 1 — Начальный
Описание: тест, в котором можно проверить свои знания, отвечая на вопросы.
Создайте приложение для других разработчиков, в котором они смогут проверить свои знания HTML, CSS, JavaScript, Python, PHP и т.д.
Возможности
Дополнительные фичи
Ссылки и ресурсы
Пример проекта
5. Конвертация римских чисел в десятичные
Уровень: 1 — Начальный
Описание: каждый римский символ имеет своё фиксированное целое значение, которое можно преобразовать в десятичный формат. В наши дни используют семь символов:
Возможности
Дополнительные фичи
Ссылки и ресурсы
Пример проекта
Не пропустите 5 приложений среднего уровня сложности во второй части.