DEV Community

Cover image for React Horizon UI - Open-Source Firebase Starter
Sm0ke
Sm0ke

Posted on • Updated on • Originally published at appseed.us

React Horizon UI - Open-Source Firebase Starter

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!

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

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
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Step 2 - Install dependencies

$ npm i
// OR
$ yarn
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ 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'
    }
};
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Step 4 - Start the app

$ npm run start 
// OR
$ yarn start
Enter fullscreen mode Exit fullscreen mode

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.

✨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


πŸ‘‰ Step #2 - Add a name to the project

Firebase - Create project (add name)


πŸ‘‰ Step #3 - Enable / Disable Google 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


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


Thanks for reading! For more resources, please access:

Discussion (10)

Collapse
atulcodex profile image
Atul Prajapati

It looks eye catchy, do you have team or you are the only one man who launches all this rockets :)

Collapse
sm0ke profile image
Sm0ke Author

Hello Atul
We have a generator that helps a team.
πŸš€πŸš€

Collapse
atulcodex profile image
Atul Prajapati

Oh okay ☺️

Collapse
crearesite profile image
WebsiteMarket

Nice UI & powerful backend.

Collapse
sm0ke profile image
Sm0ke Author

πŸš€πŸš€

Collapse
uithemes profile image
ui-themes

Thanks for sharing. The design is really nice

Collapse
sm0ke profile image
Sm0ke Author

πŸš€πŸš€

Collapse
jesusantguerrero profile image
Jesus Guerrero

Very clean a beautiful design sr

Collapse
sm0ke profile image
Sm0ke Author

Ty!
The app is designed by Simmmple.

Collapse
fredy profile image
Fredy Andrei

Awesome! Thanks for sharing this resource! 🀩⚑️