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

React Horizon UI PRO - Premium Full-Stack Project | AppSeed

React Horizon PRO 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 - Product Page
• 👉 React Horizon UI PRO - LIVE Demo

🚀 Features:

• ✅ Modern aesthetics UI design - Designed by Simmmple
• ✅ 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 - open-source product
• Flask API Server - open-source product
• Node JS API Server - 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 (requires a purchase)

$ unzip react-horizon-ui-chakra-pro.zip
$ cd react-horizon-ui-chakra-pro

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

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

• API POSTMAN Collection - 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 - source code
• Node JS API - product page

Compile the API Server

Step 1 - Clone the project

$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs

Step #2 - Install dependencies via NPM or Yarn

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

$ npm run dev
// OR
$ yarn dev

The API server will start using the PORT specified in .env file (default 5000).

---

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

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

Runtime Errors (Windows 10) - Node 14.x / Yarn 1.22.5

During the yarn start command, the app starts with a black screen and many errors in the JS console.

Also, the console bumps
many Error: ENOENT: no such file or directory, open 'D:\work\repo-pro\priv-react-horizon-ui-chakra-pro\node_modules\react-bootstrap-sweetalert\src\styles\SweetAlertStyles.ts' .. warning & errors.

Browser Screen-Shot

Error Log

WARNING in ./node_modules/react-bootstrap-sweetalert/dist/components/Buttons.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\work\repo-pro\priv-react-horizon-ui-chakra-pro\node_modules\react-bootstrap-sweetalert\src\components\Buttons.tsx' file: Error: ENOENT: no such file or directory, open 'D:\work\repo-pro\priv-react-horizon-ui-chakra-pro\node_modules\react-bootstrap-sweetalert\src\components\Buttons.tsx'
 @ ./node_modules/react-bootstrap-sweetalert/dist/components/SweetAlert.js 104:32-52
 @ ./node_modules/react-bootstrap-sweetalert/dist/index.js 13:35-69
 @ ./src/layouts/ProtectedRoute.js 10:0-52 23:32-42
 @ ./src/index.js 15:0-58 35:43-57

WARNING in ./node_modules/react-bootstrap-sweetalert/dist/components/Content.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\work\repo-pro\priv-react-horizon-ui-chakra-pro\node_modules\react-bootstrap-sweetalert\src\components\Content.tsx' file: Error: ENOENT: no such file or directory, open 'D:\work\repo-pro\priv-react-horizon-ui-chakra-pro\node_modules\react-bootstrap-sweetalert\src\components\Content.tsx'
 @ ./node_modules/react-bootstrap-sweetalert/dist/components/SweetAlert.js 112:32-52
 @ ./node_modules/react-bootstrap-sweetalert/dist/index.js 13:35-69
 @ ./src/layouts/ProtectedRoute.js 10:0-52 23:32-42
 @ ./src/index.js 15:0-58 35:43-57

Latest Version Update - Messages Page

Asked in Discord