Crea tu propio TikTok con React Native y Django

Desarrolla tu propia red social con Django, React Native, JWT, Cloudinary, API Context, custom Hooks, y mucho más...

4.58 (6 reviews)
Udemy
platform
Español
language
Mobile Apps
category
174
students
22 hours
content
Jul 2022
last update
$84.99
regular price

What you will learn

Crea una app tipo TIKTOK

Crear API REST con Django Rest Framework

Añadir sistema JWT en el sistema de autenticación

Implementar Cloudinary para gestionar los ficheros multimedia

Sistema de navegación con React Native

Sistema de autenticación con Context y custom Hooks

DarkMode y LightMode

Validaciones y control de formularios con Yup y Formik

Publicación de videos

Sistema de Followers

Sistema de comentaros en videos publicados

Sistema de likes

Integración de un sistema de búsqueda de usuarios

Generar .APK y .IPA

Desplegar backends en heroku

Description

Gracias a este curso aprenderás desde los conceptos básicos de React Native, hasta los más avanzados para crear una APPs completas como una red social como TikTok.

Aprenderás a desarrollar tu propio backend con Python y Django desde cero y así ser consumido por aplicaciones de terceros como puede ser nuestra app en React Native,

Una vez terminado el curso serás capaz de generar cualquier tipo de aplicación móvil conectada a una base de datos sin necesidad de ayuda.

Aprenderemos a como trabajo con fichero de video e imagen en React Native y Django.

Conectaremos un servicio de bucket como es Cloudinary a nuestra app para subir de manera automática todos los assets de la app como pueden ser imaganes y videos.


  • Serás capaz de desarrollar cualquier aplicación móvil para Android y iOS

  • Crea una app tipo TIKTOK

  • Crear API REST con Django Rest Framework

  • Añadir sistema JWT en el sistema de autenticación

  • Implementar Cloudinary para gestionar los ficheros multimedia

  • Sistema de navegación con React Native

  • Sistema de autenticación con Context y custom Hooks

  • DarkMode y LightMode

  • Validaciones y control de formularios con Yup y Formik

  • Publicación de videos

  • Sistema de Followers

  • Sistema de comentaros en videos publicados

  • Sistema de likes

  • Integración de un sistema de búsqueda de usuarios

  • Generar .APK y .IPA

  • Desplegar backends en heroku

Lo mejor de todo, es que este curso no acaba aquí, va a tener continuas actualizaciones para ir mejorando la aplicación cada vez mucho más.

Screenshots

Crea tu propio TikTok con React Native y Django - Screenshot_01Crea tu propio TikTok con React Native y Django - Screenshot_02Crea tu propio TikTok con React Native y Django - Screenshot_03Crea tu propio TikTok con React Native y Django - Screenshot_04

Content

Introducción

Resultado final de la app
Repositorio del proyecto

Entorno de desarrollo

Extensiones para Visual Studio Code
Instalando Node
Instalando Yarn
Instalando Python

Creando los proyectos Backend y Frontend

Creando el entorno virtual de python
Creando el proyecto de Django
Creando el usuario administrador en django
Override del modelo usuario
Documentación de la API automatica
Instalando Django Rest Framework
Creando la app con React Native
Ejecutando React Native en iOS
Ejecutando React Native en Android

Dark y Light Mode

Instalando React Navigation
Instalando React Native Elements
Creando el ThemeContext
Configuration DarkTheme y LightTheme
Hook para controlar el DarkMode
Guardando configuración del usuario
StatusBar Theme
Navigation Theme

Sistema de autenticación

Añadir una IP local al servidor
Modelo de usuario
Cloudinary y Static Files
Endpoint para registrar usuarios
Endpoint de Login con JWT
Navegación de usuario no autenticado
AuthScreen
Formulario de registro
Validando formulario de registro
Creando la validación noSpacing
Logica para crear un usuario
Formulario de login
Validando formulario de login
Logica para logear
Contexto de la autenticación
Ejecutando el login del Context
Recuperando la sesión del usuario
Comprobando los tokens de sesión
Función para cerrar sesión

Navegación de la zona de usuarios

Creando el TabNavigation
Definiendo las screen del TabNavigation
Creando todos los Stacks del TabNavigation
Añadiendo iconos y titulos al TabNavigation
Screen Globales

Publicación de videos

