Hello Coders!

This article presents an open-source full-stack seed project crafted in Laravel and 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.

• ✨ Laravel React Purity - LIVE demo
• ✨ Laravel React Purity - Source code
• 🔥 More React Apps - full-stack seed projects

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

$ 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

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

Start the React UI

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

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

Thanks for reading! For more resources please access:

• ✨ AppSeed for support via email and Discord
• ✨ React Apps - a curated index with Full-Stack Starters