Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/app-generator/react-horizon-ui-chakra-firebase
React Horizon UI Firebase - Open-Source Full-Stack Starter | AppSeed
https://github.com/app-generator/react-horizon-ui-chakra-firebase
appseed chakra-ui firebase reactjs
Last synced: 2 months ago
JSON representation
React Horizon UI Firebase - Open-Source Full-Stack Starter | AppSeed
- Host: GitHub
- URL: https://github.com/app-generator/react-horizon-ui-chakra-firebase
- Owner: app-generator
- License: mit
- Created: 2022-04-28T17:47:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-29T06:22:12.000Z (over 1 year ago)
- Last Synced: 2024-10-11T04:43:59.031Z (3 months ago)
- Topics: appseed, chakra-ui, firebase, reactjs
- Language: JavaScript
- Homepage: https://appseed.us/product/horizon-ui/firebase/
- Size: 2.1 MB
- Stars: 18
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# [React Horizon UI](https://appseed.us/product/horizon-ui/firebase/) `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](https://appseed.us/product/horizon-ui/firebase/)** 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](https://appseed.us/generator/react/)** for *[Horizon UI](https://appseed.us/generator/react/horizon-ui/)*
- ✅ Modern aesthetics UI design - Designed by *[Simmmple](https://simmmple.com/)*
- ✅ Styled with `Chakra Ui`, `Dark-Mode`
- ✅ **Full-stack Ready** via **Firebase**
- ✅ Authentication:
- Google Social Login
- `SignIN/SignUP` via `user/password`
> Links
- 👉 [React Horizon Firebase](https://appseed.us/product/horizon-ui/firebase/) - `product page`
- 👉 [React Horizon Firebase](https://react-horizon-firebase.appseed-srv1.com) - LIVE Demo
- 👉 Free Support via Github (issues tracker) and [Discord](https://discord.gg/fZC6hup).
- ✅ [PRO Version Available](#pro-version) - `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
```bash
$ 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
```bash
$ npm i
// OR
$ yarn
```
**Step 3** - Start in development mode
```bash
$ npm run start
// OR
$ yarn start
```
## Configure Firebase Credentials
**App Settings** as provided by the Firebase platform - `src/config/constants.js`
```javascript
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](https://firebase.google.com/docs) help:
- [Firebase Fundamentals](https://firebase.google.com/docs/guides) - Learn how to get started fast
- [Manage Projects in Firebase](https://firebase.google.com/docs/projects/learn-more) - 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](https://appseed.us/product/horizon-ui-pro/full-stack/) - Product Page
- ✅ `Enhanced UI` - more pages and components
- ✅ `Priority` on support
---
[React Horizon UI](https://appseed.us/product/horizon-ui/firebase/) `Firebase` - Provided by Simmmple and **AppSeed [App Generator](https://appseed.us/generator)**.