app-generator/react-horizon-ui-chakra-firebase

React Horizon UI Firebase - Open-Source Full-Stack Starter | AppSeed

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.

• 👉 React Horizon UI PRO - Product Page
  • ✅ Enhanced UI - more pages and components
  • ✅ Priority on support

---

React Horizon UI Firebase - Provided by Simmmple and AppSeed App Generator.

react-horizon-ui-chakra-firebase's Issues

Sign UP - Not working

The users should be able to register a new account using email / password credentials

How to use the project

Hello @umarali

Please update the README with usage information (beginners level)

https://github.com/app-generator/react-horizon-ui-chakra-firebase#how-to-use-the-project

Ty!

Sign IN using Wrong Credentials - No message sent to the user

If the user tries to authenticate with the wrong user/password, there is no message bumped in the page.

patch
The UI should display a meaningful text to the user.

Live sample from the non-firebase version