Crenado la app video en Django
Modelo y Admin del video
Endpoints para crear y obtener publicaciones
Ordenar resultado de una petición
Añadiendo sistema de filtros
Obteniendo los datos del usuario del video
Selecionando video para publicar
Formulario publicación de video
Estado y validaciones del formulario
Selecionando imagen del video
Publicando un nuevo video

Feed de publicaciones

Menu de la home
Obteniendo los videos nuevos
Animación swipe para pasar entre videos
Estructura de la publicación
Reproductor de video
Iniciando y pausando video con el swipe
Info Component
TimeLine del video
VideoFeed aceptando styles del padre
Profile Component
Like Component
Función para formatear numero a K M
Comment Component
Share Component
Acción del Profile
Following Videos

Sistema para compartir

Endpoint para actualizar los datos de un video
Abriendo la opción de compartir
Actualizando contado de share

Sistema de likes

Modelo del VideoLike
Endpoints para el VideoLike
Comprobando si le has dado a like
Creando el like
Actualizando el contado de likes
Recargando el like de la screen
Eliminando un like

Sistema de comentarios

Modelo para los comentarios
Creando los endpoints
Abriendo bloque de comentarios
Header del bloque
Obteniendo los comentarios del video
Renderizando comentarios
Mostrando el total de comentarios
Pintando el comentario
Formateando la fecha del comentario
Eliminando comentarios
Recargando comentarios
Input para enviar comentarios
Moviendo el input encima del keyboard
Enviando el comentario
Fix fecha del comentario

Perfil de la cuenta

Endpoint para obtener mis datos
Endpoint para actualizar los datos del usuario
Estructura de la screen del perfil del usuario
Obteniendo los datos del usuario
Header
Follows
Settings
Info
Tab videos inicial
Obteniendo los videos subidos
Listando videos
Obteniendo video favoritos
Listando videos

Ajustes de la cuenta

Obteniendo los dato del usuario
Dark y Light Mode
Botón para cerrar sesión
Avatar del usuario
Actualizando el avatar
Opciones de los ajustes
Logica para actualizar cualquier dato del usuario
Actualizando nombre
Actualizar descripción
Actualizando sitio web
Actualizando el instagram

Perfil del usuario

Endpoint para obtener usuarios
Obteniendo los datos del usuario
Header del perfil
Follows y Social
Componente Social
Videos subidos y favoritos

Sistema de followers

Modelo follow
Endpoint para obtener, crear y eliminar
Endpoint para contar a cuantos seguimos
Endpoint para contar cuantos nos siguen
Obteniendo a quien seguimos
Obteniendo seguidores
Comprobar si seguimos a un usuario
Seguir a otros usuarios
Follow en el perfil
Dejar de seguir a un usuario
Obteniendo los usuario que el perfil sigue
Pintando lista de usuarios
Obteniendo seguidores de un usuario
Fix carga de video al cambiar de perfil

Feed de videos Publicados y Favoritos

Obteniendo los video publicados del usuario
Renderizando los videos publicados
Obteniendo los videos favoritos de un usuario
Renderizando los videos favoritos

Sistema de amigos

Añadir sistema de búsqueda al endpoint
Logica para buscar usuarios
Añadiendo el buscador
Renderizando usuarios

Feed video de amigos

Endpoint para obtener los videos
Feed video de amigos

Sistema de notificaciones

Modelo de notificaciones
Creando endpoint GET, POST y PATCH
Creando Notificación del LIKE
Creando Notificación del COMMENT
Creando Notificación del SHRED
Creando Notificación del FOLLOW
Obteniendo las notificaciones
Notificaciones vistas o no vistas
Renderizando notificaciones
Recargando notificaciones
Renderizando notificación COMMENT
Marcar como leída la notificación
Ir a la acción
Screen del video
Renderizando notificación FOLLOW
Renderizando notificación LIKE
Renderizando notificación SHARED

Deploy

Desplegando Django en Heroku
Solucionando los statics de Django
Probando la app con el nuevo server
Cambiar Splash Screen y Icon
Compilando para Android
Compilando para iOS

Coupons

DateDiscountStatus
7/5/202289% OFF
expired
7/14/202288% OFF
expired
4690292
udemy ID
5/17/2022
course created date
6/22/2022
course indexed date
Bot
course submited by