DESIGNER_DEV

Estudio de caso

Clon de X (Twitter)

Proyecto academico colaborativo orientado a replicar funcionalidades clave de una red social: autenticacion, feed, navegacion por secciones y publicacion de contenido.

Galería

Deslizá para ver más

1 / 4

  • Captura 1 del proyecto Clon de X (Twitter)

    Login

    Vista de login.

  • Captura 2 del proyecto Clon de X (Twitter)

    Inicio De Sesion

    Vista de inicio de sesion.

  • Captura 3 del proyecto Clon de X (Twitter)

    Feed

    Vista de feed.

  • Captura 4 del proyecto Clon de X (Twitter)

    Feed2

    Vista de feed2.

El problema

Construir una aplicacion tipo red social con una experiencia moderna, permitiendo acceso seguro de usuarios y una interfaz consistente para navegar entre multiples secciones (home, explore, notifications, profile, etc.).

La solución

Se desarrollo una SPA en React con rutas protegidas por estado de autenticacion de Firebase. Se implemento un flujo de login/registro con email y contrasena y acceso social con Google, conectado al estado global para persistir datos de sesion en la interfaz.

Detalles técnicos

Front-end

  • React
  • Vite
  • React Router
  • MUI
  • React Icons
  • Bootstrap
  • Redux Toolkit

Back-end / servicios

  • Firebase Authentication
  • Firebase Firestore

APIs integradas

  • Giphy API
  • Pexels API
  • Random User API

Funcionalidades principales

  • Registro e inicio de sesion con email/contrasena
  • Inicio de sesion con Google (GoogleAuthProvider + signInWithPopup)
  • Control de sesion con onAuthStateChanged
  • Feed con publicaciones desde Firestore
  • Creacion de contenido y render de mensajes en tiempo real de UI
  • Secciones estilo Twitter: Home, Explore, Notifications, Messages y Profile
  • Integracion de contenido multimedia externo (GIFs e imagenes)

Mi aporte

  • Diseño e implementacion de pantalla de login responsive con enfoque visual tipo Twitter
  • Integracion de Firebase Auth para registro e inicio de sesion
  • Implementacion de Google Sign-In en frontend
  • Conexion del flujo de autenticacion con navegacion (/home) y estado global (Redux)
  • Colaboracion en la coherencia visual general de la experiencia web

Resultado

  • MVP funcional de red social con autenticacion real
  • Navegacion multipagina y consumo de datos desde Firestore/APIs externas
  • Objetivos del curso cumplidos demostrando integracion entre UI moderna y servicios cloud

Demo

  • https://grupo-8-clone.netlify.app/