React Horizon UI - Open source Firebase Starter

Publisert av Platon

Følgere: 0

Hei kodere!

Denne artikkelen presenterer en åpen kildekode full-stack starter som bruker et React UI drevet av Firebase for autentiseringslaget. Reager Horizon Firebase kan lastes ned fra Github og basert på den permissive (MIT) lisensen, brukt i kommersielle prosjekter og e-læringsaktiviteter. For nykommere, Reager er et ledende JS-bibliotek som brukes til å kode interaktive brukergrensesnitt og Fire er en populær backend-tjeneste bakt av Google. Thanks for reading!

Dette fantastiske brukergrensesnittet er laget og levert gratis av Enkelt, et kreativt nettbyrå som bruker Charka UI som hovedbibliotek for brukergrensesnitt.

✨ Produktfunksjoner

UI-kodebase drevet av Chakra UI
7 eksempelsider: Dashboard, NFT Market, Brukerprofil
70+ komponenter – godt dokumentert her
Mørk-modus, RTL-støtte
Firebase Backend
Sosial pålogging via Google
Klassisk autentisering (bruker/passord)

Malversjonen (uten autentisering) kan finnes og lastes ned fra den offisielle siden: Horizon UI.

✨ Hvordan bruke produktet

For å bygge produktet i et lokalt miljø, trenger vi noen få grunnleggende verktøy som Git og en anstendig NodeJS-versjon (16.x eller høyere).

👉 Trinn 1 – Klon kildene

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

👉 Trinn 2 – Installasjonsavhengigheter

$ npm i
// OR
$ yarn

👉 Trinn 3 – Konfigurer Firebase-legitimasjonen



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'
    }
};

👉 Trinn 4 – Start appen

$ npm run start 
// OR
$ yarn start

Når oppsettet er fullført, skal vi kunne få tilgang til appen i nettleseren, registrere nye brukere eller autentisere ved hjelp av Googles sosiale pålogging.

React Horizon Firebase - Påloggingsside

React Horizon Firebase – NFT-side

React Horizon Firebase - NFT-side

✨ Firebase-introduksjon

Denne delen presenterer noen nøkkelpunkter i denne fantastiske tjenesten og presenterer også trinnene for å bygge en enkel Firebase-app.

Firebase er en plattform utviklet av Google for å lage mobil- og nettapplikasjoner. Det er en Backend-as-a-Service (BaaS). Det gir utviklere ulike verktøy og tjenester for å hjelpe dem med å utvikle kvalitetsapper og utvide brukerbasen.

Firebase frigjør utviklere til å fokusere på å lage fantastiske brukeropplevelser. Du trenger ikke å administrere servere eller skrive APIer. Firebase er din server, API og datalager; alt skrevet så generisk at du kan endre det for å passe de fleste behov.

✨Hvorfor bruke Firebase

👉 Realtime Database: Firebase sender deg nye data så snart de er oppdatert gjennom WebSockets.
👉 Authentication: Firebase-autentisering har et innebygd e-post-/passordautentiseringssystem som støtter OAuth2 for Google, Facebook, Twitter og GitHub.
👉 Static Files Hosting: Den har en enkel statisk filvertstjeneste som serverer filene dine gjennom CDN, noe som gjør dem tilgjengelige raskere.
👉 Push Notifications: Det hjelper å koble sammen brukerenheter og servere slik at det blir enkelt og pålitelig å sende innfødte/push-varsler.
👉 Analytics: Firebase gir en sømløs måte å integrere med Google Analytics.
👉 Crash Reporting: Den gir også krasjrapportering i sanntid for sanntidsovervåking og retting av feil.
👉 Remote Configuration: Firebase tillater publisering av øyeblikkelige oppdateringer for sluttbrukere gjennom ekstern konfigurasjon.Testlab: Tjenesten hjelper til med å teste applikasjonene dine på ekte og virtuelle enheter levert av Google.