7 проектов на React, которые стоит создать в 2021 году

Перевод статьи «7 React Projects You Should Build in 2021».

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

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

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

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

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

1. Приложение для переписки в режиме реального времени

Примеры: Slack, Messenger, Discord, Crisp Chat.

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

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

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

• Создайте ваш проект при помощи create-react-app или Next.js.
• Используйте сервис вроде Firebase или GraphQL для создания и получения сообщений в режиме реального времени.
• Добавьте реакции на сообщения (эмодзи), используя npm-пакет emoji-mart.
• Разверните приложение в вебе, используя Firebase Tools.

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

Примеры: Facebook, Twitter, Instagram.

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

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

Как создать социальную сеть:

• Создайте фронтенд приложения при помощи create-react-app, а бэкенд — при помощи Node API.
• Используйте базу данных, например Postgres или MongoDB, а также ORM вроде Prisma (Postgres) или Mongoose (MongoDB).
• Используйте социальную аутентификацию при помощи Google, Facebook или Twitter. Тут вам поможет Passport или более простой сервис, вроде Auth0.
• Разверните бэкенд на Heroku, а фронтенд — на Netlify.

3. Приложение e-commerce

Примеры: Shopify, Etsy, интернет-магазин Dev.to.

Интернет-магазины позволяют совершать покупки онлайн. Приложения e-commerce дают пользователям возможность добавлять товары в корзину и удалять их, просматривать корзину, оплачивать покупки кредитной картой или при помощи систем платежей, таких как Google Pay и Apple Pay.

Если хотите чем-то вдохновиться, обращайте внимание на простые интернет-магазины, например, Shopify, а не на торговых гигантов вроде Amazon или Walmart.

Как создать приложение e-commerce:

• Создайте приложение при помощи create-react-app или Next.js.
• Добавьте npm-пакет stripe, плюс use-shopping-cart — чтобы без труда напрямую управлять платежами при помощи Stripe Checkout.
• Постройте Node API для управления созданием сессий при помощи Stripe.
• Разверните бэкенд на Heroku, а фронтенд — на Netlify (или сделайте деплоймент обеих частей на Heroku).

4. Приложение для расшаривания видео

Примеры: YouTube, TikTok, Snapchat.

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

Например, есть YouTube, позволяющий искать всевозможные видео, созданные пользователями. А TikTok и Snapchat дают нам возможность просматривать видео других людей, записанные в более коротком и доступном формате. К тому же в этих приложениях большую роль играют социальные взаимодействия в виде лайков и просмотров.

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

• Создайте приложение при помощи create-react-app, а бэкенд — при помощи Node/Express.
• Используйте Cloudinary для загрузки изображений и видео в Cloudinary API.
• Используйте базы данных, например Postgres или MongoDB, а также ORM вроде Prisma (Postgres) или Mongoose (MongoDB).
• Разверните бэкенд на Heroku, а фронтенд — на Netlify (или сделайте деплоймент обеих частей на Heroku).

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

Примеры: Medium, Dev.to, HashNode.

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

Благодаря таким инструментам, как Gatsby или Nextjs (оба — фреймворки React), создавать подобные приложения стало проще, чем когда-либо.

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

• Создайте приложение при помощи Gatsby or Next.js.
• Используйте markdown для разметки постов. Тут вам поможет специальный плагин remark.
• Разверните сайт на Netlify или Vercel.

6. Приложение-форум

Примеры: Reddit, StackOverflow, форум freeCodeCamp.

Форум — это приложение, в которое вы заходите в поисках помощи. Например, мы (программисты) ходим на Reddit и Stack Overflow. Там можно задать вопрос, связанный с разработкой, и получить ответы.

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

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

• Фронтенд создайте при помощи create-react-app, а бэкенд — используя Node API.
• Используйте базы данных, например Postgres или MongoDB, а также ORM вроде Prisma (Postgres) или Mongoose (MongoDB).
• Используйте социальную аутентификацию при помощи Google, Facebook или Twitter. Тут вам поможет Passport или более простой сервис вроде Auth0.
• Разверните бэкенд на Heroku, а фронтенд — на Netlify.

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

Примеры: Spotify, Soundcloud, Pandora.

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

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

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

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

• Создайте приложение при помощи create-react-app, а бэкенд — при помощи Node/Express.
• Используйте Cloudinary для загрузки изображений и видео в Cloudinary API.
• Используйте базы данных, например Postgres или MongoDB, а также ORM вроде Prisma (Postgres) или Mongoose (MongoDB).
• Разверните бэкенд на Heroku, а фронтенд — на Netlify (или сделайте деплоймент обеих частей на Heroku).

Успехов!

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]