React Horizon UI - Open-Source Firebase Starter

Genudgivet af Platon

Abonnenter: 0

Hej kodere!

Denne artikel præsenterer en open source full-stack starter, der bruger en React UI drevet af Firebase til godkendelseslaget. Reager Horizon Firebase kan downloades fra Github og er baseret på den permissive (MIT) licens, der bruges i kommercielle projekter og eLearning-aktiviteter. For nytilkomne, Reagerer er et førende JS-bibliotek, der bruges til at kode interaktive brugergrænseflader og Firebase er en populær backend-tjeneste bagt af Google. Thanks for reading!

Denne fantastiske brugergrænseflade er lavet og leveret gratis af Simpelt, et kreativt webbureau, der bruger Charka UI som det primære UI-bibliotek.

✨ Produktfunktioner

UI-kodebase drevet af Chakra UI
7 eksempelsider: Dashboard, NFT Market, Brugerprofil
70+ komponenter – pænt dokumenteret her
Dark-Mode, RTL Support
Firebase -backend
Socialt login via Google
Klassisk godkendelse (bruger/adgangskode)

Skabelonversionen (uden godkendelse) kan findes og downloades fra den officielle side: Horizon UI.

✨ Sådan bruger du produktet

For at bygge produktet i et lokalt miljø har vi brug for et par grundlæggende værktøjer som Git og en anstændig NodeJS-version (16.x eller højere).

???? Trin 1 – Klon kilderne

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

???? Trin 2 – Installationsafhængigheder

$ npm i
// OR
$ yarn

???? Trin 3 – Konfigurer Firebase-legitimationsoplysningerne



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

???? Trin 4 – Start appen

$ npm run start 
// OR
$ yarn start

Når opsætningen er fuldført, bør vi være i stand til at få adgang til appen i browseren, registrere nye brugere eller godkende ved hjælp af Google socialt login.

React Horizon Firebase - Log ind-side

React Horizon Firebase – NFT-side

React Horizon Firebase - NFT-side

✨ Firebase-introduktion

Dette afsnit præsenterer et par nøglepunkter i denne fantastiske tjeneste og præsenterer også trinene til at bygge en simpel Firebase-app.

Firebase er en platform udviklet af Google til at skabe mobil- og webapplikationer. Det er en Backend-as-a-Service (BaaS). Det giver udviklere forskellige værktøjer og tjenester til at hjælpe dem med at udvikle kvalitetsapps og udvide deres brugerbase.

Firebase frigør udviklere til at fokusere på at skabe fantastiske brugeroplevelser. Du behøver ikke at administrere servere eller skrive API'er. Firebase er din server, API og datalager; alt sammen skrevet så generisk, at du kan ændre det, så det passer til de fleste af dine behov.

✨Hvorfor bruge Firebase

???? Realtime Database: Firebase sender dig nye data, så snart de er opdateret via WebSockets.
???? Authentication: Firebase-autentificering har et indbygget e-mail/adgangskodegodkendelsessystem, der understøtter OAuth2 til Google, Facebook, Twitter og GitHub.
???? Static Files Hosting: Den har en nem statisk filhostingtjeneste, der serverer dine filer via CDN, hvilket gør dem tilgængelige hurtigere.
???? Push Notifications: Det hjælper med at forbinde brugerenheder og servere, så det bliver enkelt og pålideligt at sende indbyggede/push-meddelelser.
???? Analytics: Firebase giver en problemfri måde at integrere med Google Analytics.
???? Crash Reporting: Det giver også nedbrudsrapportering i realtid til overvågning i realtid og rettelse af fejl.
???? Remote Configuration: Firebase tillader udgivelse af øjeblikkelige opdateringer til slutbrugere gennem fjernkonfiguration. Testlaboratorium: Tjenesten hjælper med at teste dine applikationer på rigtige og virtuelle enheder leveret af Google.