react

React Datta Able - Open-Source Full-stack Product

An open-source full-stack product that uses a modern React UI and a simple Node JS API backend. Sources available on Github (MIT License)

Editor

Jul 21, 2021 • 2 min read

React Datta Able - Open-source full-stack product

Hello! This article presents an open-source full-stack product that uses a colorful React UI enhanced with a JWT authentication flow powered by a Node JS Backend. For those unfamiliar with Node JS, the React UI can be used with Django or Flask because the API definition is replicated across multiple backends. (FASTapi is coming soon) Thanks for Reading!

React Node JS Datta Able - product page
React Node JS Datta Able - LIVE Demo
Standalone Node JS API backend - sources
Standalone Django API backend - sources
Standalone Flask API backend - sources

A modern dashboard page with a left menu and many colorful widgets and charts, all provided by Datta Able,ea fullstack product crafted in React and Node JS. — React Datta Able - Open-source Full-Stack Starter

How To Use the Product

The product docs provide the full information regarding the build in a local environment in all major operating systems. The backend usage is optional but recommended because the UI is already configured to work with any API server from the above list: Node JS, Django, or Flask. The API descriptor can be downloaded from Github and eventually used to mock (simulate) the backend server using POSTMAN.

Build the API Backend

This article explains the build of the Node JS API by following the instructions provided in the README and official docs.

Step #1 - Clone the sources

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

Step #2 - Install Dependencies

$ npm i
// OR
$ yarn

Step #3 - Run the SQLite Migration (via TypeORM)

$ yarn typeorm migration:run

Step #4 - Start for development

$ npm dev
// OR
$ yarn dev

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

Node JS API Server - Open-source APi server provided by AppSeed. — Node JS API Server.

Built the React UI

Step #1 - Clone the project

$ git clone https://github.com/app-generator/react-datta-able-dashboard.git
$ cd react-datta-able-dashboard

Step #2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

Step #3 - Start in development mode

$ npm run start 
// OR
$ yarn start

Once the UI is up and running, we can register new users and authenticate.

A colorful login page with two bouncing balls in the backend and a authentication form on top - ll provided by a React Datta Able (free version). — React Datta Able - Login Page.

React Datta Able - Charts Page

React Datta Able - Widgets page.

Thanks for reading! For more resources, feel free to access:

React Node JS Berry - open-source full-stack starter
React Node JS Datta PRO - premium version of Datta Able React

React Node JS Datta PRO - Premium Full-stack Product.