React Horizon UI `Firebase`⚡️

Designed for those who like modern UI elements and beautiful websites. Made of hundred of elements, designed blocks and fully coded pages, React Horizon UI is ready to help you create stunning websites and webapps. The product used a Firebase backend for the authentication flow: Social login via Google and the classic user/password auth flow.

🚀 Built with React App Generator for Horizon UI

✅ Modern aesthetics UI design - Designed by Simmmple
✅ Styled with Chakra Ui, Dark-Mode
✅ Full-stack Ready via Firebase
✅ Authentication:
- Google Social Login
- SignIN/SignUP via user/password

Links

👉 React Horizon Firebase - product page
👉 React Horizon Firebase - LIVE Demo
👉 Free Support via Github (issues tracker) and Discord.
✅ PRO Version Available - enhanced UI and more features

How to use it

To use the product Node JS (>= 12.x) is required and GIT to clone/download the project from the public repository.

Step 1 - Clone the project

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

Step 2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

Step 3 - Start in development mode

$ npm run start 
// OR
$ yarn start

Configure Firebase Credentials

App Settings as provided by the Firebase platform - src/config/constants.js

const config = {
    ...
    firebase: {                                               
        apiKey: 'YOUR_API_KEY',                            # <-- YOUR DATA HERE
        authDomain: 'YOUR_DOMAIN_HERE',                    # <-- YOUR DATA HERE 
        projectId: 'YOUR_PROJECT_ID',                      # <-- YOUR DATA HERE
        storageBucket: 'YOUR_STORAGE_BUCKET',              # <-- YOUR DATA HERE
        messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',     # <-- YOUR DATA HERE
        appId: 'YOUR_APP_ID',                              # <-- YOUR DATA HERE
        measurementId: 'YOUR_TRACKER_ID'                   # <-- YOUR DATA HERE
    }
};

All above settings are provided by the Firebase platform. For more information, feel free to access Firebase official help:

Firebase Fundamentals - Learn how to get started fast
Manage Projects in Firebase - the basics

PRO Version

For more components, pages and priority on support, feel free to take a look at this amazing starter:

Designed for those who like modern UI elements and beautiful websites, Horizon UI is ready to help you create stunning websites and webapps. This premium design powered by Chakra UI comes with many examples for pages like NFTs Pages, Authentication Pages, Profile and so on.