React Horizon UI - Open-Source Firebase Starter

Published Jul 01, 2022

Hello coders!

This article presents an open-source full-stack starter that uses a React UI powered by Firebase for the authentication layer. React Horizon Firebase can be downloaded from Github and based on the permissive (MIT) license, used in commercial projects and eLearning activities. For newcomers, React is a leading JS library used to code interactive user interfaces and Firebase is a popular backend service baked by Google. Thanks for reading!

👉 React Horizon Firebase - product page
👉 React Horizon Firebase - LIVE Demo

This amazing UI is crafted and provided for free by Simmmple, a creative web agency that uses Charka UI as the main UI library.

React Horizon Firebase - Mobile View (mobile view)

✨ Product Features

UI codebase powered by Chakra UI
7 sample pages: Dashboard, NFT Market, User Profile
70+ Components - nicely documented here
Dark-Mode, RTL Support
Firebase Backend
Social Login via Google
Classic Authentication (user/password)

The template version (without authentication) can be found and downloaded from the official page: Horizon UI.

✨ How to use the product

To build the product in a local environment, we need a few basic tools like Git and a decent NodeJS version (16.x or higher).

👉 Step 1 - Clone the sources

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

👉 Step 2 - Install dependencies

$ npm i
// OR
$ yarn

👉 Step 3 - Configure the Firebase credentials

// Contents of src/config/constants.js

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

👉 Step 4 - Start the app

$ npm run start 
// OR
$ yarn start

Once the set up is complete, we should be able to access the app in the browser, register new users, or authenticate using Google social login.

React Horizon Firebase - Sign In Page

React Horizon Firebase - NFT Page

React Horizon Firebase - NFT Page

✨ Firebase Introduction

This section presents a few key points of this amazing service and also presents the steps to build a simple Firebase app.

Firebase is a platform developed by Google for creating mobile and web applications. It is a Backend-as-a-Service (BaaS). It provides developers with various tools and services to help them develop quality apps and grow their user base.

Firebase frees developers to focus on crafting fantastic user experiences. You don’t need to manage servers or write APIs. Firebase is your server, API, and datastore; all written so generically that you can modify it to suit most of your needs.

✨Why using Firebase

👉 Realtime Database: Firebase sends you new data as soon as it’s updated through WebSockets.
👉 Authentication: Firebase auth has a built-in email/password authentication system that supports OAuth2 for Google, Facebook, Twitter, and GitHub.
👉 Static Files Hosting: It has an easy static File Hosting service that serves your files through CDN, making them available faster.
👉 Push Notifications: It helps connect user devices and servers so that sending native/push notifications becomes simple and reliable.
👉 Analytics: Firebase provides a seamless way to integrate with Google analytics.
👉 Crash Reporting: It also provides real-time crash reporting for real-time monitoring and fixing bugs.
👉 Remote Configuration: Firebase allows publishing instant updates for end-users through remote configuration.Test Lab: The service helps test your applications on real and virtual devices provided by Google.