Material Kit React - From Zero to Full-Stack

Hello Coders,

This article explains, step by step, how to build a Full-Stack application, coded in React and Express on top of an amazing design. Check out here the live demo.

Material Kit React - Full-Stack App, Main Screen.

Ingredients
  • Starter App: Material Kit React crafted by Creative Tim
  • Half a day to code the app
  • Half a day to write the article
  • Coffee & Jazz

Get the code and accommodate with the app structure
  • Clone Material Kit Project from Github
  • git clone https://github.com/app-generator/material-kit-react.git
  • change the directory cd material-kit-react
  • install modules yarn
  • start the app yarn start

If all goes well, visit http://localhost:8080/ in your browser. You should see this:

Material Kit React - Full-Stack App, Screen 1.

Analyze the project structure

Source directory, with sub directories

Customize & have fun with the code

Update meta information (site title & description)

Update the sitemap.xml

Update the Footer information

Production Build & Live Deployment

Build the app for production & deploy
  • build for production yarn build
  • update FTP_USER, FTP_PASS and FTP_HOST inside deploy.js to match your server credentials
  • yarn deploy to release the app into the wild
  • if all goes well, you shoud see this app running LIVE

Connect App to Backend

At this moment we have the front end app, floating in the air. No connection so far to a real back end. The address and port of the back end is hard coded inside the Login page.  As i said, the application uses JWT to authenticate the user. The information collected from the login form is sent to URL:

  • http://localhost:3000/api/users/login
  • Data: email, password
  submitForm(e){
    // login form is submitted 
    e.preventDefault();
    const user = {
        email: this.state.email.value,
        password: this.state.password.value
    }
    const url = 'http://localhost:3000/api/users/login';
    fetch(url, {
        method: "POST", 
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ user }), 
    })
    .then( res => res.json())
    .then( data => {
        const { errors, user } = data;
        if (errors) {
            // errors are shown to the user
            // authentication failed
            return;
        }
        if (user) {
            // login is successfull, yupiii! 
            const { token, ...userData } = user;
        }
    });
  }

At this point, we need a back end. Let's build one!

In case you have a running back end enhanced with JWT authentication, feel free to use it. No worries if you don't have one, just check out the back end starters provided here and choose one: Laravel, Express or Flask. For now, we will use the Express backend.

  • clone the backend: git clone https://github.com/rosoftdeveloper/appseed.git
  • cd starter-express
  • yarn # install dependencies
  • yarn start # start the backend

The back end expose login and signup API methods. Complete instructions can be found in the README file. Please read it :)  

At this point the React App and Express back end should communicate  

Full-Stack Production Deployment

For production deployment, we can implement the architecture described bellow:

  • Express back end - started as a service on http//localhost:3000
  • React front end app - started via node.js  on http//localhost:8080
  • Nginx or Apache used as reverse proxy to route requests from https://YOUR_DOMAIN to react app.  

Material Kit React - Live Deployment

If all goes well, you should see this amazing app deployed on your server

Profile Page

Material Kit React - Full-Stack App, LIVE - Screen 3.

The Components Page

Material Kit React - Full-Stack App, LIVE - Screen 4.

Thank You!

Support via Discord and Facebook
Show Comments

Get the latest posts delivered right to your inbox.