React Horizon UI – Firebase Starter з відкритим кодом

Перевидано Платоном

читають: 0

Привіт кодери!

У цій статті представлено програму повного стеку з відкритим кодом, яка використовує React UI на базі Firebase для рівня автентифікації. React Horizon Firebase можна завантажити з Github і базується на дозвільній ліцензії (MIT), використовується в комерційних проектах і заходах електронного навчання. Для новачків, Реагувати є провідною бібліотекою JS, яка використовується для кодування інтерактивних інтерфейсів користувача та Firebase — популярний серверний сервіс від Google. Thanks for reading!

Цей дивовижний інтерфейс користувача створений і надається безкоштовно компанією Просто, креативна веб-агенція, яка використовує Charka UI як основну бібліотеку UI.

✨ Особливості продукту

Кодова база інтерфейсу користувача на базі інтерфейсу користувача Chakra
7 прикладів сторінок: інформаційна панель, ринок NFT, профіль користувача
70+ компонентів – добре задокументовано тут
Темний режим, підтримка RTL
Сервер Firebase
Соціальний вхід через Google
Класична автентифікація (користувач/пароль)

Версію шаблону (без аутентифікації) можна знайти та завантажити з офіційної сторінки: Інтерфейс Horizon.

✨ Як користуватися продуктом

Щоб створити продукт у локальному середовищі, нам знадобляться кілька базових інструментів, як-от Git, і гідна версія NodeJS (16.x або новіша).

👉 крок 1 – Клонуйте джерела

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

👉 крок 2 – Встановити залежності

$ npm i
// OR
$ yarn

👉 крок 3 – Налаштуйте облікові дані 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'
    }
};

👉 крок 4 – Запустіть програму

$ npm run start 
// OR
$ yarn start

Після завершення налаштування ми зможемо отримати доступ до програми у веб-переглядачі, зареєструвати нових користувачів або автентифікуватись за допомогою соціального входу Google.

React Horizon Firebase – сторінка входу

React Horizon Firebase – сторінка NFT

React Horizon Firebase – сторінка NFT

✨ Вступ до Firebase

У цьому розділі представлено кілька ключових моментів цієї дивовижної служби, а також описано, як створити простий додаток Firebase.

Firebase — це платформа, розроблена Google для створення мобільних і веб-додатків. Це Backend-as-a-Service (BaaS). Він надає розробникам різні інструменти та послуги, які допомагають їм розробляти якісні програми та розширювати базу користувачів.

Firebase дозволяє розробникам зосередитися на створенні фантастичного досвіду для користувачів. Вам не потрібно керувати серверами чи писати API. Firebase — це ваш сервер, API і сховище даних; все написано настільки загально, що ви можете змінити його відповідно до більшості своїх потреб.

✨Навіщо використовувати Firebase

👉 Realtime Database: Firebase надсилає вам нові дані, щойно вони оновлюються через WebSockets.
👉 Authentication: Firebase auth має вбудовану систему автентифікації електронної пошти/пароля, яка підтримує OAuth2 для Google, Facebook, Twitter і GitHub.
👉 Static Files Hosting: Він має простий статичний файловий хостинг, який обслуговує ваші файли через CDN, роблячи їх доступними швидше.
👉 Push Notifications: це допомагає підключити пристрої користувачів і сервери, щоб надсилання власних/push-повідомлень стало простим і надійним.
👉 Analytics: Firebase забезпечує бездоганний спосіб інтеграції з аналітикою Google.
👉 Crash Reporting: він також надає звіти про збої в реальному часі для моніторингу в реальному часі та виправлення помилок.
👉 Remote Configuration: Firebase дозволяє миттєво публікувати оновлення для кінцевих користувачів через віддалену конфігурацію. Лабораторія тестування: служба допомагає тестувати ваші програми на реальних і віртуальних пристроях, наданих Google.