7 Реагистрационные проекты, которые вы должны построить в 2021 году

Автор оригинала: FreeCodeCamp Community Member.

React – это библиотека JavaScript, которая идеально подходит для создания впечатляющих приложений. Существуют бесчисленные проекты, которые вы можете сделать с реагированием, но вот семь, которые находятся в моем списке, чтобы построить в 2021 году.

Почему я выбрал эти семь проектов в частности? Я выбрал их, потому что они составляют друг друга. Они требуют, чтобы вы знали подобные, необходимые концепции, такие как аутентификация, работающие с API и базой данных, используя маршрутизатор RACT для добавления страниц в ваше приложение, а также воспроизведение носителя, такими как аудио или видео.

Кроме того, много приложений могут быть (и часто) интегрированы друг в друга. Приложения для социальных сетей могут включать в себя приложения для чата, музыки или видео-приложений, могут включать приложения электронной коммерции и так далее.

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

Наряду с каждым проектом я предоставил несколько реальных примеров, которые вы можете использовать для поиска вдохновения, плюс некоторые идеи о каких инструментах, которые я, возможно, использовал для создания каждого приложения.

1. Приложение для чата в реальном времени

Реальные примеры : Slack, Messenger, раздор, четкий чат

Практически все используют какое-то приложение для чата в реальном времени, будь то мобильное приложение, такое как WhatsApp или Viber или средство производительности, как Slack или DiscoD. Это также может быть частью виджета чата на сайте, где клиенты могут напрямую говорить с владельцами сайта.

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

Как построить приложение для чата в реальном времени:

Создайте свой проект с помощью Create-React-App или Next.js.
Используйте такие услуги, как Firebase или Firebase или GraphQL-подписки для создания и получения сообщений в реальном времени для пользователей.
Добавьте реакции на сообщение с Emoji с помощью пакета NPM Emoji-Mart
Развертывание в Интернете с помощью инструментов FireBase

2. Социальные медиа приложение

Реальные примеры : Facebook, Twitter, Instagram

Приложение, которое вы, вероятно, наиболее знакомы, – это приложение в социальных сетях. Во многих отношениях это похоже на приложение для чата, но расширено до более широкого сообщества пользователей.

Эти пользователи могут взаимодействовать друг с другом.

Как построить приложение для социальных сетей:

Создайте свой интерфейс с помощью Create-React-App и Backend используя API узла
Используйте базу данных, такую как Postgres или Mongodb, наряду с ORM, как Prisma (Postgres) или Mongoose (MongoDB)
Используйте социальную аутентификацию с Google, Facebook или Twitter, используя паспорт или более простую услугу, такую как AUTH0
Разверните бэкэнд к Heroku, Frontend в NetLify

3. Приложение E-Commerce

Реальные примеры: Shopify, Etsy, Dev.to Storefront

Storefronts, где мы можем купить цифровые или физические продукты онлайн повсюду. Приложения электронной коммерции Добавьте возможность пользователей добавлять и удалять элементы из корзины, просмотреть их корзину и оформить заказ с помощью кредитной карты, а также другие варианты оплаты, таких как Google Pay и Apple Pay.

Если вы ищете вдохновение, оформируйте оформление некоторых простых витрин магазинов, таких как магазин Shopify, а не смотрите на массивный ритейлер, такой как Amazon или Walmart.

Как построить приложение электронной коммерции:

Создайте приложение с помощью Create-React-App или Next.js
Добавьте полоса Пакет NPM, плюс Используйте-корзину легко обращаться с платежами непосредственно с помощью полос
Создайте API узла для обработки создания сеансов с полосой
Разверните бэкэнд к Heroku, Frontend в NetLify (или развернуть как на Heroku)

4. Приложение для совместного использования видео

Реальные примеры: YouTube, Тикток, Snapchat

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

У вас есть приложения для совместного использования видео, такие как YouTube, которые позволяют найти любой браузер и искать любое видео, которое вы можете себе представить, что пользователи создали. Кроме того, Tik Tok и Snapchat дают нам возможность смотреть видео от других пользователей, которые записаны в гораздо более коротком, более доступном формате и более ориентированы на взаимодействия, такие как лайки и виды.

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

Создайте приложение с приложением Create-raction, и создайте бэкэнд с узлом/Express
Используйте HELORALIALION для изображения изображения и видео в облачный API
Используйте базу данных, такую как Postgres или Mongodb, наряду с ORM, как Prisma (Postgres) или Mongoose (MongoDB)
Разверните бэкэнд к Heroku, Frontend в NetLify (или развернуть как на Heroku)

5. Приложение для блога/портфолио

Реальные примеры: Средний, Дев.то, Hashnode

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

Создание этих приложений с такими инструментами, такими как GATSBY или NextJS (которые являются как рамочными рамками), теперь проще, чем когда-либо.

Как создать приложение для блога или портфолио:

Создайте приложение с GATSBY или Next.js
Используйте Markdown для постов в блоге с плагином специальной отметки трансформатора, такими как замечание
Разверните сайт в NetLify или Vercel

6. Приложение Форума

Реальные примеры: Reddit, Stackoverflow, FreeCodeCamp Forum

Приложение форума – это место, куда мы идем, когда мы хотим получить помощь, и, как программисты, мы посещаем форумы, такие как Reddit и Stack Overflow, чтобы получить ответы на наши вопросы для кодирования.

Форумы также сочетают в себе много элементов приложений в чате и социальных медиа с помощью постов, комментариев и реакций. Форум – это скорее более организованная версия приложения для социальных сетей, где пользователи могут легче найти ответы на вопросы, которые они ищет.

Как построить приложение для форума:

Создайте свой интерфейс с помощью Create-React-App и Backend используя API узла
Используйте базу данных, такую как Postgres или Mongodb, наряду с ORM, как Prisma (Postgres) или Mongoose (MongoDB)
Используйте социальную аутентификацию с Google, Facebook или Twitter, используя паспорт или более простую услугу, такую как AUTH0
Разверните бэкэнд к Heroku, Frontend в NetLify

7. Приложение для потокового музыки

Реальные примеры: Spotify, SoundCloud, Pandora

Так же, как приложения RACT идеально подходят для обслуживания видеоконтента, они также отлично подходят для потоковых носителей, таких как музыка.

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

Таким образом, приложение Treating Music может объединить элементы приложения для совместного использования видео, а также приложение электронной коммерции.

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

Создайте приложение с приложением Create-raction, и создайте бэкэнд с узлом/Express
Используйте HELORALIALION для изображения изображения и видео в облачный API
Используйте базу данных, такую как Postgres или Mongodb, наряду с ORM, как Prisma (Postgres) или Mongoose (MongoDB)
Разверните бэкэнд к Heroku, Frontend в NetLify (или развернуть как на Heroku)

Хотите построить реальные приложения, такие как YouTube, Instagram и Twitter с React? Вот как.

В конце каждого месяца я буду выпустить эксклюзивный курс, показывающий вам, как создать полный клон приложения с реагированием от начала до конца.