React NodeJS Purity – Open-source Full-Stack Seed Undertaking




Hiya Coders!

This text presents an open-source full-stack mission crafted on high of a pixel-perfect Chakra UI design utilizing React and Node JS. Purity Dashboard may be downloaded from Github below the MIT license and used for limitless interest & business initiatives. The product is in-built two-tier sample the place the React UI is decoupled from the backend and communicates securely utilizing JWT tokens managed by the Node JS Backend.

Thanks for studying! – Content material supplied by App Generator.






✨ Product Options

This full-stack prepared seed product comes with a couple of helpful options out-of-the-box that may assist rookies, and never solely, to code and ship quicker a brand new end-product utilizing fashionable applied sciences.

  • Trendy UI – Purity Dashboard, crafted by Inventive-Tim
  • JWT Authentication Movement – Login, Logout, Register strategies
  • Manufacturing-ready API Server – Node JS/Specific
  • Docker assist for backend and the frontend
  • Free assist by way of Github (points tracker) and Discord

Purity UI Dashboard is constructed with over 70 frontend particular person components, like buttons, inputs, navbars, nav tabs, playing cards, or alerts, providing you with the liberty of selecting and mixing. All parts can take variations in coloration, that you may simply modify utilizing Chakra’s model props.

Designed for many who like fashionable UI components and exquisite web sites, Purity UI Dashboard is prepared that will help you create beautiful apps and dashboards. This Free Chakra UI Dashboard is coming with prebuilt design blocks, so the development course of is seamless, switching from our pages to the true web site may be very simple to be completed.


Purity React Dashboard – Person Profile

React Node JS Purity - Profile Page.


Purity React Dashboard – Billing Web page

React Node JS Purity - Billing Page




✨ The best way to use the product

This open-source product is an entire full-stack seed product that covers all layers from the UI to the database utilizing a two-tier structure:

  • React Frontend (Purity Template)
  • JWT Authentication: customers can register, Signal IN, and logout
  • Node JS Backend: accountable with persistence

As a way to use the product, we have to construct each components: the API backend and the React Frontend. Each components are already configured to work and talk utilizing suitable settings.




Begin the Backend Server

Step #1 – Clone the Node JS Backend from Github

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

Exit fullscreen mode

Step #2 – Set up dependencies by way of NPM or Yarn

$ npm i
// OR
$ yarn
Enter fullscreen mode

Exit fullscreen mode

Step #3 – Run the SQLite migration by way of TypeORM

$ yarn typeorm migration:run
Enter fullscreen mode

Exit fullscreen mode

Step #4 – Begin the API server (development mode)

$ npm dev
// OR
$ yarn dev
Enter fullscreen mode

Exit fullscreen mode

Step #5 – Manufacturing Construct (information generated in construct listing)

$ npm construct
// OR
$ yarn construct
Enter fullscreen mode

Exit fullscreen mode

Step #6 – Begin the API server for manufacturing (information served from construct/index.js)

$ npm begin
// OR
$ yarn begin
Enter fullscreen mode

Exit fullscreen mode

At this level we should always be capable of take a look at the API server utilizing POSTMAN or every other command line software like curl to create and authenticate new customers by sending requests with bellow signatures:

Registerapi/customers/register

POST api/customers/register
Content material-Kind: software/json

{
    "username":"take a look at",
    "password":"cross", 
    "e mail":"take a look [email protected]"
}
Enter fullscreen mode

Exit fullscreen mode

Loginapi/customers/login

POST /api/customers/login
Content material-Kind: software/json

{
    "password":"cross", 
    "e mail":"take a look [email protected]"
}
Enter fullscreen mode

Exit fullscreen mode




Begin the React UI

Step #1 – Clone Purity React (from Github)

$ git clone https://github.com/app-generator/react-purity-ui-dashboard.git
$ cd react-purity-ui-dashboard
Enter fullscreen mode

Exit fullscreen mode

Step #2 – Set up dependencies by way of NPM or yarn

$ npm i
// OR
$ yarn
Enter fullscreen mode

Exit fullscreen mode

Step #3 – Begin in development mode

$ npm run begin 
// OR
$ yarn begin
Enter fullscreen mode

Exit fullscreen mode


Configure the backend server

The product comes with a usable JWT Authentication move that gives solely the essential requests: login/logout/register.

API Server URLsrc/config/fixed.js

const config = {
    ...
    API_SERVER: 'http://localhost:5000/api/'  // <-- The magic line
};
Enter fullscreen mode

Exit fullscreen mode

As soon as the React UI is up & working, we should always see the login web page:

React Node Purity Dashboard - Login Page.


Thanks for Studying! For extra assets, be happy to entry:



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#React #NodeJS #Purity #Opensource #FullStack #Seed #Undertaking