twitter clone

Clon de Twitter incorporado a continuación. JS + TypeScript + Tailwind CSS utilizando Firestore y almacenamiento en la nube

Vista previa?

showcase.mp4

Características

• Autenticación con autenticación de Firebase
• Componentes reaccionados fuertemente mecanografiados con mecanografiado
• Los usuarios pueden agregar tweets, como, retweet y responder
• Los usuarios pueden eliminar tweets, agregar un tweet a los marcadores y fijar su tweet
• Los usuarios pueden agregar imágenes y gifs para tuitear
• Los usuarios pueden seguir y dejar de seguir a otros usuarios
• Los usuarios pueden ver sus y otros seguidores y la siguiente lista
• Los usuarios pueden ver a todos los usuarios y la lista de tendencias
• Actualización de tiempo real me gusta, retweets y perfil de usuario
• Datos de tendencia en tiempo real de la API de Twitter
• El usuario puede editar su perfil
• Diseño receptivo para dispositivos móviles, tabletas y de escritorio
• Los usuarios pueden personalizar el esquema de color del sitio y el fondo de color
• Todas las cargas de imágenes se almacenan en el almacenamiento de la nube de Firebase

Tecnología?

• Next.js
• Mecanografiado
• CSS de viento de cola
• Firebase
• SWR
• UI sin cabeza
• Reaccionar tostadas calientes
• Movimiento del marco

Desarrollo

Estos son los pasos para ejecutar el proyecto localmente.

1. Clonar el repositorio

   git clone https://github.com/ccrsxx/twitter-clone.git

2. Instalar dependencias

   npm i

3. Cree un proyecto Firebase y seleccione la aplicación web

4. Agregue su configuración de Firebase al .env.development . Tenga en cuenta que NEXT_PUBLIC_MEASUREMENT_ID es opcional

5. Asegúrese de haber habilitado los siguientes servicios de Firebase:

   • Autenticación. Habilite el método de inicio de sesión de Google.
   • Cloud Firestore. Cree una base de datos y establezca su ubicación en la región más cercana.
   • Almacenamiento en la nube. Crea un cubo de almacenamiento.

6. Instale Firebase CLI a nivel mundial

   npm i -g firebase-tools

7. Inicie sesión en Firebase

   firebase login

8. Obtenga su ID de proyecto

   firebase projects:list

9. Seleccione su ID de proyecto

   firebase use your-project-id

10. En este punto, tienes dos opciones. Ejecute este proyecto usando la Firebase en la nube o localmente usando el emulador.

    1. Usando el backend de la nube de Firebase:

       1. Implementar reglas de Firestore, índices de Firestore y reglas de almacenamiento en la nube

          firebase deploy --except functions

       2. Ejecutar el proyecto

          npm run dev

    2. Uso del emulador local de Firebase:

       1. Instale Java JDK versión 11 o superior antes de continuar. Esto se requiere para ejecutar los emuladores.

       2. Establezca la variable de entorno NEXT_PUBLIC_USE_EMULATOR en true en .env.development . Esto hará que la aplicación use los emuladores en lugar del backend de la nube.

       3. En este punto, puede ejecutar el siguiente comando para tener un clon de Twitter completamente funcional que se ejecuta localmente:

          npm run dev:emulators

Nota : Cuando implementa reglas de índices de Firestore, puede tardar unos minutos en completarse. Entonces, antes de que los índices estén habilitados, recibirá un error cuando obtenga los datos de Firestore.

Puede verificar el estado de sus índices de Firestore con el siguiente enlace, reemplazar your-project-id con su ID de proyecto: https://console.firebase.google.com/u/0/project/your-project-id/firestore/indexes

Opcional:

• Si desea obtener datos de tendencia de la API de Twitter, debe crear una cuenta de desarrollador de Twitter y obtener sus claves API. Luego agregue sus claves API a .env.development . ¿Espero que Elon Musk no haga que esta API pague?
• Si desea que las estadísticas del usuario se sincronicen con los tweets eliminados, debe habilitar las funciones en la nube para Firebase. Luego implementa las funciones de la nube.