twitter clone

Clone do Twitter incorporado em Next.js + TypeScript + Tailwind CSS usando a nuvem Firestore e armazenamento

Visualização?

showcase.mp4

Características

• Autenticação com autenticação de Firebase
• Componentes reagidos fortemente digitados com o TypeScript
• Os usuários podem adicionar tweets, como, retweet e responder
• Os usuários podem excluir tweets, adicionar um tweet aos favoritos e fixar seu tweet
• Os usuários podem adicionar imagens e gifs ao tweet
• Os usuários podem seguir e deixar de seguir outros usuários
• Os usuários podem ver seus e outros seguidores e a seguinte lista
• Os usuários podem ver todos os usuários e a lista de tendências
• Atualização em tempo real gosta, retweets e perfil de usuário
• Dados de tendência em tempo real da API do Twitter
• O usuário pode editar seu perfil
• Design responsivo para celular, tablet e desktop
• Os usuários podem personalizar o esquema de cores do site e o fundo colorido
• Todos os uploads de imagens são armazenados no Firebase Cloud Storage

Tecnologia?

• Next.js
• TypeScript
• Tailwind CSS
• Firebase
• SWR
• Ui sem cabeça
• Reaja a torrada quente
• Motivo de Framer

Desenvolvimento

Aqui estão as etapas para executar o projeto localmente.

1. Clone o repositório

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

2. Instalar dependências

   npm i

3. Crie um projeto Firebase e selecione o aplicativo da web

4. Adicione sua configuração de Firebase ao .env.development . Observe que NEXT_PUBLIC_MEASUREMENT_ID é opcional

5. Certifique -se de ativar os seguintes serviços de Firebase:

   • Autenticação. Ative o método de assinatura do Google.
   • Cloud Firestore. Crie um banco de dados e defina sua localização para a região mais próxima.
   • Armazenamento em nuvem. Crie um balde de armazenamento.

6. Instale o Firebase CLI globalmente

   npm i -g firebase-tools

7. Faça login no Firebase

   firebase login

8. Obtenha seu ID do projeto

   firebase projects:list

9. Selecione o seu ID do projeto

   firebase use your-project-id

10. Neste ponto, você tem duas opções. Execute este projeto usando o Firebase na nuvem ou utilizando localmente o emulador.

    1. Usando o back -end do Firebase Cloud:

       1. Implantar regras de Firestore, índices de Firestore e regras de armazenamento em nuvem

          firebase deploy --except functions

       2. Execute o projeto

          npm run dev

    2. Usando o Emulador Local do Firebase:

       1. Instale o Java JDK versão 11 ou superior antes de prosseguir. Isso é necessário para executar os emuladores.

       2. Defina a variável de ambiente NEXT_PUBLIC_USE_EMULATOR como true em .env.development . Isso fará com que o aplicativo use os emuladores em vez do back -end da nuvem.

       3. Neste ponto, você pode executar o seguinte comando para ter um clone totalmente funcional do Twitter funcionando localmente:

          npm run dev:emulators

Nota : Quando você implanta regras de índices da Firestore, pode levar alguns minutos para ser concluído. Portanto, antes que os índices sejam ativados, você receberá um erro ao buscar os dados do Firestore.

Você pode verificar o status dos seus índices de Firestore com o link abaixo, substituir your-project-id pelo seu ID do projeto: https://console.firebase.google.com/u/0/project/your-project-id/firestore/indexes

Opcional:

• Se você deseja obter dados de tendências da API do Twitter, precisa criar uma conta de desenvolvedor do Twitter e obter suas chaves da API. Em seguida, adicione suas chaves da API ao .env.development . Espero que Elon Musk não faça essa API pagar?
• Se você deseja fazer as estatísticas do usuário sincronizadas com os tweets excluídos, precisará ativar as funções da nuvem para o FireBase. Em seguida, implante as funções da nuvem.