React Node JS - Open-Source Fullstack Starters

#react #node #fullstack #webdev

Hello Coders!

This article presents a curated list with open-source source seed projects crafted in React and Node JS on top of modern UI kits and templates. All products are actively supported and the permissive license allows the usage for commercial projects (unlimited copies). For newcomers, Node JS is an open-source, cross-platform, back-end JavaScript runtime environment, and React is a popular JavaScript library for coding user interfaces backed by Facebook.

Thanks for reading! - Content provided by Admin Dashboards.

✨ React Node JS - Berry Dashboard
✨ React Node JS - Soft UI Dashboard
✨ React Node JS - Datta Able

All starters are crafted using an identical design pattern where the React UI is decoupled from the Node JS backend and the communication is secured by web tokens. To make this article more useful, I will present in the next section how to build the Berry Dashboard using a minimal programming kit (Node JS, GIT and VsCode code editor) and type a few commands in the terminal window.

✨ How to compile a sample

The mentioned products can be used in many ways (under Docker, with a simulated backend .. etc) but probably the most useful way to use the products is to compile the backend and and frontend and play with the code on both sides. Here is the plan:

Download, compile, and start the Node JS API Backend
Download, compile the React UI: Berry Dashboard
Configure the UI to communicate with the backend
Register a new user
Authenticate and access the private pages

✨ Download & start the Node JS API Server

This open-source product is a simple Express server that uses SQLite for persistence and TypeORM as DB interface. Authentication Flow uses json web tokens via Passport library - passport-jwt strategy and the deployment part is covered by Docker. The full list with features are listed on the project README.

Step #1 - Clone the project

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

Step #2 - Install dependencies via NPM or Yarn

$ npm i
// OR
$ yarn

Step #3 - Run the SQLite migration via TypeORM

$ yarn typeorm migration:run

Step #4 - Start the API server (development mode)

$ npm dev
// OR
$ yarn dev

At this point, we can interact with the server using POSTMAN on address http://localhost:5000.

✨ Download and compile the React UI

Berry Dashboard is a pixel-perfect open-source templated styled with Material-UI, a popular components library for React.

Step #1 - Clone the project

$ git clone https://github.com/app-generator/react-berry-dashboard.git
$ cd react-berry-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

The UI starts automatically on port 3000 and expects a running backend server on port 5000. If anyone need to customize the backend address, this can be done via configuration:

✨ Configure the backend server address

API Server URL - src/config/constant.js

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

Once the backend and the frontend are up & running, we should be able to register new users, authenticate and access the private pages.

Using the same process, we can compile and start the other projects - In case of any issues, feel free to ask for help in the comments sections.

✨ React Node JS Berry Dashboard

Berry is a creative React Dashboard build using the Material-UI by CodedThemes. It is meant to provide a nice User Experience with highly customizable feature-rich pages now available in a full-stack product.

👉 React Node JS Berry Dashboard - product page
👉 React Node JS Berry Dashboard - LIVE Demo

Berry Dashboard is a complete game-changer React Dashboard Template with an easy and intuitive responsive design as on retina screens or laptops.

✨ React Node JS Soft UI Dashboard

The product comes with a modern, innovative design crafted by Creative-Tim on top of Material-UI. Soft UI Dashboard React is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

👉 React Soft Dashboard - product page
👉 React Soft Dashboard - LIVE Demo

For a complete full-stack experience, the product is powered by a simple, yet powerful, Node JS API that manages a simple JWT authentication flow: login, register and logout using Express, Typescript, and TypeORM for database interface.

✨ React Node JS Datta Able

Datta Able is a colorful free React Admin Dashboard crafted by CodedThemes. It comes with high feature-rich pages and components with fully developer-centric code.

👉 React Node JS Datta Able - product page
👉 React Node JS Datta Able - LIVE Demo

Datta Able React comes with error/bug-free, well structured, well-commented code and regularly with all latest updated code. This modern UI Kit crafted by CodedThemes features a rich UI Kit and pre-built pages: dashboard, maps and authentication pages.