Node JS Starter - Full-Stack React Material Kit
Tags: node, boilerplate, appseed
Published: 2019-07-04 08:55:50

---
title: Node JS Starter - Full-Stack React Material Kit
published: true
description: An open-source Nodejs Starter with Material Kit design to inspire Javascript / React coders
cover_image: https://raw.githubusercontent.com/app-generator/static/master/products/react-express-material-design-intro.gif
tags: nodejs, boilerplate, appseed
---
Hello Coders,

Lately, I'm focusing a lot on **boilerplates and starters** in order to save an important resource: **time**. You may not use it before a boilerplate, and this is ok, but in my case, when I start a new project in **Nodejs**, I try to avoid much as I can to code the bottom layer of the product. This phase usually, is boring, not so creative, and relatively time-consuming.  

--- 

This article presents a **[Node JS Starter](https://appseed.us/boilerplate-code/nodejs-starter)** that I've used to speed up a little my development for some products written in **Javascript**, in the last few months. Bellow is the look & feel of the final app. 

---

## What is [Node JS](https://nodejs.org/en/)

[Nodejs](https://nodejs.org/en/) is a JavaScript runtime environment that includes everything you need to execute a program written in JavaScript in your favorite operating system. Basically, what you can execute in the browser, by using **Nodejs**, you can execute directly in the operating system and do things just like Python or Ruby. 

---

## What is a [Boilerplate Code](https://appseed.us/boilerplate-code)

In computer programming, **boilerplate** code refers to sections of code that have to be included in many places with little or no alteration. Write once, and reuse over and over. You may read more about [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code) code on Wikipedia.

--- 

## [Material Kit React](https://appseed.us/apps/react/express/material-kit-creative-tim)

**Material Kit React** is a Free Material-UI Kit, coded in [React](https://reactjs.org/) with a fresh, new design inspired by Google's material design. Read more about [Material Kit React](https://www.creative-tim.com/product/material-kit-react?ref=appseed) on the official product page.


---

The [Nodejs Starter](https://appseed.us/boilerplate-code/nodejs-starter) is built using a decoupled architecture, where the Material Kit React frontend communicates with the **Nodejs** / [Express](https://expressjs.com/) backend through secure ajax call.    

To use and start this starter, a few simple steps must be followed:
 
 - clone, build and start the [Nodejs Starter](https://github.com/app-generator/nodejs-starter) backend
 - clone, built and start the [Material Kit React](https://github.com/app-generator/material-kit-react) frontend 
 - update the code and add your magic on top of the existing boilerplate code. 

Let's say a few words about each side of this starter 

---

## [Material Kit React](https://appseed.us/apps/react/express/material-kit-creative-tim) Frontend

To have a fully functional [React](https://reactjs.org/) frontend, I've added on top of the existing design the necessary code to handle the authentication and registration. Users will enter the classic `email` / `password` information and the account will be created if not exists already in the backend service. 

> Built & start the frontend

```
$ # clone the react Frontend 

$ git clone https://github.com/app-generator/material-kit-react.git
$ cd material-kit-react
$ yarn # to install the dependencies
$ yarn start 
```
If all goes well, the frontend should be visible in your browser at the address `localhost:8080`. At this moment we have the front end app, floating in the air. No connection so far to a real back end. let's do something about it.

---

## [Node JS Backend](https://appseed.us/boilerplate-code/nodejs-starter)

[Nodejs Starter](https://appseed.us/boilerplate-code/nodejs-starter) is already equipped with some basic modules and features, to help you jump over the basic setup:

 - Express backend
 - ORM Sequelize, on top of SQLite database
 - Passport, JWT for authentication

```
$ git clone https://github.com/app-generator/nodejs-starter.git
$ cd nodejs-starter
$ yarn
$ yarn start
```

--- 

I will update this article with new information, based on the reactions and comments. Sometimes, using a boilerplate, from a trusted source can help you to save some valuable time and speed up a little the development speed. 

--- 

## Other Nodejs Starters

 - [Nodejs Starter Hackathon](https://github.com/sahat/hackathon-starter)
 - [Nodejs Starter API Kit](https://github.com/kriasoft/nodejs-api-starter)
 - [Nodejs Starter Serverless](https://github.com/AnomalyInnovations/serverless-nodejs-starter)

---

## Related Articles

 - [Nodejs Starter - Open-Source Boilerplate Code](https://blog.appseed.us/nodejs-starter-open-source-boilerplate-code/)
 - [Nodejs Starter](https://dev.to/sm0ke/nodejs-starter-javascript-boilerplates-to-start-fast-1024) Javascript Boilerplates to start fast
 - [Nodejs Starter - Full-Stack Vue Argon Design](https://dev.to/sm0ke/nodejs-starter-full-stack-vue-argon-design-13bj)
 
---

> Thank you! Btw, my (nick) name is **Sm0ke** and I'm pretty active also on [Twitter](https://twitter.com/Sm0keDev).