React Horizon UI - Open-Source Full-Stack Starter
Tags: react, webdev, opensource
Published: 2022-06-18 09:53:21

---
title: React Horizon UI - Open-Source Full-Stack Starter
published: true
description: Open-Source full-stack starter crafted on top of Chakra UI, react, and powered by a simple NodeJS API Server.
tags: react, webdev, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqdsssbu19yjosez2eb1.jpg
canonical_url: https://appseed.us/product/horizon-ui/api-server-nodejs/
---
Hello Coders!

This article presents an open-source `React Full-Stack starter` that uses `Chakra` as the UI framework and `NodeJS` for the API backend logic. **[React Horizon UI](https://appseed.us/product/horizon-ui/api-server-nodejs/)**, released under the MIT license on Github, can be used in commercial projects or eLearning activities. For newcomers, **React** is a leading JS library for coding interactive user interfaces baked by Facebook. 

<br />

> Thanks for reading!

- 👉 [React Horizon UI](https://appseed.us/product/horizon-ui/api-server-nodejs/) - `product page`
- 👉 [React Horizon UI](https://react-horizon-ui-chakra.appseed-srv1.com/#/auth/sign-in/default) - `LIVE demo`

This amazing UI is crafted and provided for free by Simmmple, a creative web agency that uses Charka UI as the main UI library.

---

> ✅ [React Generator Horizon UI](https://appseed.us/generator/react/horizon-ui/) - Free tool to generate a new project and customize the backend - [VIDEO presentation](https://www.youtube.com/watch?v=eUCmkhsxOM4)

---

![React Horizon UI (full-stack) - Mobile View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmpu5i2goi1779g5yzr9.png)

---

## ✨ UI Features

- UI codebase powered by `Chakra UI`
- `7 sample pages`: Dashboard, NFT Market, User Profile
- `70+ Components` - nicely documented [here](https://horizon-ui.com/components/)
- `Dark-Mode`, `RTL Support`
- Active versioning and [support](https://appseed.us/)

The template version (without authentication) can be found and downloaded from the official page: [Horizon UI](https://horizon-ui.com/).

---

## ✨ How to use the product

To build the product in a local environment, we need a few basic tools like Git and a decent NodeJS version (16.x or higher).

> 👉 **Step 1** - Clone the project

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

---

> 👉 **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
```

---

Once the UI is up and running, the next step is to start the API backend server that manages the users: [Node JS API](https://github.com/app-generator/api-server-nodejs) (also an open-source project)

> 👉 `Download` and `start` the API server

```bash
$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs
$
$ # Install Dependencies 
$ yarn
$
$ # Migrate the database
$ yarn typeorm migration:run
$
$ # Start the API server
$ yarn dev
```

At this point, with the UI and the backend server `up & running` we should be able to access the UI, register new users, and authenticate.

![React Horizon UI (full-stack) - Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umw103u8uo58hnwjocw8.png)

---

> **React UI Horizon** - NFT market page

![React Horizon UI (full-stack) - Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9aj32uomb2i00yv2kyq0.png)

---

> **React UI Horizon** - User profile

![React Horizon UI (full-stack) - User Profile Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eve5caspoh3math11xi8.png)

---

> `Thanks for reading!` For more resources and support, please access:

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and [React](https://appseed.us/apps/react)
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products