https://github.com/app-generator/react-horizon-ui-chakra-pro
React Horizon UI PRO - Premium Full-Stack Project | AppSeed
https://github.com/app-generator/react-horizon-ui-chakra-pro
fullstack horizon-ui react
Last synced: 4 days ago
JSON representation
React Horizon UI PRO - Premium Full-Stack Project | AppSeed
- Host: GitHub
- URL: https://github.com/app-generator/react-horizon-ui-chakra-pro
- Owner: app-generator
- License: other
- Created: 2022-05-03T15:45:42.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-06T15:17:35.000Z (about 2 years ago)
- Last Synced: 2025-04-06T18:13:32.952Z (2 months ago)
- Topics: fullstack, horizon-ui, react
- Homepage: https://appseed.us/product/horizon-ui-pro/full-stack/
- Size: 10.7 KB
- Stars: 2
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [React Horizon PRO](https://appseed.us/product/horizon-ui-pro/full-stack/) `Full-Stack`
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.
The product comes with a simple JWT authentication flow: `login`/`register`/`logout` powered by an open-source **Node JS API** Backend via `Passport` Library.
- 👉 [React Horizon UI PRO](https://appseed.us/product/horizon-ui-pro/full-stack/) - `Product Page`
- 👉 [React Horizon UI PRO](https://react-horizon-pro.onrender.com/) - `LIVE Demo`
> 🚀 Features:
- ✅ Modern aesthetics UI design - Designed by *[Simmmple](https://simmmple.com/)*
- ✅ Styled with `Chakra Ui`, `Dark-Mode`
- ✅ Authentication: JWT Login/Register/Logout
- ✅ **Full-stack Ready** using a **Node JS API Server** (open-source project) - Server Features
- `Typescript` / SQLite Persistence / TypeORM / Joy (validation)
- Passport library - `passport-jwt` strategy.
> **Note**: This product can be used with other API Servers for a complete full-stack experience. **ALL API servers use a unified interface**
- [Django API Server](https://github.com/app-generator/api-server-django) - open-source product
- [Flask API Server](https://github.com/app-generator/api-server-flask) - open-source product
- [Node JS API Server](https://github.com/app-generator/api-server-nodejs) - open-source product / Typescript / SQLite / TypeORM / Joy for validation
## How to use it
To use the product Node JS 14.x or higher is required.
> **Step 1** - Download the sources from the official [product page](https://appseed.us/product/horizon-ui-pro/full-stack/) (requires a `purchase`)
```bash
$ unzip react-horizon-ui-chakra-pro.zip
$ cd react-horizon-ui-chakra-pro
```
> **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 the backend server
The product comes with a usable JWT Authentication flow that provides only the basic requests: login/logout/register.
**API Server URL** - `src/config/constant.js`
```javascript
const config = {
...
API_SERVER: 'http://localhost:5000/api/' // <-- The magic line
};
```
**API Server Descriptor** - POSTMAN Collection
The API Server signature is provided by the [Unified API Definition](https://docs.appseed.us/boilerplate-code/api-unified-definition)
- [API POSTMAN Collection](https://github.com/app-generator/api-server-unified/blob/main/api.postman_collection.json) - can be used to mock (simulate) the backend server or code a new one in your preferred framework.
## Node JS API Server
The product is also open-source and is already configured to work with Berry Dashboard Template - product features:
- Typescript / `NodeJS` / `Express` Server
- JWT authentication (`passport-jwt` strategy)
- Persistence: `SQLite` / `TypeORM`
> Links
- [Node JS API](https://github.com/app-generator/api-server-nodejs) - source code
- [Node JS API](https://appseed.us/boilerplate-code/nodejs-starter) - product page
### Compile the API Server
**Step 1** - Clone the project
```bash
$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs
```
**Step #2** - Install dependencies via NPM or Yarn
```bash
$ npm i
// OR
$ yarn
```
**Step 3** - Run the SQLite migration via TypeORM
```
$ npm run typeorm migration:run
// OR
$ yarn typeorm migration:run
```
**Step 4** - Start the API server (development mode)
```bash
$ npm run dev
// OR
$ yarn dev
```
The API server will start using the `PORT` specified in `.env` file (default 5000).
---
[React Horizon UI PRO](https://appseed.us/product/horizon-ui-pro/full-stack/) - Provided by Simmmple and **AppSeed [App Generator](https://appseed.us/generator)**.