React Horizon UI - Open-Source Firebase Starter
Tags: webdev, react, firebase, opensource
Published: 2022-07-01 14:51:47

---
title: React Horizon UI - Open-Source Firebase Starter
published: true
description: Open-Source starter built on top of React and Firebase - Horizon UI comes with social login via Google.
tags: webdev, react, firebase, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtxtj0ib54n50899a8kw.jpg
canonical_url: https://appseed.us/product/horizon-ui/firebase/
---
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](https://appseed.us/product/horizon-ui/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](https://appseed.us/product/horizon-ui/firebase/) - product page
- 👉 [React Horizon Firebase](https://react-horizon-firebase.appseed-srv1.com/) - LIVE Demo

This amazing UI is crafted and provided for free by [Simmmple](https://simmmple.com/), a creative web agency that uses Charka UI as the main UI library.

---

![React Horizon Firebase - Mobile View (mobile view)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73l2v6uh5iucj1licwy1.png)

---
 
## ✨ 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](https://horizon-ui.com/).

--- 

## ✨ 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

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

> 👉 **Step 2** - Install dependencies

```bash
$ npm i
// OR
$ yarn
```

> 👉 **Step 3** - Configure the Firebase credentials

```javascript
// 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 

```bash
$ 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zedv1wxjz8sjyr128p7.png)

---

> React Horizon Firebase - NFT Page

![React Horizon Firebase - NFT Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/my1yblyijsdoadiwjj6c.png)

---

## ✨ 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](https://console.firebase.google.com/). Once we are authenticated, we need to create a "New project".

![Firebase - Create project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fpm7nyc4632h4sri09q.png)
 
---

> 👉 **Step #2** - Add a name to the project   

![Firebase - Create project (add name)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfs7a2p36b92g7yi6tk8.png)

---

> 👉 **Step #3** - Enable / Disable Google Analytics

![Firebase Create project - Edit Analytics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aow4i5bdrqooq53nlvy4.png)

---

> 👉 **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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ctoe72nj60yu3cqpd75.png)

---

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyy3zaynwmjrffn03u7u.png)

---

> `Thanks for reading!` For more resources, please access:

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and [React](https://appseed.us/apps/react)
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products