Копия Тинькофф Банк на React Native (typescript, firebase, tailwind, dayjs)

В этом видео мы на практике сделаем полную копию Тинькофф Банка на React Native с typescript, firebase, tailwind, dayjs.

Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 250 лайков и я снимаю следующую полную копию!

Разработаем крутое приложение на React Native, в качестве базы данных и авторизации будем использовать Firebase v9. Навигацию с помощью React Navigation и сделаем Stack Navigator. Кроме этого сделаем крутой дизайн, где иконки возьмем из Expo vector icons. Сделаем приятный градиент с помощью Expo linear gradient. Поработаем с форматом даты через dayjs. Встроим tailwind в React Native для удобного написания стилей. Реализуем функционал сторис как в инстаграм.

Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!

Тайм коды:
00:00:00 - Начало из солнечной Греции
00:00:42 - ДЕМО
00:07:25 - Какие будут технологии?
00:08:52 - Инициализация проекта
00:10:33 - Установка зависимостей
00:11:51 - Структура проекта
00:12:56 - Конфиг Firebase
00:14:58 - Авторизация/Auth Provider
00:25:23 - Навигация
00:32:58 - Layout
00:35:18 - Авторизация/Форма
00:37:20 - UI/Loader
00:38:00 - UI/Field
00:41:25 - UI/Button
00:43:51 - Авторизация/Функционал формы
00:47:14 - Профиль на главной
00:53:38 - Получение профиля из базы данных
00:59:46 - Страница профиля
01:03:56 - Обновление профиля
01:08:06 - Главная/Stories
01:20:00 - Реализация открытия Stories
01:27:30 - Главная/Банковские карты
01:33:53 - Оформление карты
01:43:17 - Главная/Компонент карты
01:52:26 - Реализация нижней навигации
02:06:04 - Страница платежей
02:16:27 - Вывод всех пользователей из БД
02:24:38 - Перевод пользователю по номеру карты
02:32:05 - Страница сервисов с кэшбэком
02:39:59 - Функция рандомного градиента
02:41:11 - Страница чат с поддержкой
02:44:00 - Получаем сообщения с сервера
02:47:13 - Хедер в чате
02:48:57 - Компонент сообщения
02:50:42 - Отправка сообщения
02:53:41 - Подгрузка курса валюты по API
03:02:10 - Меню в разделе More
03:05:06 - Спасибо за просмотр!

#RedGroup #React #ReactNative #ТинькоффБанк #Тинькофф

👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔

[REDGroup]

Если есть какие то фишки по этой теме - дай знать в 💬 комментариях!

Тайм коды:
00:00:00 - Начало из солнечной Греции
00:00:42 - ДЕМО
00:07:25 - Какие будут технологии?
00:08:52 - Инициализация проекта
00:10:33 - Установка зависимостей
00:11:51 - Структура проекта
00:12:56 - Конфиг Firebase
00:14:58 - Авторизация/Auth Provider
00:25:23 - Навигация
00:32:58 - Layout
00:35:18 - Авторизация/Форма
00:37:20 - UI/Loader
00:38:00 - UI/Field
00:41:25 - UI/Button
00:43:51 - Авторизация/Функционал формы
00:47:14 - Профиль на главной
00:53:38 - Получение профиля из базы данных
00:59:46 - Страница профиля
01:03:56 - Обновление профиля
01:08:06 - Главная/Stories
01:20:00 - Реализация открытия Stories
01:27:30 - Главная/Банковские карты
01:33:53 - Оформление карты
01:43:17 - Главная/Компонент карты
01:52:26 - Реализация нижней навигации
02:06:04 - Страница платежей
02:16:27 - Вывод всех пользователей из БД
02:24:38 - Перевод пользователю по номеру карты
02:32:05 - Страница сервисов с кэшбэком
02:39:59 - Функция рандомного градиента
02:41:11 - Страница чат с поддержкой
02:44:00 - Получаем сообщения с сервера
02:47:13 - Хедер в чате
02:48:57 - Компонент сообщения
02:50:42 - Отправка сообщения
02:53:41 - Подгрузка курса валюты по API
03:02:10 - Меню в разделе More
03:05:06 - Спасибо за просмотр!

[GigaChad-zsol]

блин чувак вот это огонь спасибо за труд!

[dramarec]

🔥🚀 Твой канал находка для меня и подарок на НГ!!!))) Благодарю и желаю удачи в развитии канала!!!!

[kennyg]

Лайк, подписка, колокольчик 👍
Видео топовое, спасибо большое!

[onlynowmotivation]

Спасибо большое!!! Это невероятно ценное видео! Я скачаю даже;))

[alexey]

Отличный контент. Большое спасибо за труд!

[tiktoker]

На этот раз я лежу без слов от видео, классное видео просто топ в наше время

[mrsuhrob]

После этого все, Тинькофф увольняют все свои программисты )) можно же писать за 3 часа они тратили куча времени

[hightvformal]

Пушка даже есть идея сделать подобное приложение для гостинницы

[tylllehka]

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

[fkingbug]

Блин ты очень крут ) может делать как арчаков ? делать ролики по 30 минут ? и проект делать за несколько видео, если это так выматывает .

[komilolimov]

Четко четко спасибо тебе все понятливо обьяснил, это было потрясающе, разобрался со многими инфами, не останавливайся

[romankozlov]

Спасибо за видео! Было бы интересно посмотреть реализацию stories

[olegkovalenko]

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

[ДимаМариненко-ъю]

Для тех кто столкнется с проблемой регистрации, ВАЖНО firebase по умолчанию требует пароль от 6 символов, странно, но алерт не появлялся с данной ошибкой, только в прилетевших ответных пакетах уже сам обнаружил проблему, может кому поможет)

[vitalex]

Большое спасибо. Сделал полностью все приложение. Единственное, на 2:38:13 ты говорил про сайт, с готовыми примерами вертски для RN. Было бы классно, если поделился ссылкой на этот сайт

[KolhoznyjPank]

Видос топ. Реакт нейтив не так уж и плох в связке с тайлвинд.

[nezamovanim]

А сделай копию электронного журнала (Элжур)

[senya_sweety]

Это просто Ахуенно. 😂
Работаю на шарпе, недавно надо было что-то подправить на фронте (react). После этого начал искать информацию и нашел твои видосы.
Сам react native не оч сложный, а с твоими видео вообще как сказка 👍

[semenburov]

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