Laravel React - Purity Dashboard (Free Product)
Tags: webdev, laravel, react, opensource
Published: 2021-11-16 06:59:18

---
title: Laravel React - Purity Dashboard (Free Product)
published: true
description: Open-source seed project crafted with Laravel and React on top of Purity Dashboard, a pixel-perfect Chakra UI design. The product is published under the MIT License on Github.
tags: webdev, laravel, react, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kttix3tqi6ok89fnyw2c.gif
canonical_url: https://appseed.us/product/laravel-react-purity-dashboard
---
Hello Coders! 

This article presents an open-source full-stack seed project crafted in [Laravel and React](https://appseed.us/product/purity-dashboard/api-server-laravel/react/) on top of a pixel-perfect `Chakra UI` design: **Purity Dashboard**. The product can be downloaded and used directly from Github and the permissive license permits unlimited copies and usage for commercial products. For newcomers, **Purity React** is an innovative design crafted by Creative-Tim and **Laravel** is a leading web framework written in PHP. 

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

--- 

- ✨ [Laravel React Purity](https://laravel-react-purity-dashboard.appseed-srv1.com/#/auth/signin) - LIVE demo
- ✨ [Laravel React Purity](https://github.com/app-generator/laravel-react-purity-dashboard) - Source code
- 🔥 More [React Apps](https://appseed.us/apps/react) - full-stack seed projects

--- 

![Laravel React - Purity Dashboard.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bqykhh3jrjf4mru6e9f.png)
 
---

## How to use the product

This open-source product can be used in a local environment by typing a few commands in the terminal window. Before trying to compile Laravel React Purity, make sure the workstation has a minimal programming kit to complete the task:

- Php 7.4+
- NodeJS 12.x or above
- GIT - command line versioning tool
- A modern code editor like VsCode or Atom

Once this minimal toolchain is properly installed and accessible in the terminal, we can proceed further and compile the product starting with the backend:

> **Step #1** - Download the product via GIT 

```bash
$ git clone https://github.com/app-generator/laravel-react-purity-dashboard.git
```

The product is built using a two-tier pattern where the React frontend is decoupled logically and physically from the API backend. In order to use the product in a local environment, a few simple steps are required:

- `Compile and start` the **Laravel API Backend**
- `Compile and start` the **React UI**
- (`Optional`) Change the API port exposed by **Laravel** Codebase
- (`Optional`) Configure the API port used by the **React UI** to communicate with the backend

With all the above steps completed, we should see the product running in the browser and being able to register new users, authenticate and interact with the UI.

---

### Compile and Start the API

```bash
$ cd laravel-api
$ 
$ # Install Modules
$ composer install
$ cp .env.example .env 
$ php artisan key:generate
$
$ # Generate a `secret` key used by JWT Authentication Flow
$ php artisan jwt:secret
$ 
$ # Set up the database
$ touch database/database.sqlite
$ php artisan migrate
$
$ # Start the server
$ php -S localhost:5000 server.php
```

At this point, the API should be up & running and we can test it using POSTMAN or `curl`. 

![Laravel API Server - Product Banner.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzqmckkdyy4yrrhxnu6f.png)

---

### Start the React UI

```bash
$ cd react-ui
$
$ # Install Modules
$ yarn
$
$ # Start for development (LIVE Reload)
$ yarn start 
```

The React UI comes pre-configured to communicate with the backend using the port `5000` but we can easily change this via the configuration `src/config/constant.js`:

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

--- 

Once the backend and the frontend are both up & running, we should be able to register new users, authenticate and interact with this nice design. 

> `React Laravel Purity Dashboard` - Billing

![React Laravel Purity Dashboard - Billing Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g09uyqqmrjw5wxjwnko.png)

---

> `React Laravel Purity Dashboard` - RTL Support

![React Laravel Purity Dashboard - RTL Support.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi0aswh05s5j3k5afa9u.png)
 
---

> Thanks for reading! For more resources please access:

- ✨ AppSeed for [support](https://appseed.us/support) via email and [Discord](https://appseed.us/support)
- ✨ [React Apps](https://appseed.us/apps/react) - a curated index with Full-Stack Starters