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

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

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

Подборка разделена на категории: без/с использованием внешнего API, без/с требованием серверной части и т. д.

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

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

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

Калькулятор

Реализовать стандартные операции  +, -, *, / над числами и вывод результата.

https://www.youtube.com/watch?v=24UvjYFDID0

Библиотека

• хранение книг, которые вы прочитали/купили;
• раздел “буду читать”;
• хранение информации о книге и суперобложке.

Книга рецептов

• ввод названия и описания;
• возможность добавлять картинки блюд;
• ранжирование по сложности и умению повара;
• время приготовления;
• этапы приготовления по шагам с картинками;
• хранение всего перечисленного.

https://www.youtube.com/watch?v=6tZ4c-Bxstg

Контроль расходов

• регистрация чеков, сумм и дат;
• список чеков и квитанций;
• возможность строить графики со статистикой (в этом году/в прошлом году);
• хранение всего перечисленного.

Чат

• облегченный Slack-функционал;
• возможность входить без аутентификации, получать имя, которое будет храниться до следующей сессии;
• хранение истории;
• уведомления.

Блокнот

• создание нового блокнота;
• список всех заметок в сайдбаре;
• хранение всего перечисленного.

Личный дневник

• добавление записи с датой и текстом;
• изменение порядка записей;
• возможность добавлять картинки;
• хранение всего перечисленного.

Таймер/будильник

• ввод времени;
• запуск таймера;
• сигнал по прошествии времени.

https://www.youtube.com/watch?v=lgj3nfzV0xM

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

• хранение десяти популярных картинок-мемов;
• возможность добавлять пользовательский текст;
• результат картинка + текст;
• хранение истории.

Крестики-нолики

Всем известная игра: попробуйте реализовать.

https://www.youtube.com/watch?v=Ia69O1ZNGEg

Игра в жизнь

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

https://www.youtube.com/watch?v=5Ajcjs3OmjA

Движок блога

• возможность логиниться и создавать посты;
• дать возможность посетителям оставлять комментарии;
• хранение всего перечисленного.

Вопрос-ответ

• возможность логиниться;
• создание вопросов и ответов;
• возможность выбирать лучший ответ;
• хранение всего перечисленного.

Форум

• регистрация, авторизация, аутентификация;
• возможность логиниться и создавать посты;
• комментарии к постам;
• хранение всего перечисленного.

Встроенный “живой” чат

• наличие админки, в которой вы отвечаете на вопросы;
• возможность встраиваться в веб-страницу;
• возможность писать приватно админу.

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

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

Новостной клиент

• выведение на экран списка популярных новостей;
• просмотр комментариев;
• просмотр пользовательских профилей;
• поиск.

Несколько примеров для вдохновения: раз, два.

Reddit клиент

• просмотр списка популярных постов;
• выведение списка комментариев к постам;
• редактирование пользовательских профилей.

Instagram клиент

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

GitHub API клиент

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

Unsplash API клиент

• организовать поиск изображения по теме;
• позволить юзеру вводить ключевое слово и по нему делать поиск изображений.

Вот официальный хелп по данному API.

Где брать данные для приложений?

Для создания веб-приложений обязательно нужны данные для "заглушек", картинки, API и т. д.

Этот процесс гораздо скучнее, чем кодинг поэтому мы немного сэкономим вам время на поиске нужных компонентов.

Бесплатные API

• Medium API
• Design Quotes API
• GoodReads API
• Dribbble API
• 500px API
• Nasa API
• SpaceX API
• Hacker News API
• Instagram API
• Reddit API
• Slack API
• Twitter API
• YouTube API

Генераторы плейсхолдеров

• Placeholder
• Placekitten

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

• RoboHash
• Adorable Avatars
• DiceBear Avatars
• Lorem Picsum

Генераторы текста и данных

• Всем давно полюбившийся LoremIpsum.
• Масса полезной информации в JSON: FakeJSON.
• JSONPlaceholder – фейковые посты, комментарии, фотографии пользователей и альбомы для создания веб-приложений.

Оригинал

Другие материалы по теме:

• Кодить с комфортом: 16 лучших сред для веб-разработки
• SQL-программирование: наиболее полный видеокурс
• ТОП-20 инструментов и материалов по веб-разработке