DEV Community

Cover image for React Node JS - Open-Source Fullstack Starters
Sm0ke
Sm0ke

Posted on • Originally published at admin-dashboards.com

React Node JS - Open-Source Fullstack Starters

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.



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
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 - Run the SQLite migration via TypeORM

$ yarn typeorm migration:run
Enter fullscreen mode Exit fullscreen mode

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

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

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
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

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
};
Enter fullscreen mode Exit fullscreen mode

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

React Node JS Berry - Open-source full-stack project, the login page.


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.

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 Berry - Open-source full-stack project, the dashboard page.


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.

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 Soft Dashboard - Open-source full-stack project, the VR Room page.


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.

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.


React Node JS Soft Dashboard - Open-source full-stack project, the dashboard page


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


  • 🔥 More React Apps (free & commercial) crafted by AppSeed
  • 🔥 Free React Dashboards - a curated list published here on Dev.to

Top comments (6)

Collapse
 
uithemes profile image
ui-themes

Thanks for sharing!
Any other UI kits planned to be released?

Collapse
 
sm0ke profile image
Sm0ke

Yes, Purity, an open-source dashboard styled with Chakra is next.
🚀🚀

Collapse
 
uithemes profile image
ui-themes

Ty!

Thread Thread
 
sm0ke profile image
Sm0ke

🚀🚀

Collapse
 
crearesite profile image
WebsiteMarket

Great list!

Collapse
 
sm0ke profile image
Sm0ke

Ty! 🚀🚀