Interface do React Horizon - Firebase Starter de código aberto

Republicado por Platão

seguidores: 0

Olá codificadores!

Este artigo apresenta um iniciador full-stack de código aberto que usa uma UI React desenvolvida pelo Firebase para a camada de autenticação. React Horizon Firebase pode ser baixado do Github e baseado na licença permissiva (MIT), utilizado em projetos comerciais e atividades de eLearning. Para os recém-chegados, Reagir é uma biblioteca JS líder usada para codificar interfaces de usuário interativas e Firebase é um serviço de back-end popular criado pelo Google. Thanks for reading!

Esta incrível UI foi criada e fornecida gratuitamente por Simples, uma agência web criativa que usa Charka UI como a principal biblioteca de UI.

✨ Recursos do produto

Base de código da UI desenvolvida por Chakra UI
7 páginas de amostra: Painel, Mercado NFT, Perfil de usuário
Mais de 70 componentes – bem documentados aqui
Modo escuro, suporte RTL
Back-end do Firebase
Login social via Google
Autenticação Clássica (usuário/senha)

A versão do modelo (sem autenticação) pode ser encontrada e baixada na página oficial: IU do Horizonte.

✨Como usar o produto

Para construir o produto em um ambiente local, precisamos de algumas ferramentas básicas como Git e uma versão decente do NodeJS (16.x ou superior).

👉 Passo 1 – Clonar as fontes

$ git clone https://github.com/app-generator/react-horizon-ui-chakra-firebase.git
$ cd react-horizon-ui-chakra-firebase

👉 Passo 2 – Instalar dependências

$ npm i
// OR
$ yarn

👉 Passo 3 – Configurar as credenciais do Firebase



const config = {
    ...
    firebase: {                                               
        apiKey: 'YOUR_API_KEY',                            
        authDomain: 'YOUR_DOMAIN_HERE',                    
        projectId: 'YOUR_PROJECT_ID',                      
        storageBucket: 'YOUR_STORAGE_BUCKET',              
        messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',     
        appId: 'YOUR_APP_ID',                   
        measurementId: 'YOUR_TRACKER_ID'
    }
};

👉 Passo 4 – Inicie o aplicativo

$ npm run start 
// OR
$ yarn start

Assim que a configuração for concluída, poderemos acessar o aplicativo no navegador, registrar novos usuários ou autenticar usando o login social do Google.

React Horizon Firebase - Página de login

React Horizon Firebase – Página NFT

React Horizon Firebase - Página NFT

✨ Introdução ao Firebase

Esta seção apresenta alguns pontos-chave deste serviço incrível e também apresenta as etapas para construir um aplicativo Firebase simples.

Firebase é uma plataforma desenvolvida pelo Google para criação de aplicativos móveis e web. É um backend como serviço (BaaS). Ele fornece aos desenvolvedores várias ferramentas e serviços para ajudá-los a desenvolver aplicativos de qualidade e aumentar sua base de usuários.

O Firebase libera os desenvolvedores para se concentrarem na criação de experiências de usuário fantásticas. Você não precisa gerenciar servidores ou escrever APIs. Firebase é seu servidor, API e armazenamento de dados; tudo escrito de forma tão genérica que você pode modificá-lo para atender à maioria das suas necessidades.

✨Por que usar o Firebase

👉 Realtime Database: o Firebase envia novos dados assim que são atualizados por meio de WebSockets.
👉 Authentication: o Firebase auth possui um sistema integrado de autenticação de e-mail/senha compatível com OAuth2 para Google, Facebook, Twitter e GitHub.
👉 Static Files Hosting: Possui um serviço fácil de hospedagem de arquivos estáticos que atende seus arquivos por meio de CDN, disponibilizando-os com mais rapidez.
👉 Push Notifications: ajuda a conectar dispositivos e servidores de usuários para que o envio de notificações nativas/push se torne simples e confiável.
👉 Analytics: o Firebase oferece uma maneira perfeita de integração com o Google Analytics.
👉 Crash Reporting: Ele também fornece relatórios de falhas em tempo real para monitoramento e correção de bugs em tempo real.
👉 Remote Configuration: Firebase permite publicar atualizações instantâneas para usuários finais por meio de configuração remota. Laboratório de testes: o serviço ajuda a testar seus aplicativos em dispositivos reais e virtuais fornecidos pelo Google.