Топ-9 PET-проектов для начинающих javascript-разработчиков



Книга Топ-9 PET-проектов для начинающих javascript-разработчиков

#1. Github Explorer

Основная идея: создать сайт, пользователь которого может:

  • ввести имя и просмотреть общедоступные репозитории;
  • выбрать репозиторий и посмотреть readme.md и язык программирования.

Усложнение задания:

Сохраните последние 10 просмотренных репозиториев/пользователей и разрешите пользователю переходить к ним.

Api: https://docs.github.com/en/rest/overview/libraries.

Технологии:

  • react;
  • contexts api;
  • axios;
  • tailwindcss.

#2. Список дел

Основная идея: создать базовый список задач для отслеживания целей пользователя, который может:

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

Усложнение задания:

  • Сохраните задачи в базе данных.
  • Добавьте группы пользователей. Таким образом, вы можете видеть свои задачи и всех участников группы, но обновлять только свои.
  • Если пользователь обновит задачу, другим пользователям в той же группе поступит push-уведомление.
  • Сделайте сайт изолированным как PWA или переместите его в React-Native.
  • Добавьте диаграмму выполненной задачи за прошлую неделю/месяц/год.

Api: https://firebase.google.com/products/cloud-messaging.

Технологии:

  • react/react-native;
  • contexts api;
  • axios;
  • tailwindcss;
  • node;
  • firebase;
  • d3 для цветового оформления диаграмм.

#3. Tabata-таймер

Основная идея: создать базовый Tabata-таймер, позволяющий пользователю:

  • создать новую программу с n циклами и m секундами, а также некоторым задействованием rest;
  • сохранять программы и загружать сохраненные программы;
  • запустить программу (запуск или остановка программы должны сопровождаться определенным звуковым сигналом).

Усложнение задания:

  • Добавьте описания упражнений для каждой программы.
  • Добавьте расписание упражнений. Например, каждые 4 часа с 8 утра до 8 вечера следует уведомлять пользователя за 5–10 минут до начала занятий.

Api: https://firebase.google.com/products/cloud-messaging.

Технологии:

  • react/react-native;
  • contexts api;
  • axios;
  • tailwindcss;
  • node;
  • firebase.

#4. Etherium-обозреватель

Основная идея: создать базовый Etherium-обозреватель с предоставлением пользователю возможностей:

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

Усложнение задания:

  • Разрешите пользователю сохранять в списке определенные блоки/транзакции.
  • Разрешите показывать график предыдущих 10 блоков для любого блока.

Api:

Технологии:

  • react/react-native;
  • contexts api;
  • axios;
  • tailwindcss;
  • metamask;
  • web3.

#5. Кошелек с конвертацией валюты

Основная идея: создать базовый кошелек с конвертацией валюты, пользователь которого может:

  • видеть в кошельке 4 валюты USD/CAD/AUD/SGD/CHF/EUR;
  • конвертировать одну валюту в другую;
  • добавить новое значение в любую валюту;
  • просматривать историю/описание/даты транзакций с учетом часового пояса.

Усложнение задания:

  • Используйте API реальной валюты/не жестко закодированных значений.
  • Добавьте авторизацию и разрешите отправлять валюты между пользователями с демонстрацией информации о транзакционных операциях.
  • Настройте отправку уведомления получателю валюты.

Api: https://firebase.google.com/products/cloud-messaging.

Технологии:

  • react/react-native;
  • contexts api;
  • axios;
  • tailwindcss;
  • express;
  • PostgreSQL / typeorm.

#6. Социальная сеть

Основная идея: создать социальную сеть, пользователь которой может:

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

Усложнение задания:

  • Разрешите администратору видеть пользователей в интернете.
  • Предоставьте администратору право запрещать пользователю вход в систему на 1 день/5 дней/месяц.

Технологии:

  • react/react-native;
  • contexts api;
  • axios;
  • tailwindcss;
  • express;
  • PostgreSQL/typeorm или mongodb/mongoose.

#7. Tinder для уток

Основная идея: создать Tinder для уток, пользователь которого может:

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

Усложнение задания:

  • Добавьте режим предварительного просмотра, в котором пользователь может свайпнуть все взаимные свайпы, чтобы увидеть картинки.
  • Добавьте логин от Facebook/Telegram.
  • Добавьте сетку, в которой пользователь может изменить порядок фотографий с помощью перетаскивания.

Api: https://random-d.uk/api.

Технологии:

  • react/react-native;
  • contexts api;
  • axios;
  • tailwindcss;
  • PostgreSQL/typeorm или mongodb/mongoose;
  • express;
  • socket.io.

#8. Морской бой

Основная идея: создать игру “Морской бой”, пользователь которой может:

  • сгенерировать случайную ссылку для игры и отправить ее другу;
  • нажать кнопку пуск, когда он и его друг будут готовы;
  • выводить на поле боевые корабли (один 4-клеточный, два 3-клеточных, три 2-клеточных, четыре 1-клеточных);
  • выбрать 1 клетку, чтобы проверить, есть ли вражеский корабль; если корабль затонул, увидеть все клетки вокруг полных файлов.

Усложнение задания:

  • Добавьте супер-оружие, которое 1 раз за игру стреляет с охватом площади 2×2 клетки.
  • Добавьте статистику.
  • Добавьте авторизацию через Facebook.
  • Добавьте главный экран, где можно увидеть все открытые и последние игры.

Технологии:

  • react/react-native;
  • contexts api;
  • axios;
  • tailwindcss;
  • express;
  • socket.io.

#9. Чат-бот для анализа Amazon

Основная идея: создать Telegram-бота, уведомляющего об изменении цены конкретного товара, чтобы пользователь имел возможность:

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

Усложнение задания:

  • Создайте очередь rabbitmq для разделения парсинг-нагрузки между различными службами.

Api: https://core.telegram.org/bots/api.

Технологии:

  • tailwindcss;
  • express;
  • socket.io;
  • puppeter;
  • rabbitmq;
  • redis;
  • mongodb/postgress.
143   0  
    Ничего не найдено.

Добавить ответ:
Отменить.