DEV Community

Cover image for React Horizon UI - Open-Source Full-Stack Starter
Sm0ke
Sm0ke

Posted on • Updated on • Originally published at appseed.us

React Horizon UI - Open-Source Full-Stack Starter

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:

Discussion (12)

Collapse
ahmad_butt_faa7e5cc876ea7 profile image
Ahmad

very nice! great animations too

my only minor suggestion would be to use fade in and fade out animation upon changing the navigation. I notice Apple does this and it looks classy! thanks for making it opensource!

Collapse
sm0ke profile image
Sm0ke Author

Noted. Ty for your feedback

Collapse
andrewbaisden profile image
Andrew Baisden

Wow cool design!

Collapse
sm0ke profile image
Sm0ke Author

ty

Collapse
rarestoma profile image
rarestoma

Awesome design! Any timeline for when it will be added to the App Generator?

Collapse
sm0ke profile image
Sm0ke Author

Ty Rares!
Yep, the integration into the generator is scheduled for next week.
🚀🚀

Collapse
uithemes profile image
ui-themes

quite a complete design. ty

Collapse
sm0ke profile image
Sm0ke Author

🚀🚀

Collapse
crearesite profile image
WebsiteMarket

Looks really nice.

Collapse
sm0ke profile image
Sm0ke Author

🚀🚀

Collapse
fredy profile image
Fredy Andrei

😍😍🚀

Collapse
sm0ke profile image
Sm0ke Author

:)