React Horizon UI - Starter Firebase open-source

Republicat de Platon

Urmaritori: 0

Salutare programatori!

Acest articol prezintă un starter full-stack open-source care utilizează o interfață de utilizare React alimentată de Firebase pentru stratul de autentificare. Reacționează Horizon Firebase poate fi descărcat de pe Github și pe baza licenței permisive (MIT), utilizat în proiecte comerciale și activități de eLearning. Pentru noii veniți, Reacţiona este o bibliotecă JS de vârf folosită pentru a codifica interfețele utilizator interactive și Firebase este un serviciu de backend popular creat de Google. Thanks for reading!

Această interfață uimitoare este creată și oferită gratuit de Simplu, o agenție web creativă care folosește Charka UI ca principală bibliotecă UI.

✨ Caracteristicile produsului

Baza de cod UI alimentată de Chakra UI
7 exemple de pagini: tablou de bord, piață NFT, profil utilizator
Peste 70 de componente – frumos documentate aici
Mod întunecat, suport RTL
Firebase Backend
Conectare socială prin Google
Autentificare clasică (utilizator/parolă)

Versiunea șablonului (fără autentificare) poate fi găsită și descărcată de pe pagina oficială: Horizon UI.

✨ Cum se utilizează produsul

Pentru a construi produsul într-un mediu local, avem nevoie de câteva instrumente de bază, cum ar fi Git și o versiune decentă NodeJS (16.x sau mai mare).

???? Etapa 1 – Clonează sursele

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

???? Etapa 2 – Instalați dependențe

$ npm i
// OR
$ yarn

???? Etapa 3 – Configurați acreditările 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'
    }
};

???? Etapa 4 – Porniți aplicația

$ npm run start 
// OR
$ yarn start

Odată finalizată configurarea, ar trebui să putem accesa aplicația în browser, să înregistrăm noi utilizatori sau să ne autentificăm folosind autentificarea socială Google.

React Horizon Firebase - Pagina de conectare

React Horizon Firebase – Pagina NFT

React Horizon Firebase - Pagina NFT

✨ Introducere Firebase

Această secțiune prezintă câteva puncte cheie ale acestui serviciu uimitor și, de asemenea, prezintă pașii pentru a construi o aplicație Firebase simplă.

Firebase este o platformă dezvoltată de Google pentru crearea de aplicații mobile și web. Este un Backend-as-a-Service (BaaS). Oferă dezvoltatorilor diverse instrumente și servicii pentru a-i ajuta să dezvolte aplicații de calitate și să-și dezvolte baza de utilizatori.

Firebase îi eliberează pe dezvoltatori să se concentreze pe crearea unor experiențe fantastice pentru utilizatori. Nu trebuie să gestionați servere sau să scrieți API-uri. Firebase este serverul, API-ul și depozitul de date; toate scrise atât de generic încât îl puteți modifica pentru a se potrivi cu majoritatea nevoilor dvs.

✨De ce să folosiți Firebase

???? Realtime Database: Firebase vă trimite date noi de îndată ce sunt actualizate prin WebSockets.
???? Authentication: Firebase auth are un sistem de autentificare de e-mail/parolă încorporat care acceptă OAuth2 pentru Google, Facebook, Twitter și GitHub.
???? Static Files Hosting: Are un serviciu facil de găzduire a fișierelor static, care vă servește fișierele prin CDN, făcându-le disponibile mai rapid.
???? Push Notifications: ajută la conectarea dispozitivelor și serverelor utilizatorilor, astfel încât trimiterea notificărilor native/push să devină simplă și fiabilă.
???? Analytics: Firebase oferă o modalitate simplă de integrare cu Google Analytics.
???? Crash Reporting: oferă, de asemenea, raportare în timp real a erorilor pentru monitorizarea în timp real și remedierea erorilor.
???? Remote Configuration: Firebase permite publicarea de actualizări instantanee pentru utilizatorii finali prin configurarea de la distanță. Laboratorul de testare: serviciul vă ajută să vă testați aplicațiile pe dispozitive reale și virtuale furnizate de Google.