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)

React Datta Able - Open-source full-stack product.
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!

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 - Charts Page.
React Datta Able - Charts Page.
React Datta Able - Widgets page.
React Datta Able - Widgets.
React Datta Able - Widgets.

Thanks for reading! For more resources, feel free to access:
React Node JS Datta PRO - Premium Full-stack Product.
React Node JS Datta PRO - Premium Full-stack Product.