React Horizon UI - Open-Source Full-Stack Starter

Sm0ke - Jun 18 '22 - - Dev Community

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

Thanks for reading!

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 - Free tool to generate a new project and customize the backend - VIDEO presentation

React Horizon UI (full-stack) - Mobile View

✨ UI Features

  • UI codebase powered by Chakra UI
  • 7 sample pages: Dashboard, NFT Market, User Profile
  • 70+ Components - nicely documented here
  • Dark-Mode, RTL Support
  • Active versioning and support

The template version (without authentication) can be found and downloaded from the official page: Horizon UI.

✨ 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

$ git clone https://github.com/app-generator/react-horizon-ui-chakra.git
$ cd react-horizon-ui-chakra
Enter fullscreen mode Exit fullscreen mode

👉 Step 2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn
Enter fullscreen mode Exit fullscreen mode

👉 Step 3 - Start in development mode

$ npm run start 
// OR
$ yarn start
Enter fullscreen mode Exit fullscreen mode

Once the UI is up and running, the next step is to start the API backend server that manages the users: Node JS API (also an open-source project)

👉 Download and start the API server

$ 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
Enter fullscreen mode Exit fullscreen mode

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

React UI Horizon - NFT market page

React Horizon UI (full-stack) - Login Page

React UI Horizon - User profile

React Horizon UI (full-stack) - User Profile Page

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

Image
JavaScript Design Patterns - Behavioral - Memento

programming, javascript, beginners
Image
SearchBoosters - Top SEO Company in Noida

sprint, digitech, digitechnoida, digitalmarketingagencyin
Image
Mastering the Simple Past Tense: Essential Grammar for Effective Communication

englishgrammar, simplepasttense, languagelearning, writingtips
Image
Magento 2 Slack Notifier Module

magneto, php, magento2, slack
Image
A100 vs 4090: Choosing the Best GPU for Your Needs
Image
Master LLM Sentiment Analysis: A Simple Guide
Image
Fixing Package Dependencies

ember, javascript, showdev, opensource
Image
In Austin this weekend? Join the AI Community Hackathon!

genai, machinelearning, hackathon, ai
Image
What you need to know about the trends in data science in 2024
Image
Part 2: Which distro should I choose when moving to Linux?

linux, ubuntu, archlinux, bash
Image
Understanding the importance of binding the port in Dockerfile

django, docker
Image
Power Automate Chinese Teaching website

powerautomate
Image
Outsourcing and In-house Hiring for Android Developers

android
Image
Increasing Construction Activities facilitate Global Copper Busbar Market Growth

copperbusbar, buildingandcounstruction, inkwoodresaerch, marketreasearchreport
Image
Managing Static Assets in Public Directory vs Imports

webdev, vite, javascript, react
Image
Join 711batbook: Your Ultimate Destination for Live Sports and More

livescore, betting, cricket, cricketlivescore
Image
Ultimate Guide to Mastering JavaScript Array Methods

javascript, beginners, tutorial, opensource
Image
Common SOC Challenges and How to Overcome Them

soc, security, cybersecurity, infosec
Image
Ultimate Guide to Mastering JavaScript Object Methods

javascript, beginners, tutorial, 100daysofcode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player