React Node JS - Open-source Seed Project

Hello Coders,

This article presents a simple seed project crafted in React and Node JS using an open-source material UI design: Berry Dashboard. The source code, published on Github, might be used to bootstrap fast a full-stack project or just for educational purpose. For newcomers, React is a super popular library for coding user interfaces and Node JS is a popular runtime used by well-known frameworks like Express, Koa, or Fastify. Thanks for Reading!

• React Node JS Berry - product page
• React Node JS Berry - source code, published on Github.

The React UI comes with a simple JWT Token authentication flow (login/register/logout) and a Redux Store for client-side persistance. The server exposes a simple authentication API powered by the Passport library. Togheter, the React UI and the Node JS/Express backend provide a simple and functional full-stack application that might help beginners (and not only) to code a commercial or a hobby project much easier.

For support, feel free to ask me anything in the comments section or open issues using Github (issues traker).

Node JS API

The backend is built using a simple codebase on top of Express and MongoDB using Typescript. The authentication API uses Passport library and JWT tokens.

Product features:

• NodeJS / Express / MongoDB
• Auth: Passport / passport-jwt strategy
• API Interface Descriptor: POSTMAN Collection
• Docker

How to build the API Server

Step #1 - Clone the sources

$ 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 - Start the API server (development mode)

$ npm dev
// OR
$ yarn dev

Step #4 - Start the API server (for production, files served from build/build/index.js)

$ npm start
// OR
$ yarn start

The API server will start using the PORT specified in .env file (default 5000). With the API server up & running, we can move to the REACT UI part.

React UI - Berry Dashboard

This open-source product is designed on top of Material UI kit and released for free under the MIT License on Github - Product features:

• Modern aesthetics UI design using Material-UI components
• React, Redux, Redux-persist
• Authentication: JWT Login/Register/Logout

How to use it

To use the product Node JS (>= 12.x) is required and GIT to clone/download the project from the public repository.

Step #1 - Clone the project

$ git clone https://github.com/app-generator/react-berry-admin-template.git
$ cd react-berry-admin-template

<br >

Step #2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

<br />

Step #3 - Start in development mode

$ npm run start 
// OR
$ yarn start

Once the React UI is up, we can create users and authenticate, the whole flow being already configured.

React Node JS Starter - Login Page

React Node JS Starter - UI Icons

From this point any developer with a basic programming knowledge in Node JS and React can extend the server and the UI with ease. Thanks for reading! Let me know your thoughts in the comments. For more resources, pelase access:

• Free React Dashboards - a curated list
• More Free Dashboards - simple starters coded with basic modules and database