React Horizon UI - Open-Source Firebase Starter

Open-Source starter built on top of React and Firebase - Horizon UI comes with social login via Google - Sources published on Github.

React Horizon Firebase - Open-Source Full-Stack Starter
React Horizon Firebase - Open-Source Full-Stack Starter

Hello! 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!

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)
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).

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 - 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.

✨How to configure a Firebase app

The first thing is to create a Firebase account and access the Console. Once we are authenticated, we need to create a "New project".

Firebase - Create project
Firebase - Create project

Step #2 - Add a name to the project
Firebase - Create project (add name)
Firebase - Create project (add name)

Step #3 - Enable / Disable Google Analytics
Firebase Create project - Edit Analytics
Firebase Create project - Edit Analytics

Step #4 - Confirm the project creation

After the project has been created, you will be automatically redirected to the project.

Step #5 - Generate a client for this project

Select a platform (Android / iOS / Web) for which you want to create a client application for this project.

Firebase Project - Generate Client
Firebase Project - Generate Client

Once we provide the name for the client app, we should have access to the credentials used in the Horizon Frontend.

Firebase Project - Client App Credentials
Firebase Project - Client App Credentials

Thanks for reading! For more resources and support, please access: