React Horizon UI - 오픈 소스 Firebase 스타터

플라톤에 의해 재발행

팔로워 : 0

안녕하세요 코더입니다!

이 기사에서는 인증 계층에 Firebase에서 제공하는 React UI를 사용하는 오픈 소스 풀 스택 스타터를 제공합니다. 리액트 호라이즌 파이어베이스 Github에서 다운로드할 수 있으며 상업용 프로젝트 및 eLearning 활동에 사용되는 MIT(Permissive) 라이선스를 기반으로 합니다. 신입사원의 경우, 반응 대화형 사용자 인터페이스를 코딩하는 데 사용되는 선도적인 JS 라이브러리이며 중포 기지 Google에서 만든 인기 있는 백엔드 서비스입니다. Thanks for reading!

이 놀라운 UI는 다음에서 무료로 제작 및 제공됩니다. 심플, Charka UI를 메인 UI 라이브러리로 사용하는 크리에이티브 웹 에이전시입니다.

✨ 제품 특징

Chakra UI로 구동되는 UI 코드베이스
7개의 샘플 페이지: 대시보드, NFT 마켓, 사용자 프로필
70개 이상의 구성 요소 – 여기에 잘 설명되어 있습니다.
다크 모드, RTL 지원
Firebase 백엔드
Google을 통한 소셜 로그인
클래식 인증(사용자/비밀번호)

템플릿 버전(인증 없음)은 공식 페이지에서 찾아 다운로드할 수 있습니다. 호라이즌 UI.

✨ 제품 사용 방법

로컬 환경에서 제품을 빌드하려면 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에서 개발한 플랫폼입니다. BaaS(Backend-as-a-Service)입니다. 개발자에게 양질의 앱을 개발하고 사용자 기반을 확장하는 데 도움이 되는 다양한 도구와 서비스를 제공합니다.

Firebase를 사용하면 개발자가 환상적인 사용자 경험을 만드는 데 집중할 수 있습니다. 서버를 관리하거나 API를 작성할 필요가 없습니다. Firebase는 서버, API 및 데이터 저장소입니다. 모두 너무 일반적으로 작성되어 대부분의 필요에 맞게 수정할 수 있습니다.

✨Firebase를 사용하는 이유

👉 Realtime Database: Firebase는 WebSocket을 통해 업데이트되는 즉시 새 데이터를 보냅니다.
👉 Authentication: Firebase 인증에는 Google, Facebook, Twitter 및 GitHub에 대해 OAuth2를 지원하는 이메일/비밀번호 인증 시스템이 내장되어 있습니다.
👉 Static Files Hosting: CDN을 통해 파일을 제공하여 더 빠르게 사용할 수 있도록 하는 간편한 정적 파일 호스팅 서비스가 있습니다.
👉 Push Notifications: 사용자의 기기와 서버를 연결하여 네이티브/푸시 알림을 간단하고 안정적으로 보낼 수 있도록 도와줍니다.
👉 Analytics: Firebase는 Google 애널리틱스와 원활하게 통합할 수 있는 방법을 제공합니다.
👉 Crash Reporting: 실시간 모니터링 및 버그 수정을 위한 실시간 크래시 보고 기능도 제공합니다.
👉 Remote Configuration: Firebase를 사용하면 원격 구성을 통해 최종 사용자를 위한 즉각적인 업데이트를 게시할 수 있습니다. 테스트 랩: 이 서비스는 Google에서 제공하는 실제 및 가상 기기에서 애플리케이션을 테스트하는 데 도움이 됩니다.