Frontend Пет-проект

20+ интересных идей для создания веб-приложений

Иногда очень нужна идея для очередного проекта, но в голову не идет мысль. Мы подготовили более 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

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

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

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

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

Оригинал